@extends('admin.layouts.base')


 @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.RL-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>TQL</th>
                             <th>R+L</th>
                             <th>Commodities</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' : '' }}">
                                     <a class="previous-page-link page-link" href="{{ $quotes->previousPageUrl() }}"
                                         {{ $quotes->onFirstPage() ? 'style=pointer-events:none;opacity:0.5;' : '' }}>
                                         <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
                                     </a>
                                 </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

                                 {{-- First page if not in range --}}
                                 @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

                                 {{-- Page range --}}
                                 @for ($i = $startPage; $i <= $endPage; $i++)
                                     <li class="page-item">
                                     <a class="custom-page-link page-link {{ $i == $currentPage ? 'active-link' : '' }}"
                                         href="{{ $quotes->url($i) }}">{{ $i }}</a>
                                     </li>
                                     @endfor

                                     {{-- Last page if not in range --}}
                                     @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' : '' }}">
                                     <a class="next-page-link page-link" href="{{ $quotes->nextPageUrl() }}"
                                         {{ !$quotes->hasMorePages() ? 'style=pointer-events:none;opacity:0.5;' : '' }}>
                                         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>
                                     </a>
                                 </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')

 <!-- Commodities Modal -->
 <div class="common-modal modal" id="commoditiesModal" tabindex="-1">
     <div class="modal-backdrop"></div>
     <div class="modal-dialog modal-lg modal-dialog-scrollable">
         <div class="modal-content border-0 shadow-lg rounded-4">

             <div class="modal-header">
                 <h5 class="modal-title fw-semibold">Quote Details</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>

             <div class="modal-body" id="commoditiesModalBody">

                <!-- Shipment -->
                <h6 class="section-title">Shipment Information</h6>

                <div class="info-grid">
                    <div><strong>Origin:</strong> <span id="originType"></span></div>
                    <div><strong>Destination:</strong> <span id="destinationType"></span></div>
                    <div><strong>Shipment Date:</strong> <span id="shipmentDate"></span></div>
                </div>


                <!-- ROUTE -->
                <h6 class="section-title mt-3">Route</h6>

                <div class="row">

                    <div class="col-md-6">
                        <div class="route-card pickup-card">
                            <h6>Pickup</h6>

                            <div class="route-title">Pickup Location</div>
                            <div id="pickupAddress"></div>

                            <div class="route-contact">
                                📞 <span id="pickupContact"></span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="route-card delivery-card">
                            <h6>Delivery</h6>

                            <div class="route-title">Delivery Location</div>
                            <div id="deliveryAddress"></div>

                            <div class="route-contact">
                                📞 <span id="deliveryContact"></span>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Commodities -->
                <h6 class="section-title mt-3">Commodities</h6>

                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th>Class</th>
                            <th>NMFC</th>
                            <th>Weight (lbs)</th>
                            <th>Dimensions</th>
                            <th>Pieces</th>
                            <th>Hazmat</th>
                            <th>Additional Services</th>
                        </tr>
                    </thead>
                    <tbody id="commoditiesTable"></tbody>
                </table>

            </div>

         </div>
     </div>
 </div>
 @endsection

 @push('scripts')
 <script src="{{ asset('assets/js/quotes.js') }}"></script>

 <script>
     const rlQuotesData = @json($quoteTableData ?? []);
     const tqlQuotesData = @json($TQLQuoteData ?? []);

     const mergedQuotesData = rlQuotesData.map(rl => {

         const tql = tqlQuotesData.find(t => t.id === rl.id) || {};

         return {
             ...rl,

             // Keep original RL fields
             rl_carriers_json: rl.carriers_json,
             rl_has_rates: rl.has_rates,

             // Add TQL fields
             tql_carriers_json: tql.carriers_json || '[]',
             tql_has_rates: tql.has_rates || false
         };
     });

     let currentData = mergedQuotesData;

     $(document).ready(function() {
         var table = $('#quotesTable').DataTable({
             data: currentData,
             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>'
                 },
                 //  TQL column
                 {
                     data: null,
                     orderable: false,
                     render: function(row) {

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

                         return `<button class="btn blue-btn btn-sm"
                            data-quote-id="${row.encrypted_id}"
                            data-carriers="${row.tql_carriers_json}"
                            data-markup="${row.admin_markup}"
                            onclick="openRatesModal(this)">
                            <i class="fas fa-eye me-1"></i>View TQL
                        </button>`;
                     }
                 },

                 // ── R+L column ──
                 {
                     data: null,
                     orderable: false,
                     render: function(row) {

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

                         return `<button class="btn blue-btn btn-sm"
                            data-quote-id="${row.encrypted_id}"
                            data-carriers="${row.rl_carriers_json}"
                            data-markup="${row.admin_markup}"
                            onclick="openRLRatesModal(this)">
                            <i class="fas fa-eye me-1"></i>View RL
                        </button>`;
                     }
                 },
                 {
                     data: null,
                     orderable: false,
                     render: function(row) {

                         return `<button class="btn blue-btn btn-sm"
                        data-quote-id="${row.id}"
                        onclick="openCommoditiesModal(this)">
                        <i class="fas fa-eye me-1"></i>View
                    </button>`;
                     }
                 },
                 //  {
                 //      data: null,
                 //      orderable: false,
                 //      render: function(row) {
                 //          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 3"
                 //                     data-quote-id="${row.encrypted_id}"
                 //                     data-carriers="${row.carriers_json}"
                 //                     data-markup="${row.admin_markup}"
                 //                     onclick="openRLRatesModal(this)">
                 //                     <i class="fas fa-redo me-1"></i>Request Again
                 //                 </button>`;
                 //          }

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

         // Custom search box
         $('#customSearchBox').on('keyup', function() {
             table.search(this.value).draw();
             $('.search-clear-btn').toggle(this.value.length > 0);
         });

         $('#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('').trigger('keyup');
         });

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

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

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

         // Update showing text on draw
         table.on('draw', function() {
             const info = table.page.info();
             let 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);
         });
     });
     $(document).on('click', '.view-details', function () {
        const id = $(this).data('id');
        const $btn = $(this);

        // Show loading spinner on button
        $btn.prop('disabled', true)
            .html('<span class="spinner-border spinner-border-sm" role="status"></span>');

        // Correct way to generate URL with parameter
        const url = '{{ route("admin.booking-requests.details", ":id") }}'.replace(':id', id);

        $.get(url)
            .done(function (html) {
                // Remove any existing modal
                $('#bookingDetailsModal').remove();
                // Append new modal HTML
                $('body').append(html);
                // Show the modal
                const modal = new bootstrap.Modal(document.getElementById('bookingDetailsModal'));
                modal.show();
            })
            .fail(function (xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to load booking details. Please try again.'
                });
            })
            .always(function () {
                // Restore eye icon
                $btn.prop('disabled', false)
                    .html('<i class="ki-duotone ki-eye fs-4"></i>');
            });
    });
 </script>
 @endpush