@extends('user.layouts.app')

 @section('title', 'ArkAnu - Get A Quote')

 @section('content')
     <link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
     <link rel="stylesheet" href="{{ asset('assets/css/bookingpopup.css') }}">
     <div class="container-fluid">
         <div class="ark__h1--wrap">
             <div class="page-title">
                 <h1>My Freight Quotes</h1>
                 <p>View the status and details for all your requested quotes</p>
             </div>
             <button class="ark__create--quote-btn" id="openDrawerBtn">
                 <img src="{{ asset('assets/images/plus.svg') }}" alt="img">
                 <p>Create Quote</p>
             </button>

             <!-- Include the Quote Wizard Component -->
             @include('components.quote-wizard', [
                 'locationTypes' => $locationTypes,
                 'countries' => $countries,
                 'states' => $states,
                 'unitTypes' => $unitTypes,
                 'freightClasses' => $freightClasses,
             ])
         </div>

         @if ($quotes->count() > 0)
             <div class="common-table card">
                 <div class="card-body p-0">
                     <div class="table-responsive">
                         <div class="table-head-wp">
                             <div class="table-search">
                                 <span>
                                     <svg width="23" height="23" viewBox="0 0 23 23" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                         <path
                                             d="M21.0713 21.0713L15.8989 15.8989M1.07129 9.69198C1.07129 4.9309 4.9309 1.07129 9.69198 1.07129C14.4531 1.07129 18.3127 4.9309 18.3127 9.69198C18.3127 14.4531 14.4531 18.3127 9.69198 18.3127C4.9309 18.3127 1.07129 14.4531 1.07129 9.69198Z"
                                             stroke="#545454" stroke-width="2.14286" stroke-linecap="round"
                                             stroke-linejoin="round" />
                                     </svg>
                                 </span>
                                 <input type="text" id="customSearchBox" placeholder="Search...">
                                 <button type="button" class="search-clear-btn"
                                     style="display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px;">
                                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                         <path d="M15 5L5 15M5 5L15 15" stroke="#545454" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round" />
                                     </svg>
                                 </button>
                             </div>
                             <div class="table-btns d-flex align-items-center" id="statusFilters">
                                 <button type="button" class="btn all-btn active-btn">
                                     All
                                 </button>
                                 <button type="button" class="btn pending-btn">
                                     Pending
                                 </button>
                                 <button type="button" class="btn cancel-btn">
                                     Rejected
                                 </button>
                                 <button type="button" class="btn approve-btn">
                                     Approved
                                 </button>
                                 <button type="button" class="btn confirm-btn">
                                     Confirmed
                                 </button>
                             </div>
                         </div>
                         <table id="quotesTable" class="table mb-0" style="width:100%">
                             <thead class="table-light">
                                 <tr>
                                     <th>Quote ID</th>
                                     <th>Date</th>
                                     <th>Origin</th>
                                     <th>Destination</th>
                                     <th>Available Rates</th>
                                     {{-- <th>Best Rate</th> --}}
                                     <th>Status</th>
                                     <th>Action</th>
                                     <th>Tracking</th>
                                 </tr>
                             </thead>
                         </table>
                         <div class="page-num-wp d-flex justify-content-between align-items-center flex-wrap">
                             <span class="page-number-show">
                                 Showing {{ $quotes->firstItem() ?? 0 }}-{{ $quotes->lastItem() ?? 0 }} from
                                 {{ $quotes->total() }}
                             </span>
                             <nav aria-label="Quotes pagination"
                                 class="custom-page-wp d-flex align-items-center justify-content-end">
                                 <ul class="custom-pagination pagination mb-0">
                                     {{-- Previous Button --}}
                                     <span>
                                         <li class="page-item {{ $quotes->onFirstPage() ? 'disabled' : '' }}">
                                             @if ($quotes->onFirstPage())
                                                 <span class="previous-page-link page-link"
                                                     style="pointer-events:none;opacity:0.5;">
                                                 @else
                                                     <a class="previous-page-link page-link"
                                                         href="{{ $quotes->previousPageUrl() }}">
                                             @endif
                                             <span>
                                                 <svg width="17" height="14" viewBox="0 0 17 14" fill="none"
                                                     xmlns="http://www.w3.org/2000/svg">
                                                     <path
                                                         d="M7.33279 0.625L0.625 6.625M0.625 6.625L7.33279 12.625M0.625 6.625H15.625"
                                                         stroke="#C04657" stroke-width="1.25" stroke-linecap="round"
                                                         stroke-linejoin="round" />
                                                 </svg>
                                             </span>
                                             Previous
                                             @if ($quotes->onFirstPage())
                                     </span>
                                 @else
                                     </a>
         @endif
         </li>
         </span>

         {{-- Page Numbers --}}
         <span class="d-flex align-items-center justify-content-center">
             @php
                 $currentPage = $quotes->currentPage();
                 $lastPage = $quotes->lastPage();
                 $startPage = max(1, $currentPage - 2);
                 $endPage = min($lastPage, $currentPage + 2);
             @endphp

             @if ($startPage > 1)
                 <li class="page-item">
                     <a class="custom-page-link page-link" href="{{ $quotes->url(1) }}">1</a>
                 </li>
                 @if ($startPage > 2)
                     <li class="page-item disabled">
                         <span class="page-link bg-none">...</span>
                     </li>
                 @endif
             @endif

             @for ($i = $startPage; $i <= $endPage; $i++)
                 <li class="page-item">
                     @if ($i == $currentPage)
                         <span class="custom-page-link page-link active-link">{{ $i }}</span>
                     @else
                         <a class="custom-page-link page-link" href="{{ $quotes->url($i) }}">{{ $i }}</a>
                     @endif
                 </li>
             @endfor

             @if ($endPage < $lastPage)
                 @if ($endPage < $lastPage - 1)
                     <li class="page-item disabled">
                         <span class="page-link bg-none">...</span>
                     </li>
                 @endif
                 <li class="page-item">
                     <a class="custom-page-link page-link" href="{{ $quotes->url($lastPage) }}">{{ $lastPage }}</a>
                 </li>
             @endif
         </span>

         {{-- Next Button --}}
         <span>
             <li class="page-item {{ !$quotes->hasMorePages() ? 'disabled' : '' }}">
                 @if (!$quotes->hasMorePages())
                     <span class="next-page-link page-link" style="pointer-events:none;opacity:0.5;">
                     @else
                         <a class="next-page-link page-link" href="{{ $quotes->nextPageUrl() }}">
                 @endif
                 Next
                 <span>
                     <svg width="17" height="14" viewBox="0 0 17 14" fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                         <path d="M8.91721 0.625L15.625 6.625M15.625 6.625L8.91721 12.625M15.625 6.625H0.625"
                             stroke="#C04657" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                     </svg>
                 </span>
                 @if (!$quotes->hasMorePages())
         </span>
     @else
         </a>
         @endif
         </li>
         </span>
         </ul>
         </nav>
     </div>
     </div>
     </div>
     </div>
 @else
     <div class="empty-state text-center py-5">
         <h3>No quotes yet</h3>
         <p>Create your first freight quote to get started.</p>
     </div>
     @endif
     </div>

     <!-- Success Popup -->
     <div class="ark__popup-overlay" id="successPopup" style="display: none;">
         <div class="ark__popup">
             <div class="ark__popup-close" id="closePopup">
                 <img src="{{ asset('assets/images/close-gray.svg') }}" alt="img">
             </div>
             <h2>Quote Request Submitted Successfully!</h2>
             <div class="ark__popup-icon-20">
                 <div class="ark__popup-icon-30">
                     <div class="ark__popup-icon">
                         <img src="{{ asset('assets/images/QuoteRequest.svg') }}" alt="Success" />
                     </div>
                 </div>
             </div>
             <p id="popupMessage">Your Quote details have been submitted for review. Our team will verify the information
                 and
                 update the status shortly.</p>
             <div class="spinner-border text-primary" id="popupSpinner" role="status"></div>
         </div>
     </div>

     <!-- Overlay -->
     <div class="drawer-overlay" id="drawerOverlay" style="display: none;"></div>

     <!-- Carrier Rates Modal -->
     <div class="common-modal modal" id="ratesModal" tabindex="-1">
         <div class="modal-backdrop" id="ratesModalBackdrop"></div>
         <div class="modal-dialog modal-lg modal-dialog-scrollable">
             <div class="modal-content border-0 shadow-lg rounded-4">
                 <div class="modal-header text-black">
                     <h5 class="modal-title fw-semibold">Select Carrier Service</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body p-4">
                     <form name="carrierForm" action="#" id="carrierForm">
                         @csrf
                         <input type="hidden" name="selected_carrier_index" id="selectedCarrierIndex">

                         <!-- Markup Information Banner -->
                         {{-- <div class="alert alert-info mb-4">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-info-circle me-2 fs-5"></i>
                                <div>
                                    <strong>Pricing Details:</strong> All rates include a
                                    <span id="dynamicMarkupPercent">0</span>% service fee
                                </div>
                            </div>
                        </div> --}}

                         <div class="row g-3" id="carrierCards">
                             <!-- Cards injected here -->
                         </div>

                         <div class="text-center d-flex justify-content-center mt-4">
                             <button type="submit" class="btn blue-btn" id="actionButton">
                                 <span id="buttonText">Request Booking</span>
                             </button>

                         </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>
     <!-- Order Tracking Modal Component -->
     @include('user.quotes.order-tracking-modal')
 @endsection

 @push('scripts')
     <script>
         let selectedIndex = null;
         let carriers = [];
         let encryptedId = '';
         let markupPercent = 0;
         const csrfToken = '{{ csrf_token() }}';

         function openRatesModal(btn) {
             encryptedId = btn.dataset.quoteId;

             markupPercent = parseFloat(btn.dataset.markup) || 0;

             // document.getElementById('dynamicMarkupPercent').textContent = markupPercent.toFixed(2);
             try {
                 carriers = JSON.parse(btn.dataset.carriers);
             } catch (e) {
                 Swal.fire('Error', 'Invalid carrier data', 'error');
                 return;
             }

             const container = document.getElementById('carrierCards');
             container.innerHTML = '';

             if (carriers.length === 0) {
                 container.innerHTML = '<div class="col-12 text-center py-5 text-muted">No rates available</div>';
                 new bootstrap.Modal(document.getElementById('ratesModal')).show();
                 return;
             }

             // Sort carriers by price (cheapest first)
             carriers.sort((a, b) => (a.customerRate || 0) - (b.customerRate || 0));

             carriers.forEach((carrier, index) => {
                 const baseRate = parseFloat(carrier.customerRate || 0);
                 const markupAmount = baseRate * (markupPercent / 100);
                 const total = baseRate + markupAmount;

                 const deliveryDate = carrier.transitDays ?
                     new Date(Date.now() + carrier.transitDays * 86400000).toLocaleDateString('en-US', {
                         weekday: 'short',
                         year: 'numeric',
                         month: 'short',
                         day: 'numeric'
                     }) :
                     'N/A';

                 const card = document.createElement('div');
                 card.className = 'col-md-6';
                 card.innerHTML = `
            <div class="carrier-card h-100 ${index === 0 ? 'active-card' : ''}"
                 data-index="${index}" onclick="selectCarrier(this)">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="carrier"
                           value="${index}" ${index === 0 ? 'checked' : ''}>
                    <label class="form-check-label fw-semibold">
                        ${carrier.carrier || 'Unknown Carrier'}
                    </label>
                </div>

                <div class="carrier-badges mb-2">
                    <span class="badge red">${carrier.serviceLevelDescription || carrier.serviceLevel || 'Standard'}</span>
                    ${carrier.isPreferred ? '<span class="badge blue ms-2">Preferred</span>' : ''}
                    ${carrier.isCarrierOfTheYear ? '<span class="badge green ms-2">Carrier of the Year</span>' : ''}
                </div>

                <div class="carrier-details mb-3">
                    <small class="text-muted">
                        <i class="fas fa-truck me-1"></i>
                        Est. delivery: <strong>${deliveryDate}</strong>
                        ${carrier.transitDays ? `(${carrier.transitDays} days)` : ''}
                    </small>
                </div>

                <div class="price-breakdown">
                    <!--<div class="d-flex justify-content-between align-items-center mb-1">
                        <small class="text-muted">Base Rate:</small>
                        <small class="text-muted">$${baseRate.toFixed(2)}</small>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small class="text-muted">Service Fee (${markupPercent}%):</small>
                        <small class="text-muted">+ $${markupAmount.toFixed(2)}</small>
                    </div>
                    <hr class="my-2">-->
                    <div class="d-flex justify-content-between align-items-center">
                        <strong>Amount:</strong>
                        <strong class="fs-5">$${total.toFixed(2)}</strong>
                    </div>
                </div>
            </div>`;
                 container.appendChild(card);
             });

             selectedIndex = 0;
             document.getElementById('selectedCarrierIndex').value = 0;
             updateActionButton();

             new bootstrap.Modal(document.getElementById('ratesModal')).show();
         }

         function selectCarrier(element) {
             // Remove selection from all cards
             document.querySelectorAll('.carrier-card').forEach(card => {
                 card.classList.remove('active-card');
             });

             // Add selection to clicked card
             element.classList.add('active-card');

             // Update selected index
             selectedIndex = parseInt(element.dataset.index);
             document.getElementById('selectedCarrierIndex').value = selectedIndex;
             element.querySelector('input[type="radio"]').checked = true;

             updateActionButton();
         }

         function updateActionButton() {
             const actionButton = document.getElementById('actionButton');
             const buttonText = document.getElementById('buttonText');

             if (selectedIndex === null) {
                 actionButton.disabled = true;
                 buttonText.textContent = 'Please select a service';
                 return;
             }

             const baseRate = parseFloat(carriers[selectedIndex].customerRate || 0);
             const markupAmount = baseRate * (markupPercent / 100);
             const total = baseRate + markupAmount;

             actionButton.disabled = false;
             buttonText.innerHTML = `Request Booking - $${total.toFixed(2)}`;
         }

         // Handle booking request submission
         $('#carrierForm').on('submit', function(e) {
             e.preventDefault();
             // console.log('Submitting booking request...');

             if (selectedIndex === null) {
                 Swal.fire('Warning', 'Please select a carrier service', 'warning');
                 return;
             }

             // Set hidden input value
             $('#selectedCarrierIndex').val(selectedIndex);

             let actionButton = $('#actionButton');
             let buttonText = $('#buttonText');
             let originalText = buttonText.html();

             // Disable button + show spinner
             actionButton.prop('disabled', true);
             buttonText.html('<span class="spinner-border spinner-border-sm me-2"></span>Processing...');

             var baseUrl = "{{ url('/') }}";
             $.ajax({
                 url: baseUrl + `/quotes/request-booking/${encryptedId}`,
                 method: 'POST',
                 data: {
                     selected_carrier_index: selectedIndex,
                     _token: csrfToken
                 },
                 success: function(data) {
                     if (data.success) {
                         // Close modal
                         let modal = bootstrap.Modal.getInstance(document.getElementById('ratesModal'));
                         modal.hide();

                         // Success message
                         Swal.fire({
                             icon: 'success',
                             title: 'Success!',
                             text: data.message,
                             confirmButtonText: 'View Bookings',
                             showCancelButton: true,
                             cancelButtonText: 'Stay Here'
                         }).then((result) => {
                             if (result.isConfirmed) {
                                 window.location.href = data.redirect;
                             }
                         });

                     } else {
                         Swal.fire('Error', data.message || 'Failed to submit booking request', 'error');
                     }
                 },
                 error: function(xhr) {
                     let errorMsg = 'Network error. Please try again.';

                     if (xhr.responseJSON && xhr.responseJSON.message) {
                         errorMsg = xhr.responseJSON.message;
                     }

                     Swal.fire('Error', errorMsg, 'error');
                 },
                 complete: function() {
                     // Restore button
                     actionButton.prop('disabled', false);
                     buttonText.html(originalText);
                 }
             });
         });

         // Handle outside click to close rates modal
         $(document).ready(function() {
             const ratesModal = document.getElementById('ratesModal');
             const ratesModalBackdrop = document.getElementById('ratesModalBackdrop');
             const ratesModalDialog = ratesModal ? ratesModal.querySelector('.modal-dialog') : null;

             if (ratesModal && ratesModalDialog) {
                 // Show backdrop when modal is shown
                 ratesModal.addEventListener('show.bs.modal', function() {
                     ratesModal.classList.add('show');
                     if (ratesModalBackdrop) {
                         ratesModalBackdrop.style.display = 'block';
                     }
                 });

                 // Hide backdrop when modal is hidden
                 ratesModal.addEventListener('hidden.bs.modal', function() {
                     ratesModal.classList.remove('show');
                     if (ratesModalBackdrop) {
                         ratesModalBackdrop.style.display = 'none';
                     }
                 });

                 // Function to close the modal
                 function closeRatesModal() {
                     const bsModal = bootstrap.Modal.getInstance(ratesModal);
                     if (bsModal) {
                         bsModal.hide();
                     } else {
                         ratesModal.classList.remove('show');
                         if (ratesModalBackdrop) {
                             ratesModalBackdrop.style.display = 'none';
                         }
                     }
                 }

                 // Close modal when clicking on backdrop
                 if (ratesModalBackdrop) {
                     ratesModalBackdrop.addEventListener('click', function(e) {
                         e.stopPropagation();
                         closeRatesModal();
                     });
                 }

                 // Close modal when clicking on the modal container (but outside the dialog)
                 ratesModal.addEventListener('click', function(event) {
                     // Close if clicking on the modal container itself or outside the dialog
                     if (event.target === ratesModal || (ratesModal.contains(event.target) && !
                             ratesModalDialog.contains(event.target))) {
                         closeRatesModal();
                     }
                 });

                 // Prevent clicks inside modal dialog from closing it
                 if (ratesModalDialog) {
                     ratesModalDialog.addEventListener('click', function(event) {
                         event.stopPropagation();
                     });
                 }
             }

             // Handle outside click to close tracking modal
             const orderTrackingModal = document.getElementById('orderTrackingModal');
             const orderTrackingModalBackdrop = document.getElementById('orderTrackingModalBackdrop');
             const orderTrackingModalDialog = orderTrackingModal ? orderTrackingModal.querySelector(
                 '.modal-dialog') : null;

             if (orderTrackingModal && orderTrackingModalDialog) {
                 // Show backdrop when modal is shown
                 orderTrackingModal.addEventListener('show.bs.modal', function() {
                     orderTrackingModal.classList.add('show');
                     if (orderTrackingModalBackdrop) {
                         orderTrackingModalBackdrop.style.display = 'block';
                     }
                 });

                 // Hide backdrop when modal is hidden
                 orderTrackingModal.addEventListener('hidden.bs.modal', function() {
                     orderTrackingModal.classList.remove('show');
                     if (orderTrackingModalBackdrop) {
                         orderTrackingModalBackdrop.style.display = 'none';
                     }
                 });

                 // Function to close the modal
                 function closeOrderTrackingModal() {
                     const bsModal = bootstrap.Modal.getInstance(orderTrackingModal);
                     if (bsModal) {
                         bsModal.hide();
                     } else {
                         orderTrackingModal.classList.remove('show');
                         if (orderTrackingModalBackdrop) {
                             orderTrackingModalBackdrop.style.display = 'none';
                         }
                     }
                 }

                 // Close modal when clicking on backdrop
                 if (orderTrackingModalBackdrop) {
                     orderTrackingModalBackdrop.addEventListener('click', function(e) {
                         e.stopPropagation();
                         closeOrderTrackingModal();
                     });
                 }

                 // Close modal when clicking on the modal container (but outside the dialog)
                 orderTrackingModal.addEventListener('click', function(event) {
                     // Close if clicking on the modal container itself or outside the dialog
                     if (event.target === orderTrackingModal || (orderTrackingModal.contains(event.target) &&
                             !orderTrackingModalDialog.contains(event.target))) {
                         closeOrderTrackingModal();
                     }
                 });

                 // Prevent clicks inside modal dialog from closing it
                 if (orderTrackingModalDialog) {
                     orderTrackingModalDialog.addEventListener('click', function(event) {
                         event.stopPropagation();
                     });
                 }
             }
         });

         // Initialize main table
         $(document).ready(function() {
             var table = $('#quotesTable').DataTable({
                 data: @json($quoteTableData),
                 pageLength: 10,
                 responsive: true,
                 order: [
                     [10, 'desc']
                 ],
                 paging: false,
                 info: false,
                 dom: 'rt',
                 columns: [{
                         data: 'id',
                         render: data => `<strong>#${data}</strong>`
                     },
                     {
                         data: 'created_at'
                     },
                     {
                         data: 'origin'
                     },
                     {
                         data: 'destination'
                     },
                     {
                         data: 'carrier_count',
                         render: count =>
                             `<span class="badge green">${count} option${count !== 1 ? 's' : ''}</span>`
                     },
                     {
                         data: 'status',
                         render: status => status === 'Ready' ?
                             '<span class="badge green">Ready</span>' :
                             '<span class="badge red">Failed</span>'
                     },
                     //  {
                     //      data: null,
                     //      orderable: false,
                     //      render: function(row) {
                     //          if (row.has_rates) {
                     //              return `<button class="btn blue-btn"
                //                data-quote-id="${row.encrypted_id}"
                //                data-carriers="${row.carriers_json}"
                //                data-markup="${row.admin_markup}"
                //                onclick="openRatesModal(this)">
                //        <i class="fas fa-eye me-1"></i>View Rates
                //    </button>`;
                     //          }
                     //          return '<span class="text-muted">No rates</span>';
                     //      }
                     //  },
                     {
                         data: null,
                         orderable: false,
                         render: function(row) {
                             // booking_status: null, 'pending', 'approved', 'confirmed', 'rejected'
                             const bookingStatus = (row.booking_status || '').toLowerCase();

                             if (!row.has_rates) {
                                 return '<span class="text-muted">No rates</span>';
                             }

                             if (bookingStatus === 'approved' || bookingStatus === 'confirmed') {
                                 return `<button class="btn btn-success btn-sm" disabled>
                        <i class="fas fa-check-circle me-1"></i>Booked
                    </button>`;
                             }

                             if (bookingStatus === 'pending') {
                                 return `<button class="btn btn-warning btn-sm" disabled>
                        <i class="fas fa-clock me-1"></i>Request Pending
                    </button>`;
                             }

                             if (bookingStatus === 'rejected') {
                                 return `<button class="btn blue-btn btn-sm"
                        data-quote-id="${row.encrypted_id}"
                        data-carriers="${row.carriers_json}"
                        data-markup="${row.admin_markup}"
                        onclick="openRatesModal(this)">
                        <i class="fas fa-redo me-1"></i>Request Again
                    </button>`;
                             }

                             // Default: Normal case → View Rates button
                             return `<button class="btn blue-btn"
                    data-quote-id="${row.encrypted_id}"
                    data-carriers="${row.carriers_json}"
                    data-markup="${row.admin_markup}"
                    onclick="openRatesModal(this)">
                    <i class="fas fa-eye me-1"></i>View Rates
                </button>`;
                         }
                     },
                     {
                         data: null,
                         orderable: false,
                         render: function(row) {
                             return `
                                    <div>
                                        <button type="button" class="p-0 order-track"
                                            data-bs-toggle="modal"
                                            data-bs-target="#orderTrackingModal">
                                            Order tracking now
                                        </button>
                                    </div>
                                `;
                         }
                     }
                 ],
                 language: {
                     emptyTable: "No quotes found",
                     zeroRecords: "No matching quotes found"
                 }
             });

             $('#customSearchBox').on('keyup', function() {
                 var searchValue = this.value;
                 table.search(searchValue).draw();

                 if (searchValue.length > 0) {
                     $('.search-clear-btn').show();
                 } else {
                     $('.search-clear-btn').hide();
                 }
             });

             $('#customSearchBox').on('keydown', function(e) {
                 if (e.key === 'Escape') {
                     $(this).val('');
                     table.search('').draw();
                     $('.search-clear-btn').hide();
                 }
             });

             $(document).on('click', '.search-clear-btn', function() {
                 $('#customSearchBox').val('');
                 table.search('').draw();
                 $(this).hide();
             });

             $('#statusFilters button').on('click', function() {
                 $('#statusFilters button').removeClass('active-btn');
                 $(this).addClass('active-btn');

                 var status = $(this).text().trim();
                 $('#customSearchBox').val('');

                 if (status === 'All') {
                     table.column(5).search('').draw();
                 } else {
                     table.column(5).search(status).draw();
                 }
             });

             table.on('draw', function() {
                 var info = table.page.info();
                 var displayText = `Showing ${info.start + 1}-${info.end} from ${info.recordsTotal}`;

                 if (info.recordsDisplay !== info.recordsTotal) {
                     displayText =
                         `Showing ${info.start + 1}-${info.end} from ${info.recordsDisplay} (filtered from ${info.recordsTotal} total)`;
                 }

                 if (info.recordsDisplay === 0) {
                     displayText = 'Showing 0 results';
                 }

                 $('.page-number-show').text(displayText);
             });
         });
     </script>
 @endpush