@extends('user.layouts.app')

@section('title', 'My Bookings')

@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/bookingpopup.css') }}">
@endpush

@section('content')
    <div class="container-fluid py-4">
        <div class="ark__h1--wrap">
            <div class="page-title">
                <h1>My Booking Requests</h1>
                <p>Track and manage all your booking requests in one place</p>
            </div>
            <button class="ark__create--quote-btn" id="openDrawerBtn"
                onclick="window.location.href='{{ route('quotes.index') }}'">
                <img src="{{ asset('assets/images/plus.svg') }}" alt="img">
                <p>New Quote</p>
            </button>
        </div>

        <div class="row">
            <div class="col-12">
                @if ($bookings->count() > 0)
                    <div class="common-table card">
                        <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>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0" id="bookingsTable">
                                    <thead>
                                        <tr>
                                            <th width="5%" class="text-center">#</th>
                                            <th width="10%" class="text-center">Booking ID</th>
                                            <th width="20%">Route</th>
                                            <th width="15%">Carrier</th>
                                            <th width="10%" class="text-center">Amount</th>
                                            <th width="15%" class="text-center">Tender Status</th>
                                            <th width="10%" class="text-center">Requested</th>
                                            <th width="10%" class="text-center">Status</th>
                                            <th width="5%" class="text-center">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($bookings as $index => $booking)
                                            <tr>
                                                <td class="text-center">
                                                    {{ '#' . (($bookings->currentPage() - 1) * $bookings->perPage() + $index + 1) }}
                                                </td>

                                                <!-- Booking ID -->
                                                <td class="text-center">
                                                    <div class="">
                                                        {{ $booking->tender_id ?? 'TQL_' . str_pad($booking->id, 7, '0', STR_PAD_LEFT) }}
                                                    </div>
                                                    {{-- <small class="text-muted">Quote: #{{ $booking->quote_id }}</small> --}}
                                                </td>

                                                <!-- Route Information -->
                                                <td>
                                                    @if ($booking->quote && $booking->quote->pickupDetail && $booking->quote->deliveryDetail)
                                                        <div class="route-info">
                                                            <div class="d-flex align-items-start mb-1">
                                                                <i
                                                                    class="fas fa-map-marker-alt text-success mt-1 me-2 fs-6"></i>
                                                                <div>
                                                                    <div class="">
                                                                        {{ $booking->quote->pickupDetail->city }},
                                                                        {{ $booking->quote->pickupDetail->state }}
                                                                    </div>
                                                                    <small
                                                                        class="text-muted">{{ Str::limit($booking->quote->pickupDetail->address_1, 25) }}</small>
                                                                </div>
                                                            </div>
                                                            <div class="d-flex align-items-start">
                                                                <i class="fas fa-flag-checkered text-danger mt-1 me-2 fs-6"></i>
                                                                <div>
                                                                    <div class="">
                                                                        {{ $booking->quote->deliveryDetail->city }},
                                                                        {{ $booking->quote->deliveryDetail->state }}
                                                                    </div>
                                                                    <small
                                                                        class="text-muted">{{ Str::limit($booking->quote->deliveryDetail->address_1, 25) }}</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>

                                                <!-- Carrier Information -->
                                                <td>
                                                    @php $carrier = $booking->carrier_data @endphp
                                                    <div class="carrier-info">
                                                        <strong
                                                            class="">{{ $carrier['carrier'] ?? 'Unknown Carrier' }}</strong>
                                                        <div class="mt-1">
                                                            @if ($carrier['isPreferred'] ?? false)
                                                                <span class="badge bg-warning text-dark me-1">Preferred</span>
                                                            @endif
                                                            @if ($carrier['isCarrierOfTheYear'] ?? false)
                                                                <span class="badge bg-info me-1">COTY</span>
                                                            @endif
                                                        </div>
                                                        <small class="text-muted d-block mt-1">
                                                            {{ $carrier['serviceLevelDescription'] ?? ($carrier['serviceLevel'] ?? 'Standard') }}
                                                        </small>
                                                        <small class="text-muted">
                                                            {{ $carrier['transitDays'] ?? 'N/A' }} transit days
                                                        </small>
                                                    </div>
                                                </td>

                                                <!-- Amount -->
                                                <td class="text-center">
                                                    <div class="amount-display green">
                                                        ${{ number_format($booking->total_amount, 2) }}</div>
                                                    {{-- @if ($booking->markup_percent > 0)
                                        <small class="text-muted">+ {{ $booking->markup_percent }}% fee</small>
                                        @endif --}}
                                                </td>

                                                <!-- Tender Status -->
                                                <td class="text-center">
                                                    @if ($booking->tender_id)
                                                        @php
                                                            $tenderResponse = $booking->tender_response ?? [];
                                                            $isSuccess =
                                                                isset($tenderResponse['success']) &&
                                                                $tenderResponse['success'];
                                                        @endphp
                                                        <div class="tender-status">
                                                            @if ($isSuccess)
                                                                <span class="badge bg-success mb-1">Tendered</span>
                                                                <div>
                                                                    <small
                                                                        class="text-muted d-block">{{ Str::limit($booking->tender_id, 15) }}</small>
                                                                    <small
                                                                        class="text-muted">{{ $tenderResponse['message'] ?? 'Success' }}</small>
                                                                </div>
                                                            @else
                                                                <span class="badge bg-danger mb-1">Failed</span>
                                                                <div>
                                                                    <small
                                                                        class="text-muted">{{ $tenderResponse['error'] ?? 'Tender failed' }}</small>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    @else
                                                        <span class="badge bg-secondary">Not Tendered</span>
                                                    @endif
                                                </td>

                                                <!-- Requested Date -->
                                                <td class="text-center">
                                                    <div class="">{{ $booking->created_at->format('M d, Y') }}
                                                    </div>
                                                    <small
                                                        class="text-muted">{{ $booking->created_at->format('h:i A') }}</small>
                                                    <br>
                                                    <small
                                                        class="text-muted">{{ $booking->created_at->diffForHumans() }}</small>
                                                </td>

                                                <!-- Status -->
                                                <td class="text-center">
                                                    @php
                                                        $statusConfig = [
                                                            'pending' => [
                                                                'class' => 'badge-bg-pending',
                                                                'icon' => 'clock',
                                                            ],
                                                            'approved' => [
                                                                'class' => 'badge-bg-approved',
                                                                'icon' => 'check-circle',
                                                            ],
                                                            'confirmed' => [
                                                                'class' => 'badge-bg-confirmed',
                                                                'icon' => 'check-double',
                                                            ],
                                                            'rejected' => [
                                                                'class' => 'badge-bg-rejected',
                                                                'icon' => 'times-circle',
                                                            ],
                                                        ];
                                                        $config = $statusConfig[$booking->status] ?? [
                                                            'class' => 'bg-secondary',
                                                            'icon' => 'question-circle',
                                                        ];
                                                    @endphp
                                                    <span class="badge status-badge {{ $config['class'] }}">
                                                        <i class="fas fa-{{ $config['icon'] }} me-1"></i>
                                                        {{ ucfirst($booking->status) }}
                                                    </span>
                                                </td>

                                                <!-- Actions -->
                                                <td class="text-center">
                                                    <button class="btn btn-sm btn-outline-primary view-details"
                                                        data-bs-toggle="modal" data-bs-target="#bookingDetailsModal"
                                                        data-booking="{{ $booking->toJson() }}">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="page-num-wp d-flex justify-content-between align-items-center flex-wrap">
                            <span class="page-number-show">
                                Showing
                                {{ ($bookings->currentPage() - 1) * $bookings->perPage() + 1 }}-{{ min($bookings->currentPage() * $bookings->perPage(), $bookings->total()) }}
                                from {{ $bookings->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 {{ $bookings->onFirstPage() ? 'disabled' : '' }}">
                                            <a class="previous-page-link page-link" href="{{ $bookings->previousPageUrl() }}"
                                                {{ $bookings->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 = $bookings->currentPage();
                                            $lastPage = $bookings->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="{{ $bookings->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="{{ $bookings->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="{{ $bookings->url($lastPage) }}">{{ $lastPage }}</a>
                                            </li>
                                        @endif
                                    </span>

                                    {{-- Next Button --}}
                                    <span>
                                        <li class="page-item {{ !$bookings->hasMorePages() ? 'disabled' : '' }}">
                                            <a class="next-page-link page-link" href="{{ $bookings->nextPageUrl() }}"
                                                {{ !$bookings->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>
                @else
                    <div class="empty-state text-center py-5">
                        <h3>No bookings yet</h3>
                        <p> You haven't made any booking requests yet.<br>
                            Start by creating a freight quote!.</p>
                    </div>
                @endif

            </div>
        </div>

        <!-- Booking Details Modal -->
        <div class="common-modal booking-modal modal" id="bookingDetailsModal" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="booking-head d-flex">
                            <button type="button" class="btn-back" data-bs-dismiss="modal">
                                <svg width="22" height="19" viewBox="0 0 22 19" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.94372 1L1 9.5M1 9.5L9.94372 18M1 9.5H21" stroke="black" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                            <div>
                                <h5 class="modal-title">Quote Booking Details</h5>
                                <div class="booking-date">
                                    <span>
                                        <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M4.56012 0.75V4.85345M13.9399 0.75V4.85345M4.26714 7.78448H14.2327M0.75 5.43966C0.75 4.14465 1.79981 3.09484 3.09483 3.09484H15.4052C16.7002 3.09484 17.75 4.14465 17.75 5.43966V15.4052C17.75 16.7002 16.7002 17.75 15.4052 17.75H3.09483C1.79981 17.75 0.75 16.7002 0.75 15.4052V5.43966Z"
                                                stroke="#545454" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                    <span>Booked on: <strong class="dynamic-booked-date">-</strong></span>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body" id="bookingDetailsContent">
                        <div class="booking-id-section">
                            <div class="booking-id">
                                <span class="booking-id-label here">Booking ID:</span>
                                <span class="booking-id-value" id="modalBookingId">-</span>
                                <button class="copy-btn" onclick="copyBookingId()" title="copy Booking ID">
                                    <svg width="16" height="20" viewBox="0 0 16 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_819_12305)">
                                            <path
                                                d="M1.54944 2.71375L1.54667 4.8105V15.185C1.54667 16.9578 2.98378 18.3949 4.75654 18.3949L13.2665 18.3952C12.9613 19.2581 12.1382 19.8764 11.1708 19.8764H4.75654C2.16558 19.8764 0.0651855 17.776 0.0651855 15.185V4.8105C0.0651855 3.84189 0.684885 3.01803 1.54944 2.71375ZM13.6454 0.119141C14.8727 0.119141 15.8677 1.11406 15.8677 2.34136V15.1809C15.8677 16.4082 14.8727 17.4031 13.6454 17.4031H4.75654C3.52924 17.4031 2.53432 16.4082 2.53432 15.1809V2.34136C2.53432 1.11406 3.52924 0.119141 4.75654 0.119141H13.6454ZM13.6454 1.60062H4.75654C4.34744 1.60062 4.0158 1.93226 4.0158 2.34136V15.1809C4.0158 15.59 4.34744 15.9216 4.75654 15.9216H13.6454C14.0545 15.9216 14.3862 15.59 14.3862 15.1809V2.34136C14.3862 1.93226 14.0545 1.60062 13.6454 1.60062Z"
                                                fill="#545454" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_819_12305">
                                                <rect width="15.9259" height="20" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </button>
                            </div>
                            <span id="dynamic-status-badge" class="status-badge pending">Pending</span>
                        </div>

                        <div class="section-title">Quote Information:</div>
                        <div class="info-section">

                            <!-- 1. Quote Description -->
                            <div class="info-row">
                                <div class="info-label">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="2.5" y="3.33333" width="15" height="13.3333" rx="2"
                                            stroke="#545454" stroke-width="1.5" />
                                        <path d="M6.25 1.66667V4.16667" stroke="#545454" stroke-width="1.5"
                                            stroke-linecap="round" />
                                        <path d="M13.75 1.66667V4.16667" stroke="#545454" stroke-width="1.5"
                                            stroke-linecap="round" />
                                        <path d="M5 7.5H15" stroke="#545454" stroke-width="1.5" stroke-linecap="round" />
                                    </svg>
                                    <span>Quote Description</span>
                                </div>
                                <div class="info-value dynamic-description">-</div>
                            </div>

                            <!-- 2. Shipment Date -->
                            <div class="info-row">
                                <div class="info-label">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="4" width="14" height="13" rx="2" stroke="#545454"
                                            stroke-width="1.5" />
                                        <path d="M6 2V5" stroke="#545454" stroke-width="1.5" stroke-linecap="round" />
                                        <path d="M14 2V5" stroke="#545454" stroke-width="1.5" stroke-linecap="round" />
                                        <path d="M5 9H15" stroke="#545454" stroke-width="1.5" stroke-linecap="round" />
                                        <rect x="7" y="11" width="2" height="2" rx="1"
                                            fill="#545454" />
                                        <rect x="11" y="11" width="2" height="2" rx="1"
                                            fill="#545454" />
                                    </svg>
                                    <span>Shipment Date</span>
                                </div>
                                <div class="info-value dynamic-shipment-date">-</div>
                            </div>

                            <!-- 3. Carrier Name -->
                            <div class="info-row">
                                <div class="info-label">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g>
                                            <circle cx="10" cy="10" r="9" stroke="#545454"
                                                stroke-width="1.5" fill="none" />
                                            <rect x="5" y="6" width="10" height="8" rx="2"
                                                stroke="#545454" stroke-width="1.5" fill="none" />
                                            <rect x="8" y="9" width="4" height="2" rx="1"
                                                fill="#545454" />
                                        </g>
                                    </svg>
                                    <span>Carrier Name</span>
                                </div>
                                <div class="info-value dynamic-carrier">-</div>
                            </div>

                            <!-- 4. Delivery Location -->
                            <div class="info-row">
                                <div class="info-label">
                                    <!-- Delivery Location SVG icon -->
                                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M10.5 2C6.63401 2 3.5 5.13401 3.5 9C3.5 14.25 10.5 19 10.5 19C10.5 19 17.5 14.25 17.5 9C17.5 5.13401 14.366 2 10.5 2ZM10.5 11.5C9.11929 11.5 8 10.3807 8 9C8 7.61929 9.11929 6.5 10.5 6.5C11.8807 6.5 13 7.61929 13 9C13 10.3807 11.8807 11.5 10.5 11.5Z"
                                            stroke="#545454" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                    <span>Delivery Location</span>
                                </div>
                                <div class="info-value dynamic-delivery-location">-</div>
                            </div>

                            <!-- 5. Order Date -->
                            <div class="info-row">
                                <div class="info-label">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="4" width="14" height="13" rx="2" stroke="#545454"
                                            stroke-width="1.5" />
                                        <path d="M6 2V5" stroke="#545454" stroke-width="1.5" stroke-linecap="round" />
                                        <path d="M14 2V5" stroke="#545454" stroke-width="1.5" stroke-linecap="round" />
                                        <path d="M5 9H15" stroke="#545454" stroke-width="1.5" stroke-linecap="round" />
                                        <rect x="7" y="11" width="2" height="2" rx="1"
                                            fill="#545454" />
                                        <rect x="11" y="11" width="2" height="2" rx="1"
                                            fill="#545454" />
                                    </svg>
                                    <span>Order Date</span>
                                </div>
                                <div class="info-value dynamic-order-date">-</div>
                            </div>
                        </div>

                        <div class="financial-section">
                            <div class="financial-row total"><span class="financial-label"
                                    style="font-weight: 600;">Amount</span> <span
                                    class="financial-value dynamic-amount">$0</span></div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn-action btn-download" id="showInvoiceBtn">
                            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_819_12514)">
                                    <path
                                        d="M3.96533 20.7314H15.226C18.3108 20.7314 20.8116 18.2306 20.8116 15.1458V1.26758H9.55466C8.01225 1.26758 6.76188 2.51795 6.76188 4.06036L6.75817 6.76742"
                                        stroke="white" stroke-width="1.2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M3.96539 6.76758H6.75817V17.9388C6.75817 19.4802 5.50674 20.7315 3.96539 20.7315C2.42399 20.7315 1.17261 19.4801 1.17261 17.9388V9.56036C1.17261 8.01896 2.42404 6.76758 3.96539 6.76758Z"
                                        stroke="white" stroke-width="1.2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M1.17261 11.7383H6.75822" stroke="white" stroke-width="1.2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M10.1626 11.7383H17.2546" stroke="white" stroke-width="1.2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M10.1626 15.3398H17.2546" stroke="white" stroke-width="1.2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M13.2612 5.32812H10.1626V8.42669H13.2612V5.32812Z" stroke="white"
                                        stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_819_12514">
                                        <rect width="22" height="22" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg> Download Invoice
                        </button>

                        {{-- invoice Modal (separate file se include) --}}
                        @include('user.invoice')
                    </div>
                </div>
            </div>
        </div>

    @endsection
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    @push('scripts')
        <script>
            $(document).ready(function() {
                const table = $('#bookingsTable').DataTable({
                    responsive: true,
                    order: [
                        [10, 'desc']
                    ], // Order by date column
                    pageLength: 10,
                    paging: false,
                    info: false,
                    dom: 'rt',
                    language: {
                        searchPlaceholder: "Search bookings...",
                        emptyTable: "No bookings found",
                        zeroRecords: "No matching bookings found"
                    }
                })

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

                    if (searchValue.length > 0) {
                        $('.search-clear-btn').show();
                        // Optional: Hide pagination when searching
                        $('.page-num-wp').toggle(searchValue.length === 0);
                    } else {
                        $('.search-clear-btn').hide();
                        $('.page-num-wp').show();
                    }
                });

                $('#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');
                    const filterText = $(this).text().trim();

                    if (filterText === 'All') {
                        table.column(7).search('').draw();
                        $('.page-num-wp').show();
                    } else {
                        table.column(7).search(filterText).draw();
                        // Optional: Hide pagination when filtering
                        $('.page-num-wp').hide();
                    }
                });
                $(document).on('click', '.view-details', function() {
                    const booking = JSON.parse($(this).attr('data-booking'));

                    window.currentBookingForInvoice = booking;

                    // Booking ID
                    $('#modalBookingId').text(
                        booking.tender_id ?? 'TQL_' + String(booking.id).padStart(7, '0')
                    );

                    // Booked Date
                    $('.booking-date strong').text(
                        new Date(booking.created_at).toLocaleDateString('en-GB', {
                            day: 'numeric',
                            month: 'short',
                            year: 'numeric'
                        })
                    );

                    const statusBadge = $('#dynamic-status-badge');
                    const status = (booking.status || '').toString().toLowerCase().trim();

                    // Remove all possible status classes first
                    statusBadge.removeClass('pending confirmed approved rejected');

                    // Now apply correct class + text
                    if (status === 'confirmed' || status === 'accepted') {
                        statusBadge.text('Confirmed').addClass('confirmed');
                    } else if (status === 'approved') {
                        statusBadge.text('Approved').addClass('approved');
                    } else if (status === 'rejected' || status === 'declined' || status === 'canceled') {
                        statusBadge.text('Rejected').addClass('rejected'); // Yeh line missing thi!
                    } else {
                        statusBadge.text('Pending').addClass('pending');
                    }

                    // Quote Description — ab bilkul sahi aayega
                    const description = booking.quote?.commodities?.[0]?.description || 'Freight Shipment';
                    $('.info-row').eq(0).find('.info-value').text(description);

                    // Shipment Date
                    $('.info-row').eq(1).find('.info-value').text(
                        booking.quote?.shipment_date ?
                        new Date(booking.quote.shipment_date).toLocaleDateString('en-GB', {
                            day: 'numeric',
                            month: 'short',
                            year: 'numeric'
                        }) :
                        'Not Specified'
                    );

                    // Carrier
                    $('.info-row').eq(2).find('.info-value').text(
                        booking.carrier_data?.carrier || 'Not Assigned'
                    );

                    // DELIVERY LOCATION — AB SAHI NAAM SE LE RAHE HAIN
                    if (booking.quote?.delivery_detail) { // ← snake_case (Laravel ka default)
                        const del = booking.quote.delivery_detail;
                        $('.info-row').eq(3).find('.info-value').html(`
                    <div class="">${del.city}, ${del.state}</div>
                    <small class="text-muted">${del.address_1 || 'Address not available'}</small>
                `);
                    } else if (booking.quote?.deliveryDetail) { // fallback agar camelCase ho
                        const del = booking.quote.deliveryDetail;
                        $('.info-row').eq(3).find('.info-value').html(`
                    <div class="">${del.city}, ${del.state}</div>
                    <small class="text-muted">${del.address_1 || 'Address not available'}</small>
                `);
                    } else {
                        $('.info-row').eq(3).find('.info-value').text('Delivery location not available');
                    }

                    // Order Date
                    $('.info-row').eq(4).find('.info-value').text(
                        new Date(booking.created_at).toLocaleDateString('en-GB', {
                            day: 'numeric',
                            month: 'short',
                            year: 'numeric'
                        })
                    );

                    // Amount
                    $('.financial-section .financial-row.total .financial-value')
                        .text('$' + parseFloat(booking.total_amount).toLocaleString('en-US', {
                            minimumFractionDigits: 2
                        }));
                });

                window.copyBookingId = function() {
                    const text = document.getElementById('modalBookingId').innerText;
                    navigator.clipboard.writeText(text).then(() => alert('Copied!'));
                };
            });
        </script>
    @endpush