@extends('restaurant.layout.index')
 @section('title','Muftaax | Reviews')
 @section('custom-style')
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 <style>
     .w-20-block .choices {
         width: 20%;

     }

     @media (max-width: 576px) {
         .form-select {
             width: 100% !important;
         }
     }
 </style>
 @endsection
 @section('content')

 <!-- Start::app-content -->
 <div class="main-content app-content">
     <div class="container-fluid">

         <!-- Start::page-header -->

         <div class="d-flex align-items-center justify-content-between my-4 page-header-breadcrumb flex-wrap gap-2">
             <div>
                 <h1 class="page-title fw-medium fs-18 mb-2">Reviews</h1>
                 <div class="">
                     <nav>
                         <ol class="breadcrumb mb-0">
                             <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                             <li class="breadcrumb-item active" aria-current="page">Reviews</li>
                         </ol>
                     </nav>
                 </div>
             </div>
             <div class="btn-list">
                 {{-- <button class="btn btn-secondary-light btn-wave me-0 waves-effect waves-light"><i--}}
                 {{-- class="ri-upload-cloud-line align-middle"></i> Export Report--}}
                 {{-- </button>--}}
                 <button
                     class="btn btn-secondary-light btn-wave me-0 waves-effect waves-light"
                     onclick="window.location='{{ route('reviews.export') }}'">
                     <i class="ri-upload-cloud-line align-middle"></i> Export Report
                 </button>

             </div>
         </div>

         <!-- End::page-header -->

         {{-- <div class="row align-items-center mb-4">--}}
         {{-- <div class="col-lg-12">--}}
         {{-- <div class="card custom-card mb-0">--}}
         {{-- <div class="card-header justify-content-between">--}}
         {{-- <div class="card-title">--}}
         {{-- Apply Filters--}}
         {{-- </div>--}}
         {{-- </div>--}}

         {{-- <div class="card-body">--}}
         {{-- <div class="input-group companies-search-input w-20-block">--}}
         {{-- <select class="form-select rounded-0 " data-trigger name="choices-single-default" id="choices-single-default">--}}
         {{-- <option value="">Cities</option>--}}
         {{-- <option value="Choice 1">Dubai</option>--}}
         {{-- <option value="Choice 2">Abu dhabi</option>--}}
         {{-- </select>--}}
         {{-- <select class="form-select rounded-0 " data-trigger name="choices-single-default" id="choices-single-default">--}}
         {{-- <option value="">Ratings</option>--}}
         {{-- <option value="Choice 1">2-3 Stars</option>--}}
         {{-- <option value="Choice 2">3-4 Stars</option>--}}
         {{-- <option value="Choice 3">4-5 Stars</option>--}}

         {{-- </select>--}}
         {{-- <select class="form-select rounded-0 " data-trigger name="choices-single-default" id="choices-single-default">--}}
         {{-- <option value="">Reviews</option>--}}
         {{-- <option value="Choice 1">10-50</option>--}}
         {{-- <option value="Choice 2">50-100</option>--}}
         {{-- <option value="Choice 3">100-150</option>--}}
         {{-- <option value="Choice 4">150+</option>--}}

         {{-- </select>--}}
         {{-- <input type="date" class="form-control w-20" aria-label="Text input with segmented dropdown button" placeholder="Apply date">--}}

         {{-- <select class="form-select rounded-0 " data-trigger name="choices-single-default" id="statusReview">--}}
         {{-- <option value="">Status</option>--}}
         {{-- <option value="pending">Pending</option>--}}
         {{-- <option value="blocked">Blocked</option>--}}
         {{-- <option value="approved">Approved</option>--}}
         {{-- </select>--}}
         {{-- <button type="button" class="btn btn-primary"  id="filters"><i class="ri-search-line"></i></button>--}}
         {{-- </div>--}}
         {{-- </div>--}}
         {{-- </div>--}}

         {{-- </div>--}}
         {{-- </div>--}}


         <div class="row align-items-center mb-4">
             <div class="col-lg-12">
                 <div class="card custom-card mb-0">
                     <div class="card-header justify-content-between">
                         <div class="card-title">
                             Apply Filters
                         </div>
                     </div>

                     <div class="card-body">
                         <div class="input-group companies-search-input w-20-block">

                             <!-- Search -->
                             <input class="form-control" type="search" placeholder="Search"
                                 aria-label="Search" id="searchReview" name="search">

                             <!-- Rating Filter -->
                             <select class="form-select rounded-0 w-20" name="rating" id="ratingReview">
                                 <option value="">Ratings</option>
                                 <option value="1-2">1-2 Stars</option>
                                 <option value="2-3">2-3 Stars</option>
                                 <option value="3-4">3-4 Stars</option>
                                 <option value="4-5">4-5 Stars</option>
                             </select>
                             <!-- Date Filter -->
                             <div class=" w-20 mt-2 mt-md-0">
                                 <input type="date" class="form-control date-picker" id="dateReview" placeholder="mm/dd/yyyy" style="border-radius: 0rem!important;">
                             </div>

                             <!-- Status Filter -->
                             <select class="form-select rounded-0 w-20" name="status" id="statusReview">
                                 <option value="">Status</option>
                                 {{-- <option value="pending">Pending</option>--}}
                                 <option value="blocked">Blocked</option>
                                 <option value="approved">Approved</option>
                             </select>

                             <!-- Filter Button -->
                             <button type="button" class="btn btn-primary my-md-0 my-2" id="filters">
                                 <i class="ri-search-line"></i> Filter
                             </button>

                             <button type="button" class="btn btn-secondary my-md-0 my-2" id="resetFilters">
                                 <i class="ri-refresh-line"></i> Reset
                             </button>
                         </div>
                     </div>
                 </div>
             </div>
         </div>


         <!-- Start::row-1 -->
         <div class="row justify-content-center">
             <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                 <div class="card custom-card">
                     <div class="card-body">
                         <ul class="list-unstyled reviews-list">
                             <div id="reviewsData">
                                 @include('restaurant/includes/reviews_data')
                             </div>

                             {{-- <li>--}}
                             {{-- <div class="p-3 border rounded">--}}
                             {{-- <div class="d-sm-flex align-items-center mb-4">--}}
                             {{-- <span class="avatar avatar-md avatar-rounded me-3">--}}
                             {{-- <img src="{{asset('assets/images/faces/4.jpg')}}" alt="">--}}
                             {{-- </span>--}}
                             {{-- <div class="flex-fill">--}}
                             {{-- <p class="mb-0 fw-medium fs-14 text-primary">Sophia</p>--}}
                             {{-- <p class="mb-0 fs-10 fw-medium text-muted">Receptionist</p>--}}
                             {{-- </div>--}}
                             {{-- <div class="d-flex align-items-center">--}}
                             {{-- <span class="text-muted">Rating : </span>--}}
                             {{-- <span class="text-warning d-block ms-1">--}}
                             {{-- <i class="ri-star-fill"></i>--}}
                             {{-- <i class="ri-star-fill"></i>--}}
                             {{-- <i class="ri-star-fill"></i>--}}
                             {{-- <i class="ri-star-fill"></i>--}}
                             {{-- <i class="ri-star-half-fill"></i>--}}
                             {{-- </span>--}}
                             {{-- <span class="badge rounded-pill bg-success text-end ms-2">Approved</span>--}}
                             {{-- </div>--}}
                             {{-- </div>--}}
                             {{-- <div class="d-sm-flex align-items-end justify-content-between gap-5">--}}
                             {{-- <p class="text-muted mb-0">- Lorem ipsum dolor sit amet consectetur--}}
                             {{-- adipisicing elit. Earum autem quaerat distinctio Lorem ipsum dolor--}}
                             {{-- sit amet consectetur adipisicing elit. Tempora, facilis temporibus--}}
                             {{-- repellat laudantium dolor impedit alias sed, nobis esse saepe labore--}}
                             {{-- corporis aliquam natus beatae, numquam blanditiis in excepturi--}}
                             {{-- iste.similique impedit id ullam dolore ipsum mollitia sit.--}}
                             {{-- <span class="d-block fs-12 mt-2">--}}
                             {{-- <span--}}
                             {{-- class="d-block fs-13 mb-2 text-success">--}}
                             {{-- </span>12 days ago</span>--}}
                             {{-- </p>--}}

                             {{-- <div class="fs-12 fw-medium text-muted text-end w-25">--}}
                             {{-- <button id="alert-confirm"--}}
                             {{-- data-bs-toggle="tooltip"--}}
                             {{-- data-bs-custom-class="tooltip-primary"--}}
                             {{-- aria-label="Block"--}}
                             {{-- title="Block"--}}
                             {{-- data-modal-target="#updateStatus"--}}
                             {{-- class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn">--}}
                             {{-- <i--}}
                             {{-- class="ri-edit-line"></i></button>--}}
                             {{-- <button id="alert-confirm"--}}
                             {{-- data-bs-toggle="tooltip"--}}
                             {{-- data-bs-custom-class="tooltip-danger"--}}
                             {{-- aria-label="Delete"--}}
                             {{-- title="Delete"--}}
                             {{-- data-modal-target="#delete-modal"--}}
                             {{-- class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">--}}
                             {{-- <i--}}
                             {{-- class="ri-delete-bin-5-line"></i>--}}
                             {{-- </button>--}}
                             {{-- </div>--}}
                             {{-- </div>--}}
                             {{-- </div>--}}
                             {{-- </li>--}}

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

                 <div class="d-flex justify-content-between align-items-center mt-4 mb-5">
                     <div>
                         <p id="resultCount" class="mb-0">
                             Showing {{ $reviews->firstItem() }} to {{ $reviews->lastItem() }} of {{ $reviews->total() }} results
                         </p>
                     </div>
                     <div>

                         {{ $reviews->appends(request()->query())->links() }}

                     </div>
                 </div>


             </div>
         </div>
         <!--End::row-1 -->


     </div>
 </div>
 <!-- End::app-content -->

 {{-- <div class="modal fade" id="updateStatus" tabindex="-1" aria-hidden="true">--}}
 {{-- <div class="modal-dialog modal-dialog-centered" style="display: grid;">--}}
 {{-- <div class="card bg-white border-0 rounded">--}}
 {{-- <div class="alert custom-alert1 alert-primary">--}}
 {{-- <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"><i--}}
 {{-- class="bi bi-x"></i></button>--}}
 {{-- <div class="text-center px-5 pb-0 svg-primary">--}}
 {{-- <svg class="custom-alert-icon" xmlns="http://www.w3.org/2000/svg" height="1.5rem"--}}
 {{-- viewBox="0 0 24 24" width="1.5rem" fill="#000000">--}}
 {{-- <path d="M0 0h24v24H0z" fill="none"></path>--}}
 {{-- <path--}}
 {{-- d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>--}}
 {{-- </svg>--}}
 {{-- <h5>Are You Sure?</h5>--}}
 {{-- <p class="">You want to block this review?</p>--}}
 {{-- <form method="POST" id="blockedForm" class="form-submit">--}}
 {{-- @csrf--}}
 {{-- <div class="">--}}
 {{-- <input type="hidden" name="id" id="blockId" value="">--}}
 {{-- <button--}}
 {{-- class="btn btn-sm btn-primary m-1"--}}
 {{-- type="submit">--}}
 {{-- Yes, Block it!--}}
 {{-- </button>--}}
 {{-- <button class="btn btn-sm btn-primary m-1">Yes, Block it!</button>--}}
 {{-- <button class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">Cancel--}}
 {{-- </button>--}}
 {{-- </div>--}}
 {{-- </form>--}}
 {{-- </div>--}}
 {{-- </div>--}}
 {{-- </div>--}}
 {{-- </div>--}}
 {{-- </div>--}}


 <div class="modal fade" id="updateStatus" aria-labelledby="updateStatus" tabindex="-1" aria-hidden="true" style="display: none;">
     <div class="modal-dialog modal-dialog-centered" style="display: grid;">
         <div class="card bg-white border-0 rounded">
             <div class="alert custom-alert1 alert-primary">
                 <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"><i
                         class="bi bi-x"></i></button>
                 <div class="text-center px-5 pb-0 svg-primary">
                     <svg class="custom-alert-icon" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
                         viewBox="0 0 24 24" width="1.5rem" fill="#000000">
                         <path d="M0 0h24v24H0z" fill="none"></path>
                         <path
                             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
                     </svg>
                     <div class="modal-content" style="border: none">
                         <h4>Are You Sure?</h4>
                         <p class="text-muted fs-15 mb-4">You won't be able to revert this!</p>
                         <form method="POST" id="blockedForm" class="form-submit">
                             @csrf

                             <input type="hidden" name="id" id="blockId" value="">
                             <button
                                 class="btn btn-sm btn-primary m-1"
                                 type="submit">
                                 Yes, Block it!
                             </button>
                             {{-- <button class="btn btn-sm btn-primary m-1">Yes, Block it!</button>--}}
                             <button class="btn btn-sm btn-outline-danger m-1" type="button" data-bs-dismiss="modal" id="cancelButton">
                                 Cancel
                             </button>

                         </form>


                         {{-- </div>--}}
                         {{-- </div>--}}
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>

 {{-- <div class="modal fade flip" id="deleteCamp" tabindex="-1" aria-hidden="true">--}}
 {{-- <div class="modal-dialog modal-dialog-centered">--}}
 {{-- <div class="modal-content">--}}
 {{-- <div class="modal-body p-5 text-center">--}}
 {{-- <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"--}}
 {{-- colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">--}}
 {{-- </lord-icon>--}}
 {{-- <div class="mt-4 text-center">--}}
 {{-- <h4>Are You Sure?</h4>--}}
 {{-- <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>--}}
 {{-- <form method="POST" id="deleteCampForm" class="form-submit">--}}
 {{-- @csrf--}}
 {{-- {{ method_field('DELETE') }}--}}

 {{-- <button class="btn btn-sm btn-outline-danger m-1" type="button" data-bs-dismiss="modal" id="cancelButton">--}}
 {{-- Cancel--}}
 {{-- </button>--}}
 {{-- <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Delete It</button>--}}
 {{-- </form>--}}
 {{-- </div>--}}
 {{-- </div>--}}
 {{-- </div>--}}
 {{-- </div>--}}
 {{-- </div>--}}
 <div class="modal fade flip" id="deleteCamp" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-body p-5 text-center">
                 <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                     colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
                 </lord-icon>
                 <div class="mt-4 text-center">
                     <h4>Are You Sure?</h4>
                     <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>
                     <form method="POST" id="deleteCampForm" class="form-submit">
                         @csrf
                         {{ method_field('DELETE') }}
                         <button type="button" class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">
                             Cancel
                         </button>
                         <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Delete It</button>
                     </form>
                 </div>
             </div>
         </div>
     </div>
 </div>

 @endsection
 @section('custom-script')
 {{-- <script>--}}
 {{-- // Initialize tooltips--}}
 {{-- var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));--}}
 {{-- var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {--}}
 {{-- return new bootstrap.Tooltip(tooltipTriggerEl);--}}
 {{-- });--}}

 {{-- // Event delegation for modal triggers--}}
 {{-- document.addEventListener('click', function (event) {--}}
 {{-- var target = event.target.closest('[data-modal-target]');--}}
 {{-- if (target) {--}}
 {{-- var modalId = target.getAttribute('data-modal-target');--}}
 {{-- var modal = new bootstrap.Modal(document.querySelector(modalId));--}}
 {{-- modal.show();--}}
 {{-- }--}}
 {{-- });--}}
 {{-- </script>--}}

 {{--Ajax blocked--}}
 <script>
     $(document).ready(function() {
         $("#updateStatus").on('show.bs.modal', function(event) {
             var triggerLink = $(event.relatedTarget); // Get the button that triggered the modal
             var url = triggerLink.data("url"); // Get the URL from data-url attribute
             $("#blockedForm").attr('action', url); // Set the action attribute of the form
         });
         var submitButton = $("#blockedForm button[type='submit']");
         submitButton.prop('disabled', false).text('Yes, Block it!'); // Reset to original state

         // Handle form submission
         $("#blockedForm").on('submit', function(event) {
             event.preventDefault(); // Prevent default form submission
             var actionUrl = $(this).attr('action');
             var submitButton = $("#blockedForm button[type='submit']");
             submitButton.prop('disabled', true).text('Yes, Block it!'); // Reset to original state

             // Add AJAX call or form submission logic here

             $.ajax({
                 type: 'POST',
                 url: actionUrl, // Use the action URL which includes the record ID
                 data: $(this).serialize(), // Serialize the form data
                 success: function(data) {
                     if (data.success) {
                         // Hide the modal
                         $('#updateStatus').modal('hide');
                         $('#reviewsData').html(data.reviews_html);

                         // Trigger the success toast notification
                         Toast.fire({
                             icon: 'success',
                             title: data.message
                         });

                         setTimeout(function() {
                             location.reload();
                         });
                     }
                 },
                 error: function(data) {
                     // Handle errors here if needed
                     Toast.fire({
                         icon: 'error',
                         title: 'Failed to delete the record!'
                     });

                     submitButton.prop('disabled', false).text('Yes, Block it!');

                 }
             });
         });
     });
 </script>

 {{--Ajax Delete--}}
 <script>
     $(document).ready(function() {
         $("#deleteCamp").on('show.bs.modal', function(event) {
             var triggerLink = $(event.relatedTarget);
             var url = triggerLink.data("url");
             $("#deleteCampForm").attr('action', url);
         });

         // Reset the button state
         var submitButton = $("#deleteCampForm button[type='submit']");
         submitButton.prop('disabled', false).text('Yes, Delete It'); // Reset to original state

         // Handle form submission for deletion
         $("#deleteCampForm").on('submit', function(event) {
             event.preventDefault(); // Prevent the default form submission

             // Get the action URL from the form, which contains the record ID
             var actionUrl = $(this).attr('action');
             var submitButton = $("#deleteCampForm button[type='submit']");
             submitButton.prop('disabled', true).text('Processing...'); // Disable the button and change text
             $.ajax({
                 type: 'DELETE',
                 url: actionUrl, // Use the action URL which includes the record ID
                 data: $(this).serialize(), // Serialize the form data
                 success: function(data) {
                     if (data.success) {
                         // Hide the modal
                         $('#deleteCamp').modal('hide');
                         $('#reviewsData').html(data.reviews_html);

                         // Trigger the success toast notification
                         Toast.fire({
                             icon: 'success',
                             title: data.message
                         });

                         setTimeout(function() {
                             location.reload();
                         });
                     }
                 },
                 error: function(data) {
                     // Handle errors here if needed
                     Toast.fire({
                         icon: 'error',
                         title: 'Failed to delete the record!'
                     });

                     // Re-enable the button and reset its text
                     submitButton.prop('disabled', false).text('Yes, Delete It'); // Reset button state
                 }
             });
         });
     });
 </script>

 <script>
     // Event listener for pagination links
     $(document).on('click', '.pagination a', function(e) {
         e.preventDefault();
         let url = new URL($(this).attr('href'));

         // Get the current filters from the URL or form inputs
         const selectedStatus = document.getElementById('statusReview') ? document.getElementById('statusReview').value : '';
         const selectedRating = document.getElementById('ratingReview') ? document.getElementById('ratingReview').value : '';
         const selectedSearch = document.getElementById('searchReview') ? document.getElementById('searchReview').value : '';
         const selectedDate = document.getElementById('dateReview') ? document.getElementById('dateReview').value : '';

         // Append filters to the URL
         if (selectedStatus) {
             url.searchParams.set('status', selectedStatus);
         }
         if (selectedRating) {
             url.searchParams.set('rating', selectedRating);
         }
         if (selectedSearch) {
             url.searchParams.set('search', selectedSearch);
         }
         // if (selectedReviews) {
         //     url.searchParams.set('reviews', selectedReviews);
         // }
         if (selectedDate) {
             url.searchParams.set('date', selectedDate);
         }

         // Update the browser's URL without reloading the page
         history.pushState(null, '', url.toString());

         // Make an AJAX request to fetch the data with current filters and pagination
         $.ajax({
             url: url.toString(), // Use the updated URL with the filters and pagination
             type: 'GET',
             success: function(data) {
                 // Update reviews data
                 $('#reviewsData').html(data.reviewsData);

                 // Update pagination links
                 $('.pagination').html(data.pagination);

                 // Update the count of results shown
                 $('#resultCount').html(`Showing ${data.firstItem} to ${data.lastItem} of ${data.total} results`);
             },
             error: function(xhr, status, error) {
                 console.error('Error fetching reviews:', error);
             }
         });
     });

     // Event listener for the "Filter" button
     document.getElementById('filters').addEventListener('click', function() {
         const selectedStatus = document.getElementById('statusReview').value;
         const selectedRating = document.getElementById('ratingReview').value;
         const selectedSearch = document.getElementById('searchReview').value;
         // const selectedReviews = document.getElementById('reviewsReview').value;
         const selectedDate = document.getElementById('dateReview').value;

         // Base URL with the route to fetch reviews
         let url = "{{ route('reviews.index') }}?";

         // Add selected filter parameters to the URL
         if (selectedStatus) {
             url += `status=${encodeURIComponent(selectedStatus)}&`;
         }
         if (selectedRating) {
             url += `rating=${encodeURIComponent(selectedRating)}&`;
         }
         if (selectedSearch) {
             url += `search=${encodeURIComponent(selectedSearch)}&`;
         }
         if (selectedDate) {
             url += `date=${encodeURIComponent(selectedDate)}&`;
         }

         // Remove the trailing '&' if it exists
         url = url.endsWith('&') ? url.slice(0, -1) : url;

         // Update the browser's URL without reloading the page
         history.pushState(null, '', url);

         // Make an AJAX request to fetch the data with the selected filters
         $.ajax({
             url: url,
             type: 'GET',
             success: function(data) {
                 // Update reviews data
                 $('#reviewsData').html(data.reviewsData);

                 // Update pagination links
                 $('.pagination').html(data.pagination);

                 // Update the count of results shown
                 $('#resultCount').html(`Showing ${data.firstItem} to ${data.lastItem} of ${data.total} results`);
             },
             error: function(xhr, status, error) {
                 console.error('Error fetching reviews:', error);
             }
         });
     });
 </script>
 <script>
     // Event listener for the "Reset Filters" button
     document.getElementById('resetFilters').addEventListener('click', function() {
         // Reset filter values
         document.getElementById('statusReview').value = '';
         document.getElementById('ratingReview').value = '';
         document.getElementById('searchReview').value = '';
         // document.getElementById('reviewsReview').value = '';
         document.getElementById('dateReview').value = '';
         document.getElementById('dateReview').placeholder = 'mm/dd/yyyy';

         // Create the URL without filters
         let url = "{{ route('reviews.index') }}";

         // Update the browser's URL without reloading the page
         history.pushState(null, '', url);

         // Make an AJAX request to fetch the data without any filters
         $.ajax({
             url: url,
             type: 'GET',
             success: function(data) {
                 // Update reviews data
                 $('#reviewsData').html(data.reviewsData);

                 // Update pagination links
                 $('.pagination').html(data.pagination);

                 // Update the count of results shown
                 $('#resultCount').html(`Showing ${data.firstItem} to ${data.lastItem} of ${data.total} results`);
             },
             error: function(xhr, status, error) {
                 console.error('Error fetching reviews:', error);
             }
         });
     });
 </script>


 {{--<script>--}}
 {{-- document.getElementById('cancelButton').addEventListener('click', function (event) {--}}
 {{-- event.preventDefault(); // Prevent form submission--}}

 {{-- // Get the modal instance and hide it--}}
 {{-- const modalElement = document.getElementById('deleteCamp');--}}
 {{-- const modalInstance = bootstrap.Modal.getInstance(modalElement) || new bootstrap.Modal(modalElement);--}}
 {{-- modalInstance.hide();--}}
 {{-- });--}}

 {{--</script>--}}
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 <script>
     $(document).ready(function() {
         $(".date-picker").flatpickr({
             mode: "range", // Enables range selection
             dateFormat: "Y-m-d", // Adjust format as needed
             allowInput: true, // Allows manual typing
             onOpen: function() {
                 this.input.placeholder = "";
             },
             onClose: function() {
                 if (!this.input.value) {
                     this.input.placeholder = "Apply Date";
                 }
             }
         });
     });
 </script>


 @endsection