{{>header}}
<style>
    .file-type-hint {
        font-size: 13px;
        color: #6c757d;
        /* Bootstrap muted text */
        margin-top: 5px;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<title>Instant Bookings</title>

<div class="row p-2" style="margin: 0px !important;">
    <div class="col-md-12">
        <div class="card mt-2" style="border-left: 2px solid #083c30;">
            <div class="card-header" style="background-color:#083c30; color:white;">
                <h4><b>Instant Bookings</b></h4>
            </div>
            <div class="card-body p-2">
                <div id="example1_wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <ol class="float-sm-right">
                                {{!-- <button data-bs-toggle="modal" data-bs-target="#addModal"
                                    style="background-color: #083c30; color:white; border:none; border-radius:5px; width: 180px; height: 40px;">
                                    <i class="fa-solid fa-plus"></i> Add User
                                </button> --}}
                            </ol>
                        </div>
                        <div class="col-sm-12 table-responsive">
                            <table id="example2" class="table table-bordered datatable" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Booking ID</th>
                                        <th>Parcel images</th>
                                        <th>Date</th>
                                        <th>Time</th>
                                        <th>Pickup Address</th>
                                        <th>Drop Address</th>
                                        <th>Order Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each allInstantBookings}}
                                    <tr>
                                        <td>{{inc @index}}</td>
                                        <td>{{this.bookingId}}</td>
                                        <td>
                                            {{#if this.packageImages}}
                                            {{#each this.packageImages}}
                                            <img src="{{this}}" alt="Package Image" class="img-thumbnail"
                                                style="width: 70px; height: 70px; object-fit: cover; margin-right: 5px; border-radius: 8px;">
                                            {{/each}}
                                            {{else}}
                                            <span class="text-muted">No Images</span>
                                            {{/if}}
                                        </td>
                                        <td>{{this.bookingDate}}</td>
                                        <td>{{this.bookingTime}}</td>
                                        <td>{{this.pickupLocation.address}}</td>
                                        <td>{{this.dropLocation.address}}</td>
                                        <td>{{this.status}}</td>

                                        <td>
                                            <a href="/admin/managebooking/{{this.bookingId}}" class="btn btn-info btn-sm">
                                                <i class="fa-solid fa-eye"></i> View
                                            </a>

                                        </td>

                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="/admin/users/add" method="POST">
            <div class="modal-content">
                <div class="modal-header custom-header">
                    <h5 class="modal-title"><i class="fa-solid fa-user-plus"></i> Add User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Full Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Phone Number</label>
                        <input type="text" name="phoneNumber" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" name="dob" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Gender</label>
                        <select name="gender" class="form-select" required>
                            <option value="">Select</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Address</label>
                        <textarea name="address" class="form-control" rows="2" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Add</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="/admin/users/update" method="POST">
            <input type="hidden" name="id" id="edit-id">
            <div class="modal-content">
                <div class="modal-header custom-header">
                    <h5 class="modal-title"><i class="fa-solid fa-pen-to-square"></i> Edit User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Full Name</label>
                        <input type="text" id="edit-name" name="name" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" id="edit-email" name="email" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Phone Number</label>
                        <input type="text" id="edit-phone" name="phoneNumber" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" id="edit-dob" name="dob" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Gender</label>
                        <select id="edit-gender" name="gender" class="form-select" required>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Address</label>
                        <textarea id="edit-address" name="address" class="form-control" rows="2" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header custom-header">
                <h5 class="modal-title"><i class="fa-solid fa-trash"></i> Delete User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this user?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <a href="#" id="deleteUserBtn" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>

{{!--
<script>
    // Reset Add Session form when modal is closed
    const addModal = document.getElementById('addModal');
    addModal.addEventListener('hidden.bs.modal', function () {
        const form = addModal.querySelector('form');
        form.reset(); // Clears all inputs
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const editModal = document.getElementById('editModal');
        const editDate = document.getElementById('edit-date');
        const editTime = document.getElementById('edit-time');

        editModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const dateValue = button.getAttribute('data-date');
            const timeValue = button.getAttribute('data-time');

            // Set the values in the form
            editDate.value = dateValue;
            editTime.value = timeValue;

            // Set min date to today
            const today = new Date().toISOString().split("T")[0];
            editDate.setAttribute("min", today);

            // Function to restrict time if the date is today
            function restrictTime() {
                const selectedDate = editDate.value;
                const now = new Date();
                if (selectedDate === now.toISOString().split("T")[0]) {
                    const currentTime = now.toTimeString().slice(0, 5); // HH:MM
                    editTime.setAttribute("min", currentTime);
                } else {
                    editTime.removeAttribute("min");
                }
            }

            // Apply restriction immediately and on date change
            restrictTime();
            editDate.addEventListener("change", restrictTime);
        });
    });
</script> --}}

{{!--
<script>
    document.getElementById('deleteModal').addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const sessionId = button.getAttribute('data-id');
        const deleteBtn = document.getElementById('deleteSessionBtn');
        deleteBtn.href = `/admin/yoga-sessions/delete/${sessionId}`;
    });
</script> --}}

{{!--
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const today = new Date().toISOString().split("T")[0];

        const addDate = document.getElementById("add-date");
        const addTime = document.getElementById("add-time");
        {
            {
                !-- const editDate = document.getElementById("edit-date");
                const editTime = document.getElementById("edit-time"); --}
        }
        addDate.setAttribute("min", today);

        function restrictTime(dateInput, timeInput) {
            const selectedDate = dateInput.value;
            const now = new Date();
            if (selectedDate === now.toISOString().split("T")[0]) {
                const currentTime = now.toISOString().split("T")[1].slice(0, 5);
                timeInput.setAttribute("min", currentTime);
            } else {
                timeInput.removeAttribute("min");
            }
        }

        addDate.addEventListener("change", () => restrictTime(addDate, addTime));
        if (editDate) {
            editDate.addEventListener("change", () => restrictTime(editDate, editTime));
        }

        const editModal = document.getElementById('editModal');
        editModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            editDate.value = button.getAttribute('data-date');
            editTime.value = button.getAttribute('data-time');

            editDate.setAttribute("min", today);
            restrictTime(editDate, editTime);
        });
    });
</script> --}}



{{!--
<script>
    const editModal = document.getElementById('editModal');
    editModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        document.getElementById('edit-id').value = button.getAttribute('data-id');
        document.getElementById('edit-instructor').value = button.getAttribute('data-instructor');

        document.getElementById('edit-date').value = button.getAttribute('data-date');
        document.getElementById('edit-time').value = button.getAttribute('data-time');
        document.getElementById('edit-zoom').value = button.getAttribute('data-zoom');
        document.getElementById('edit-existing-image').value = button.getAttribute('data-image');
    });
</script> --}}

{{!--
<script>
    // Prevent past dates in Add Session date picker
    const today = new Date().toISOString().split("T")[0];
    document.getElementById("add-date").setAttribute("min", today);
</script> --}}



<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<!-- DataTables Buttons JS and dependencies -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
{{>footer}}