<?php include 'layouts/session.php'; ?>
<?php include 'layouts/head-main.php'; ?>

    <head>
        
        <title>Parcel</title>
        <?php include 'layouts/title-meta.php'; ?>
        <link href="assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
        <?php include 'layouts/head-css.php'; ?>
        <style>
            .pac-container {
                z-index: 2000 !important;
            }
            /*.gmpx-place-autocomplete::part(panel) {
                z-index: 2000 !important; !* above Bootstrap modal *!
            }*/
        </style>

    </head>

    <?php include 'layouts/body.php'; ?>

        <!-- Begin page -->
        <div id="layout-wrapper">

            <?php include 'layouts/menu.php'; ?>

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

            <div class="page-content">
                <div class="container-fluid">

                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                <h4 class="mb-sm-0">Parcels</h4>

                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);">Menu</a></li>
                                        <li class="breadcrumb-item active">All Parcels</li>
                                    </ol>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card" id="customerList">
                                <div class="card-header border-bottom-dashed">

                                    <div class="row g-4 align-items-center">
                                        <div class="col-sm">
                                            <div>
                                                <h5 class="card-title mb-0">Parcel Booking List</h5>
                                            </div>
                                        </div>
                                        <div class="col-sm-auto">
                                            <div>
                                                <!--<button class="btn btn-soft-danger" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>-->
                                                <button type="button" class="btn btn-success add-btn"
                                                    data-bs-toggle="modal" id="create-btn"><i class="ri-add-line align-bottom me-1"></i> Book a Parcel</button>
                                                <!--<button type="button" class="btn btn-info"><i class="ri-file-download-line align-bottom me-1"></i> Import</button>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body border-bottom-dashed border-bottom">

                                    <form>

                                        <div class="row g-3">

                                            <div class="col-xl-6">
                                                <div class="search-box">
                                                    <input type="text" class="form-control search"
                                                        placeholder="Search for table, floor or branch ...">
                                                    <i class="ri-search-line search-icon"></i>
                                                </div>
                                            </div>
                                            <!--end col-->

                                            <div class="col-xl-6">
                                                <div class="row g-3">
                                                    <div class="col-sm-4">
                                                        <div class="">

                                                            <input type="text" class="form-control" data-provider="flatpickr"
                                                                   data-date-format="d M, Y" data-range-date="true"
                                                                   id="datepicker-range" placeholder="Select date">

                                                        </div>
                                                    </div>
                                                    <!--end col-->
                                                    <div class="col-sm-4">
                                                        <div>
                                                            <select class="form-control" data-plugin="choices"
                                                                data-choices data-choices-search-false
                                                                name="choices-single-default" id="idStatus">
                                                                <option value="">Status</option>
                                                                <option value="all" selected>All</option>
                                                                <option value="Active">Active</option>
                                                                <option value="Block">Block</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <!--end col-->

                                                    <div class="col-sm-4">
                                                        <div>
                                                            <button type="button" class="btn btn-primary w-100"
                                                                onclick="SearchData();"> <i
                                                                    class="ri-equalizer-fill me-2 align-bottom"></i>Filters</button>
                                                        </div>
                                                    </div>
                                                    <!--end col-->
                                                </div>
                                            </div>

                                        </div>
                                        <!--end row-->

                                    </form>

                                </div>

                                <div class="card-body">
                                    <div>
                                        <div class="table-responsive table-card mb-1">
                                            <table class="table align-middle" id="customerTable">
                                                <thead class="table-light text-muted">
                                                    <tr>
                                                        <th scope="col" style="width: 50px;">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="checkAll" value="option">
                                                            </div>
                                                        </th>

                                                        <th class="sort" data-sort="from_address">From Address</th>
                                                        <th class="sort" data-sort="to_address">To Address</th>

                                                        <th class="sort" data-sort="business_name">Business</th>
                                                        <th class="sort" data-sort="group_name">Group</th>
                                                        <th class="sort" data-sort="people_name">User</th>

                                                        <th class="sort" data-sort="estimated_duration">Duration</th>
                                                        <th class="sort" data-sort="estimated_distance">Distance</th>
                                                        <th class="sort" data-sort="estimated_fare">Fare</th>

                                                        <th class="sort" data-sort="date">Joining Date</th>
                                                        <th class="sort" data-sort="status">Status</th>
                                                        <!--<th class="sort" data-sort="action">Action</th>-->
                                                    </tr>
                                                </thead>
                                                <tbody class="list form-check-all">
                                                    <tr>
                                                        <th scope="row">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" name="chk_child" value="option1">
                                                            </div>
                                                        </th>
                                                        <td class="id" style="display:none;"><a href="javascript:void(0);"
                                                                class="fw-medium link-primary">#VZ2101</a></td>

                                                        <td class="from_address"></td>
                                                        <td class="to_address"></td>

                                                        <td class="booking_id" style="display:none;"></td>
                                                        <td class="business_id" style="display:none;"></td>
                                                        <td class="business_name"></td>

                                                        <td class="group_id" style="display:none;"></td>
                                                        <td class="group_name"></td>

                                                        <td class="people_id" style="display:none;"></td>
                                                        <td class="people_name"></td>

                                                        <td class="estimated_duration"></td>
                                                        <td class="estimated_distance"></td>
                                                        <td class="estimated_fare"></td>

                                                        <td class="date"></td>
                                                        <td class="status"><span class="badge badge-soft-success text-uppercase">Active</span>
                                                        </td>

                                                        <!-- <td>
                                                             <ul class="list-inline hstack gap-2 mb-0">

                                                                 <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                     data-bs-placement="top" title="Edit">
                                                                     <a href="#showModal" listener="false" data-bs-toggle="modal" class="text-primary d-inline-block edit-item-btn">
                                                                         <i class="ri-pencil-fill fs-16"></i>
                                                                     </a>
                                                                 </li>

                                                                 <li class="list-inline-item remove" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                                     data-bs-placement="top" title="Remove">
                                                                     <a listener="false" class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal"
                                                                         href="#deleteRecordModal">
                                                                         <i class="ri-delete-bin-5-fill fs-16"></i>
                                                                     </a>
                                                                 </li>

                                                            </ul>
                                                        </td>-->

                                                    </tr>
                                                </tbody>
                                            </table>
                                            <div class="noresult" style="display: none">
                                                <div class="text-center">
                                                    <lord-icon src="https://cdn.lordicon.com/msoeawqm.json"
                                                        trigger="loop" colors="primary:#121331,secondary:#08a88a"
                                                        style="width:75px;height:75px">
                                                    </lord-icon>
                                                    <h5 class="mt-2">Sorry! No Data</h5>
                                                   <!-- <p class="text-muted mb-0">We've searched more than 150+ Customers
                                                        We did not find any
                                                        Customers for you search.</p>-->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-end">
                                            <div class="pagination-wrap hstack gap-2">
                                                <a class="page-item pagination-prev disabled" href="#">
                                                    Previous
                                                </a>
                                                <ul class="pagination listjs-pagination mb-0"></ul>
                                                <a class="page-item pagination-next" href="#">
                                                    Next
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade" id="showModal" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header bg-light p-3">
                                                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close" id="close-modal"></button>
                                                </div>
                                                <div>

                                                    <div class="modal-body">
                                                        <input type="hidden" id="id-field" />



                                                        <div class="mb-3" id="modal-id" style="display: none;">
                                                            <label for="id-field1" class="form-label">ID</label>
                                                            <input type="text" id="id-field1" class="form-control"
                                                                placeholder="ID" readonly />
                                                        </div>


                                                        <div class="d-flex flex-row justify-content-between flex-wrap mb-3">

                                                            <div class="col me-1">

                                                                <label for="input-from-location" class="form-label">From Location</label>
                                                                <!--<input type="text" id="input-name" class="form-control"
                                                                       placeholder="Enter name" required />-->

                                                                <input id="input-from-location" class="form-control" placeholder="Enter a place"/>
                                                                <!--<gmpx-place-autocomplete id="autocomplete-el" placeholder="Enter a place"></gmpx-place-autocomplete>-->

                                                            </div>

                                                            <div class="col ms-1">

                                                                <label for="input-to-location" class="form-label">To Location</label>
                                                                <input id="input-to-location" class="form-control" placeholder="Enter a place"/>

                                                            </div>

                                                        </div>


                                                        <div class="mb-3">
                                                            <label for="choice-business" class="form-label">Select Business</label>
                                                            <select class="form-control" data-trigger id="choice-business">
                                                                <option value="">Select Business</option>
                                                            </select>
                                                        </div>


                                                        <div class="mb-3">
                                                            <label for="choice-group" class="form-label">Select Group</label>
                                                            <select data-placeholder="Select Group" class="form-control" data-trigger id="choice-group">
                                                                <option value="">Select Group</option>
                                                            </select>
                                                        </div>

                                                        <div class="mb-3">
                                                            <label for="choice-user" class="form-label">Select User</label>
                                                            <select data-placeholder="Select User" class="form-control" data-trigger id="choice-user">
                                                                <option value="">Select User</option>
                                                            </select>
                                                        </div>



                                                        <!--<div class="mb-3">
                                                            <label for="date-field" class="form-label">Joining
                                                                Date</label>
                                                            <input type="date" id="date-field" class="form-control"
                                                                data-provider="flatpickr" data-date-format="d M, Y"
                                                                required placeholder="Select date" />
                                                        </div>-->

                                                        <div>
                                                            <label for="status-field" class="form-label">Status</label>
                                                            <select class="form-control" data-trigger
                                                                name="status-field" id="status-field">
                                                                <option value="">Status</option>
                                                                <option value="Active">Active</option>
                                                                <option value="Block">Block</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <div class="hstack gap-2 justify-content-end">
                                                            <button type="button" class="btn btn-light"
                                                                data-bs-dismiss="modal">Close</button>
                                                            <button type="submit" class="btn btn-success"
                                                                id="add-btn">Add</button>
                                                            <button type="button" class="btn btn-success"
                                                                id="edit-btn">Update</button>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Modal -->
                                    <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close" id="btn-close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mt-2 text-center">
                                                        <input type="hidden" id="input-delete-id" />
                                                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json"
                                                            trigger="loop" colors="primary:#f7b84b,secondary:#f06548"
                                                            style="width:100px;height:100px"></lord-icon>
                                                        <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                                                            <h4>Are you sure ?</h4>
                                                            <p class="text-muted mx-4 mb-0">Are you sure you want to
                                                                remove this record ?</p>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                                                        <button type="button" class="btn w-sm btn-light"
                                                            data-bs-dismiss="modal">Close</button>
                                                        <button type="button"  class="btn w-sm btn-danger "
                                                            id="delete-record">Yes, Delete It!</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end modal -->
                                </div>
                            </div>

                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->

                </div>
                <!-- container-fluid -->
            </div>
                <!-- End Page-content -->

                <?php include 'layouts/footer.php'; ?>
            </div>
            <!-- end main content-->

        </div>
        <!-- END layout-wrapper -->

        

        <?php include 'layouts/customizer.php'; ?>

        <?php include 'layouts/vendor-scripts.php'; ?>

        <?php include 'layouts/utility-scripts.php'; ?>

        <?php include 'layouts/realtime-db-scripts.php'; ?>

        <!-- Load New Places Library -->
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASrmdr17yeq798zEaqhh6YNgTniqi4Tuw&loading=async&libraries=places" async defer></script>
<!--<script type="module" src="https://unpkg.com/@googlemaps/extended-component-library"></script>-->

        <!-- list.js min js -->
        <script src="assets/libs/list.js/list.min.js"></script>
        <script src="assets/libs/list.pagination.js/list.pagination.min.js"></script>
        <script src="assets/libs/sweetalert2/sweetalert2.min.js"></script>

        <script src="assets/libs/moment/moment.js"></script>
        <script src="assets/js/pages/parcel_booking.init.js"></script>

        <!-- App js -->
        <script src="assets/js/app.js"></script>


    </body>

</html>