@extends('layouts.app')
<style>
    .modal-content {
        background-color: #fefefe;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    #closeModal {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    #closeModal:hover,
    #closeModal:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>
@section('content')
    @if (session()->has('message'))
        <div class="alert alert-success">{{ session()->get('message') }}</div>
    @endif
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif

    <div class="row">
        <h3>Add Pickup Dates</h3>

        <div class="col-xl-12">
            <div class="card forms-card">
                <div class="card-body">
                    <div class="basic-form">
                        <form class="m-form m-form--state" name="frm-create" id="frm-create" method="post" action="{{ url('/backend/pickup-dates-add') }}">
                            @csrf
                            <div class="outer-div">
                                <div class="inner-div">
                                    <div class="form-group row">
                                        <div class="col-sm-4">
                                            <label class="text-label" for="english_content">Pickup Date</label>
                                            <input type="date" class="form-control" name="pickup_date" id="add-pickup_date" required>
                                            <small id="add-date-error" class="form-text text-danger" style="display:none;">Date cannot be in the past.</small>
                                        </div>
                                        <div class="col-sm-4">
                                            <label class="text-label" for="english_content">Pickup Time (Begin)</label>
                                            <input type="time" class="form-control" name="pickup_time_begin" id="add-time-begin" required>
                                        </div>
                                        <div class="col-sm-4">
                                            <label class="text-label" for="english_content">Pickup Time (End)</label>
                                            <input type="time" class="form-control" name="pickup_time_end" id="add-time-end" required>
                                            <small id="add-time-error" class="form-text text-danger" style="display:none;">End time cannot be earlier than start time.</small>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-sm-9">
                                            <label class="text-label" for="english_content">Pickup Location</label>
                                            <input type="text" class="form-control" name="pickup_location" id="add-pickup_location" required>
                                        </div>
                                        <div class="col-sm-3">
                                            <label class="text-label" for="english_content">Limit</label>
                                            <input type="number" class="form-control" name="pickuplimit" id="pickuplimit" required>
                                        </div>
                                    </div>
                                   
                                </div>
                            </div>
                            <div class="inner-div">
                                <div class="form-group">
                                    <div class="d-flex justify-content-end">
                                        <button type="submit" class="btn btn-primary btn-form">Save</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>


    

      <div class="card forms-card">
        <div class="card-body">
            <div class="basic-form">
                <div class="outer-div">
                    <div class="srchBox_wraper justify-content-end mt-3 mb-3">
                        <div class="right-panel-btn text-left">
                            <h5>Pickup Date List</h5>
                        </div>
                    </div>
                    
                    <div class="table-responsive custom-table-s1">
                        <table class="table participant_table" width="100%">
                            <thead>
                                <tr>
                                    <th>Pickup Date</th>
                                    <th>Pickup Time (Begin)</th>
                                    <th>Pickup Time (End)</th>
                                    <th>Pickup Location</th>
                                    <th>Limit</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($PickupTime as $list)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($list->pickup_date)->format('F j, Y') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($list->pickup_time_begin)->format('g:i A') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($list->pickup_time_end)->format('g:i A') }}</td>
            <td>{{$list->pickup_location}}</td>
            <td>{{$list->pickuplimit}}</td>
                                    <td>
                                        <button class="btn btn-primary edit-btn" data-toggle="modal" data-target="#editModal" data-id="{{ $list->id }}" data-date="{{ $list->pickup_date }}" data-time-begin="{{ $list->pickup_time_begin }}" data-time-end="{{ $list->pickup_time_end }}" data-location="{{ $list->pickup_location }}" data-limit="{{ $list->pickuplimit }}" >Edit</button>
                                        <a href="{{url('/backend/pickup-dates-delete')}}/{{$list->id}}" onclick="return confirmDelete();">
                                            <button type="button" class="btn btn-danger delete-btn">Delete</button>
                                        </a>
                                        
                                        
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
<!-- Edit Modal -->
<!-- Edit Modal -->
<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Pickup Time</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="edit-form" action="{{ url('/backend/pickup-dates-edit') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="id" id="edit-id">
                    <div class="form-group">
                        <label for="edit-date">Pickup Date:</label>
                        <input type="date" class="form-control" name="pickup_date" id="edit-date" required>
                        <small id="date-error" class="form-text text-danger" style="display:none;">Date cannot be in the past.</small>
                    </div>
                    <div class="form-group">
                        <label for="edit-time-begin">Pickup Time (Begin):</label>
                        <input type="time" class="form-control" name="pickup_time_begin" id="edit-time-begin" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-time-end">Pickup Time (End):</label>
                        <input type="time" class="form-control" name="pickup_time_end" id="edit-time-end" required>
                        <small id="time-error" class="form-text text-danger" style="display:none;">End time cannot be earlier than start time.</small>
                    </div>

                    <div class="form-group">
                        <label for="edit-location">Pickup Location:</label>
                        <input type="text" class="form-control" name="pickup_location" id="edit-location" required>
                    </div>

                    <!-- Add Limit field to the Edit Modal -->
                    <div class="form-group">
                        <label for="edit-pickuplimit">Limit:</label>
                        <input type="number" class="form-control" name="pickuplimit" id="edit-pickuplimit" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>





   <!-- Add this to the end of your HTML or in a separate JS file -->
<!-- Add this to the end of your HTML or in a separate JS file -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    $('#editModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var id = button.data('id');
        var date = button.data('date');
        var timeBegin = button.data('time-begin');
        var timeEnd = button.data('time-end');
        var location = button.data('location');
        var pickuplimit = button.data('limit');  

        var modal = $(this);
        modal.find('#edit-id').val(id);
        modal.find('#edit-date').val(date);
        modal.find('#edit-time-begin').val(timeBegin);
        modal.find('#edit-time-end').val(timeEnd);
        modal.find('#edit-location').val(location);
        modal.find('#edit-pickuplimit').val(pickuplimit);
    });

    document.getElementById('edit-form').addEventListener('submit', function(event) {
        var dateInput = document.getElementById('edit-date');
        var timeBeginInput = document.getElementById('edit-time-begin');
        var timeEndInput = document.getElementById('edit-time-end');
        var dateError = document.getElementById('date-error');
        var timeError = document.getElementById('time-error');
        var isValid = true;

        // Reset error messages
        dateError.style.display = 'none';
        timeError.style.display = 'none';

        // Validate date is not in the past


        // Validate end time is not earlier than start time
        if (timeEndInput.value <= timeBeginInput.value) {
            timeError.style.display = 'block';
            isValid = false;
        }

        if (!isValid) {
            event.preventDefault(); // Prevent form submission if validation fails
        }
    });
</script>
<script>
    document.getElementById('frm-create').addEventListener('submit', function(event) {
        var dateInput = document.getElementById('add-pickup_date');
        var timeBeginInput = document.getElementById('add-time-begin');
        var timeEndInput = document.getElementById('add-time-end');
        var dateError = document.getElementById('add-date-error');
        var timeError = document.getElementById('add-time-error');
        var isValid = true;

        // Reset error messages
        dateError.style.display = 'none';
        timeError.style.display = 'none';

        // Validate date is not in the past
        var today = new Date().toISOString().split('T')[0];
        if (dateInput.value < today) {
            dateError.style.display = 'block';
            isValid = false;
        }

        // Validate end time is not earlier than start time
        if (timeEndInput.value <= timeBeginInput.value) {
            timeError.style.display = 'block';
            isValid = false;
        }

        if (!isValid) {
            event.preventDefault(); // Prevent form submission if validation fails
        }
    });
</script>
<script>
    function confirmDelete() {
        return confirm('Are you sure you want to delete this pickup date?');
    }
</script>




@endsection