@extends('layouts.app')
@section('content')

<div class="d-flex flex-column flex-column-fluid">
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Flight Booking List</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted text-hover-primary">Home</a>
                    </li>
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-500 w-5px h-2px"></span>
                    </li>
                    <li class="breadcrumb-item text-muted">Flight Bookings</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- ── SUCCESS TOAST ── --}}
    @if(session('success'))
    <div id="successToast" class="status-toast toast-generic">
        <span class="toast-icon">✅</span>
        <div>
            <div class="toast-title">Success</div>
            <div class="toast-msg">{{ session('success') }}</div>
        </div>
        <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
    </div>
    @endif

    {{-- ── EMAIL TOAST ── --}}
    @if(session('emailsuccess'))
    <div id="emailToast" class="status-toast toast-confirmed">
        <span class="toast-icon">📧</span>
        <div>
            <div class="toast-title">Email Sent!</div>
            <div class="toast-msg">{{ session('emailsuccess') }}</div>
        </div>
        <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
    </div>
    @endif

    {{-- ── CANCEL TOAST ── --}}
    @if(session('cancelmsg'))
    <div id="cancelToast" class="status-toast toast-cancelled">
        <span class="toast-icon">❌</span>
        <div>
            <div class="toast-title">Booking Cancelled</div>
            <div class="toast-msg">{{ session('cancelmsg') }}</div>
        </div>
        <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
    </div>
    @endif

    {{-- ── ERROR TOAST ── --}}
    @if(session('error'))
    <div id="errorToast" class="status-toast toast-cancelled">
        <span class="toast-icon">⚠️</span>
        <div>
            <div class="toast-title">Booking Failed</div>
            <div class="toast-msg">{{ session('error') }}</div>
        </div>
        <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
    </div>
    @endif

    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">

            <div class="card border-0 shadow-sm">

                <div class="card-header d-flex justify-content-between align-items-center py-4 flex-wrap gap-3">
                    <h3 class="mb-0"><i class="fa fa-plane me-2 text-primary"></i> Flight Booking List</h3>

                    <div class="d-flex align-items-center gap-3 flex-wrap">
                        <div class="d-flex gap-2">
                            <button class="filter-btn active" data-filter="all" onclick="filterTable('all', this)">
                                All <span class="filter-count" id="count_all">0</span>
                            </button>
                            <button class="filter-btn confirmed" data-filter="confirmed" onclick="filterTable('confirmed', this)">
                                ✅ Confirmed <span class="filter-count" id="count_confirmed">0</span>
                            </button>
                            <button class="filter-btn cancelled" data-filter="cancelled" onclick="filterTable('cancelled', this)">
                                ❌ Cancelled <span class="filter-count" id="count_cancelled">0</span>
                            </button>
                            <button class="filter-btn adv-filter-btn" onclick="document.getElementById('advFilterModal').style.display='flex'" title="Advanced Filter">
                                <i class="fa fa-sliders me-1"></i> Filter
                            </button>
                        </div>
                        <span class="badge text-white bg-primary fs-6 px-3 py-2" id="totalBadge">{{ $bookings->total() }} Total</span>
                    </div>
                </div>

                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0">
                        <thead style="background:#f8f9fc;">
                            <tr>
                                <th class="px-4 py-3" style="width:60px;">S.No</th>
                                <th class="py-3">Booking ID</th>
                                <th class="py-3">Customer</th>
                                <th class="py-3">Route</th>
                                <th class="py-3">Amount</th>
                                <th class="py-3 text-center">Status</th>
                                <th class="py-3 text-center" style="width:80px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="bookingTableBody">
                            @forelse($bookings as $index => $booking)
                            <tr class="booking-row"
                                data-status="{{ strtolower($booking->status) }}"
                                data-index="{{ $index }}"
                                data-name="{{ strtolower($booking->holder_name . ' ' . $booking->holder_surname) }}"
                                data-email="{{ strtolower($booking->holder_email) }}"
                                data-bookingid="{{ strtolower($booking->booking_id) }}"
                                data-departure="{{ $booking->departure_date ? \Carbon\Carbon::parse($booking->departure_date)->format('Y-m-d') : '' }}">

                                <td class="px-4 text-muted row-sno">{{ ($bookings->currentPage() - 1) * $bookings->perPage() + $index + 1 }}</td>

                                <td>
                                    <div class="booking-id-badge">{{ $booking->booking_id }}</div>
                                    <div class="small text-muted mt-1">
                                        <i class="fa fa-tag me-1"></i>{{ $booking->booking_reference }}
                                        @if($booking->pnr && $booking->pnr !== $booking->booking_reference)
                                            · <span class="fw-semibold">PNR: {{ $booking->pnr }}</span>
                                        @endif
                                    </div>
                                </td>

                                <td>
                                    <div class="fw-semibold">{{ $booking->holder_title }} {{ $booking->holder_name }} {{ $booking->holder_surname }}</div>
                                    <div class="small text-muted">{{ $booking->holder_email }}</div>
                                </td>

                                <td>
                                    <div class="d-flex align-items-center gap-2 fw-bold">
                                        <span>{{ $booking->departure_airport }}</span>
                                        <i class="fa fa-arrow-right text-primary" style="font-size:11px;"></i>
                                        <span>{{ $booking->arrival_airport }}</span>
                                        <span class="trip-type-badge {{ strtoupper($booking->trip_type) === 'RETURN' ? 'badge-return' : 'badge-oneway' }}">
                                            {{ strtoupper($booking->trip_type) === 'RETURN' ? '↩ Return' : '→ One Way' }}
                                        </span>
                                    </div>
                                    <div class="small text-muted mt-1">
                                        <i class="fa fa-calendar me-1"></i>
                                        {{ $booking->departure_date ? \Carbon\Carbon::parse($booking->departure_date)->format('d M Y, H:i') : '—' }}
                                        @if($booking->supplier_name)
                                            · <span class="text-primary fw-semibold">{{ $booking->supplier_name }}</span>
                                        @endif
                                    </div>
                                </td>

                                <td>
                                    <span class="fw-bold">{{ number_format($booking->total_price, 2) }}</span>
                                    <span class="text-muted small"> {{ $booking->currency }}</span>
                                    <div class="small text-muted">{{ ucwords(str_replace('_', ' ', $booking->payment_status ?? '')) }}</div>
                                </td>

                                <td class="text-center">
                                    @if(strtolower($booking->status) === 'confirmed' || strtolower($booking->status) === 'ticketed')
                                    <span class="status-pill confirmed-pill">✅ Confirmed</span>
                                    @elseif(strtolower($booking->status) === 'pending')
                                    <span class="status-pill onhold-pill">⏳ Pending</span>
                                    @elseif(strtolower($booking->status) === 'on_hold')
                                    <span class="status-pill onhold-pill">⏳ On Hold</span>
                                    @else
                                    <span class="status-pill cancelled-pill">❌ {{ ucfirst($booking->status) }}</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <button class="action-btn action-btn--view" title="View Details"
                                        onclick="openViewModal({{ $booking->id }})">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr id="emptyRow">
                                <td colspan="7" class="text-center text-muted py-5">
                                    <i class="fa fa-plane fa-2x mb-2 d-block"></i>
                                    No flight bookings found.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>

                    <div id="noFilterResults" class="text-center py-5 d-none">
                        <i class="fa fa-filter fa-2x text-muted mb-2 d-block"></i>
                        <p class="text-muted">No bookings found for this filter.</p>
                    </div>

                    {{-- Pagination --}}
                    <div id="paginationWrap" class="px-4 py-3 border-top d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <p class="mb-0 text-muted small" id="paginationInfo">
                            Showing {{ $bookings->firstItem() }}–{{ $bookings->lastItem() }} of {{ $bookings->total() }} bookings
                        </p>
                        <nav>
                            {{ $bookings->links('pagination::bootstrap-5') }}
                        </nav>
                    </div>
                </div>

            </div>{{-- end .card --}}

        </div>{{-- end #kt_app_content_container --}}
    </div>{{-- end #kt_app_content --}}
</div>{{-- end .d-flex.flex-column-fluid --}}


{{-- ── VIEW DETAILS MODALS ── --}}
@foreach($bookings as $booking)
@php
    $segments  = is_array($booking->flight_segments)  ? $booking->flight_segments  : [];
    $passengers = is_array($booking->passenger_details) ? $booking->passenger_details : [];
    $ancillaries = is_array($booking->ancillaries)      ? $booking->ancillaries      : [];
    $etickets  = is_array($booking->e_tickets)         ? $booking->e_tickets         : [];
    $seats     = $ancillaries['seats']   ?? [];
    $meals     = $ancillaries['meals']   ?? [];
    $baggage   = $ancillaries['baggage'] ?? [];
@endphp
<div class="modal fade" id="viewModal{{ $booking->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">

            {{-- HEADER --}}
            <div class="modal-header border-0 text-white py-4 px-4"
                style="background: linear-gradient(135deg, #1565C0, #1976D2);">
                <div>
                    <h5 class="modal-title fw-bold mb-1">
                        <i class="fa fa-plane me-2"></i> Flight Booking Details
                    </h5>
                    <div class="small opacity-75">
                        {{ $booking->departure_airport }} → {{ $booking->arrival_airport }}
                        &nbsp;·&nbsp;
                        {{ $booking->supplier_name ?? '—' }}
                    </div>
                </div>
                <div class="ms-auto d-flex align-items-center gap-3">
                    @if(strtolower($booking->status) === 'confirmed' || strtolower($booking->status) === 'ticketed')
                    <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">✅ Confirmed</span>
                    @elseif(strtolower($booking->status) === 'pending' || strtolower($booking->status) === 'on_hold')
                    <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">⏳ {{ ucfirst($booking->status) }}</span>
                    @else
                    <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">❌ {{ ucfirst($booking->status) }}</span>
                    @endif
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
            </div>

            <div class="modal-body p-4">

                {{-- BOOKING REFERENCE --}}
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="detail-section-label">🔖 Booking Reference</div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🎫</div>
                            <div class="detail-label">Booking ID</div>
                            <div class="detail-value" style="font-size:13px; font-family:monospace;">{{ $booking->booking_id }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">📋</div>
                            <div class="detail-label">Reference / PNR</div>
                            <div class="detail-value" style="font-size:13px; font-family:monospace;">{{ $booking->booking_reference }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">✈️</div>
                            <div class="detail-label">Supplier</div>
                            <div class="detail-value" style="font-size:13px;">{{ $booking->supplier_name ?? '—' }}</div>
                        </div>
                    </div>
                </div>

                {{-- CUSTOMER INFO --}}
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="detail-section-label">👤 Customer Information</div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🙍</div>
                            <div class="detail-label">Full Name</div>
                            <div class="detail-value">{{ $booking->holder_title }} {{ $booking->holder_name }} {{ $booking->holder_surname }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">✉️</div>
                            <div class="detail-label">Email</div>
                            <div class="detail-value" style="font-size:12px;">{{ $booking->holder_email ?: '—' }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">💳</div>
                            <div class="detail-label">Total Price</div>
                            <div class="detail-value">{{ number_format($booking->total_price, 2) }} <span style="font-size:12px;font-weight:500;color:#888;">{{ $booking->currency }}</span></div>
                        </div>
                    </div>
                </div>

                {{-- FLIGHT ROUTE --}}
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="detail-section-label">✈️ Flight Details</div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🛫</div>
                            <div class="detail-label">From</div>
                            <div class="detail-value">{{ $booking->departure_airport }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🛬</div>
                            <div class="detail-label">To</div>
                            <div class="detail-value">{{ $booking->arrival_airport }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">📅</div>
                            <div class="detail-label">Departure</div>
                            <div class="detail-value" style="font-size:12px;">
                                {{ $booking->departure_date ? \Carbon\Carbon::parse($booking->departure_date)->format('d M Y, H:i') : '—' }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🔄</div>
                            <div class="detail-label">Trip Type</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ strtoupper($booking->trip_type) === 'RETURN' ? '↩ Return' : '→ One Way' }}
                            </div>
                        </div>
                    </div>
                </div>

                {{-- FLIGHT SEGMENTS --}}
                @if(!empty($segments))
                <div class="mb-4">
                    <div class="detail-section-label">🛩️ Flight Segments</div>
                    <div class="mt-2 rounded-3 overflow-hidden" style="border:1px solid #eef0f8;">
                        @foreach($segments as $seg)
                        <div class="px-3 py-3 {{ !$loop->last ? 'border-bottom' : '' }}" style="background:#fff;">
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="segment-flight-badge">{{ $seg['flightNumber'] ?? '—' }}</div>
                                    <div>
                                        <div class="d-flex align-items-center gap-2 fw-bold" style="font-size:15px;">
                                            <span>{{ $seg['departureCode'] ?? $seg['originCode'] ?? '—' }}</span>
                                            <i class="fa fa-long-arrow-right text-primary"></i>
                                            <span>{{ $seg['arrivalCode'] ?? $seg['destinationCode'] ?? '—' }}</span>
                                        </div>
                                        @if(!empty($seg['departureTerminal']))
                                        <div class="small text-muted">Terminal: {{ $seg['departureTerminal'] }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="small text-muted">Departure</div>
                                    <div class="fw-semibold" style="font-size:13px;">
                                        {{ !empty($seg['departureDateTime']) ? \Carbon\Carbon::parse($seg['departureDateTime'])->format('d M Y, H:i') : '—' }}
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="small text-muted">Arrival</div>
                                    <div class="fw-semibold" style="font-size:13px;">
                                        {{ !empty($seg['arrivalDateTime']) ? \Carbon\Carbon::parse($seg['arrivalDateTime'])->format('d M Y, H:i') : '—' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- PASSENGERS --}}
                @if(!empty($passengers))
                <div class="mb-4">
                    <div class="detail-section-label">👥 Passengers</div>
                    <div class="mt-2 rounded-3 overflow-hidden" style="border:1px solid #eef0f8;">
                        @foreach($passengers as $pax)
                        <div class="d-flex align-items-center justify-content-between px-3 py-2 {{ !$loop->last ? 'border-bottom' : '' }}" style="background:#fff;">
                            <div class="d-flex align-items-center gap-2">
                                <span style="width:28px;height:28px;background:#e8f5e9;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;">👤</span>
                                <div>
                                    <div class="fw-semibold" style="font-size:13px;">
                                        {{ $pax['title'] ?? '' }} {{ $pax['firstName'] ?? '' }} {{ $pax['lastName'] ?? '' }}
                                    </div>
                                    <div class="small text-muted">
                                        DOB: {{ !empty($pax['birthDate']) ? \Carbon\Carbon::parse($pax['birthDate'])->format('d M Y') : '—' }}
                                        &nbsp;·&nbsp; Nationality: {{ $pax['nationality'] ?? '—' }}
                                    </div>
                                </div>
                            </div>
                            <div>
                                <span class="badge bg-light text-dark border" style="font-size:11px;">
                                    {{ $pax['paxType'] === 'ADT' ? '🧑 Adult' : ($pax['paxType'] === 'CHD' ? '🧒 Child' : '👶 Infant') }}
                                </span>
                                <span class="badge bg-light text-muted border ms-1" style="font-size:11px;">Ref: {{ $pax['rph'] ?? '—' }}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- E-TICKETS --}}
                @if(!empty($etickets))
                <div class="mb-4">
                    <div class="detail-section-label">🎟️ E-Tickets</div>
                    <div class="mt-2 rounded-3 overflow-hidden" style="border:1px solid #eef0f8;">
                        @foreach($etickets as $ticket)
                        <div class="d-flex align-items-center justify-content-between px-3 py-2 {{ !$loop->last ? 'border-bottom' : '' }}" style="background:#fff;">
                            <div class="d-flex align-items-center gap-2">
                                <span style="font-size:1.1rem;">🎫</span>
                                <div>
                                    <div class="fw-semibold" style="font-size:13px; font-family:monospace;">{{ $ticket['eTicketNo'] ?? '—' }}</div>
                                    <div class="small text-muted">Segment: {{ $ticket['segmentCode'] ?? '—' }} · Coupon #{{ $ticket['couponNo'] ?? '—' }}</div>
                                </div>
                            </div>
                            <div>
                                @php $tStatus = $ticket['usedStatus'] ?? $ticket['status'] ?? ''; @endphp
                                <span class="status-pill {{ $tStatus === 'UNUSED' ? 'confirmed-pill' : 'onhold-pill' }}" style="font-size:11px;">
                                    {{ $tStatus ?: '—' }}
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- ANCILLARIES --}}
                @if(!empty($seats) || !empty($meals) || !empty($baggage))
                <div class="mb-4">
                    <div class="detail-section-label">🛎️ Add-ons &amp; Ancillaries</div>
                    <div class="mt-2 row g-2">

                        @if(!empty($seats))
                        <div class="col-md-4">
                            <div class="ancillary-card ancillary-seat">
                                <div class="ancillary-icon">💺</div>
                                <div class="ancillary-label">Seat</div>
                                @foreach($seats as $seat)
                                <div class="ancillary-value">{{ $seat['seatNumber'] ?? '—' }}</div>
                                <div class="small text-muted">Flight {{ $seat['flightNumber'] ?? '—' }}</div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        @if(!empty($meals))
                        <div class="col-md-4">
                            <div class="ancillary-card ancillary-meal">
                                <div class="ancillary-icon">🍽️</div>
                                <div class="ancillary-label">Meal</div>
                                @foreach($meals as $meal)
                                <div class="ancillary-value" style="font-size:12px;">{{ $meal['mealCode'] ?? '—' }}</div>
                                <div class="small text-muted">Qty: {{ $meal['mealQuantity'] ?? 1 }} · Flight {{ $meal['flightNumber'] ?? '—' }}</div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        @if(!empty($baggage))
                        <div class="col-md-4">
                            <div class="ancillary-card ancillary-baggage">
                                <div class="ancillary-icon">🧳</div>
                                <div class="ancillary-label">Baggage</div>
                                @foreach($baggage as $bag)
                                <div class="ancillary-value" style="font-size:12px;">{{ $bag['baggageCode'] ?? '—' }}</div>
                                <div class="small text-muted">Flight {{ $bag['flightNumber'] ?? '—' }}</div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                    </div>
                </div>
                @endif

                {{-- PRICING BREAKDOWN --}}
                <div class="mb-4">
                    <div class="detail-section-label">💰 Pricing Breakdown</div>
                    <div class="mt-2 rounded-3 overflow-hidden" style="border:1px solid #eef0f8;">
                        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom" style="background:#fff;">
                            <span style="font-size:13px;color:#555;">Base Price</span>
                            <span class="fw-semibold">{{ number_format($booking->base_price, 2) }} {{ $booking->currency }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom" style="background:#fff;">
                            <span style="font-size:13px;color:#555;">Tax &amp; Fees</span>
                            <span class="fw-semibold">{{ number_format($booking->tax_amount, 2) }} {{ $booking->currency }}</span>
                        </div>
                        @if($booking->markup_amount > 0)
                        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom" style="background:#fff;">
                            <span style="font-size:13px;color:#555;">Markup</span>
                            <span class="fw-semibold">{{ number_format($booking->markup_amount, 2) }} {{ $booking->currency }}</span>
                        </div>
                        @endif
                        <div class="d-flex justify-content-between align-items-center px-3 py-3" style="background:#f0f4ff;">
                            <span style="font-size:14px;font-weight:700;color:#1a1a2e;">Total</span>
                            <span style="font-size:16px;font-weight:800;color:#1565C0;">{{ number_format($booking->total_price, 2) }} {{ $booking->currency }}</span>
                        </div>
                    </div>
                </div>

                {{-- QUICK ACTIONS --}}
                <div class="mb-2">
                    <div class="detail-section-label">⚡ Quick Actions</div>
                    <div class="d-flex gap-2 flex-wrap mt-2">

                        {{-- Resend confirmation email --}}
                        {{-- <a href="{{ route('b2b.flights.booking.resend', $booking->booking_id) }}"
                            class="modal-action-btn modal-action-btn--email">
                            <i class="fa fa-envelope"></i> Resend Email
                        </a> --}}

                        {{-- Download e-ticket --}}
                        {{-- @if($booking->isConfirmed())
                        <a href="{{ route('b2b.flights.booking.eticket', $booking->booking_id) }}"
                            class="modal-action-btn modal-action-btn--download">
                            <i class="fa fa-download"></i> Download E-Ticket
                        </a>
                        @endif --}}

                        {{-- Cancel booking --}}
                        {{-- @if($booking->isConfirmed())
                        <a href="{{ route('b2b.flights.booking.cancel', $booking->booking_id) }}"
                            onclick="return confirm('Are you sure you want to cancel this flight booking?');"
                            class="modal-action-btn modal-action-btn--cancel">
                            <i class="fa fa-ban"></i> Cancel Booking
                        </a>
                        @endif --}}

                        <span class="small text-muted fst-italic mt-1">
                            <i class="fa fa-info-circle me-1"></i> Action buttons — wire up your routes above.
                        </span>
                    </div>
                </div>

            </div>

            <div class="modal-footer border-0 px-4 pb-4 pt-0">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
@endforeach


{{-- ── ADVANCED FILTER MODAL ── --}}
<div id="advFilterModal" onclick="if(event.target==this) closeAdvFilter()">
    <div id="advFilterBox">

        <div class="adv-filter-header">
            <h6><i class="fa fa-sliders me-2"></i> Advanced Filter</h6>
            <button class="adv-filter-close" onclick="closeAdvFilter()">✕</button>
        </div>

        <div class="adv-filter-body">

            <div class="mb-3">
                <label class="adv-filter-label">🔢 Booking ID</label>
                <input type="text" id="flt_bookingid" class="adv-filter-input" placeholder="Search by booking ID...">
            </div>
            <div class="mb-3">
                <label class="adv-filter-label">👤 Customer Name</label>
                <input type="text" id="flt_name" class="adv-filter-input" placeholder="Search by name...">
            </div>
            <div class="mb-3">
                <label class="adv-filter-label">✉️ Email</label>
                <input type="text" id="flt_email" class="adv-filter-input" placeholder="Search by email...">
            </div>

            {{-- DEPARTURE DATE RANGE --}}
            <div class="mb-1">
                <label class="adv-filter-label">📅 Departure Date Range</label>
                <div class="d-flex gap-2">
                    <div style="flex:1;">
                        <label style="font-size:11px; color:#aaa; margin-bottom:4px; display:block;">From</label>
                        <input type="date" id="flt_dep_from" class="adv-filter-input">
                    </div>
                    <div style="flex:1;">
                        <label style="font-size:11px; color:#aaa; margin-bottom:4px; display:block;">To</label>
                        <input type="date" id="flt_dep_to" class="adv-filter-input">
                    </div>
                </div>
            </div>

        </div>

        <div class="adv-filter-footer">
            <button class="adv-filter-reset" onclick="resetAdvFilter()">
                <i class="fa fa-rotate-left me-1"></i> Reset
            </button>
            <button class="adv-filter-apply" onclick="applyAdvFilter()">
                <i class="fa fa-check me-1"></i> Apply Filter
            </button>
        </div>

    </div>
</div>


<style>
    /* ── TOASTS ── */
    .status-toast {
        position: fixed;
        bottom: 30px;
        right: 30px;
        padding: 14px 18px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 8px 30px rgba(0,0,0,0.18);
        z-index: 9999;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        max-width: 340px;
        animation: slideInRight 0.4s ease;
        color: #fff;
    }
    .toast-confirmed  { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
    .toast-cancelled  { background: linear-gradient(135deg, #b71c1c, #c62828); }
    .toast-generic    { background: linear-gradient(135deg, #1a237e, #1565C0); }
    .toast-icon       { font-size:1.5rem; line-height:1; flex-shrink:0; margin-top:2px; }
    .toast-title      { font-weight:700; font-size:14px; margin-bottom:2px; }
    .toast-msg        { font-size:12px; opacity:0.9; line-height:1.4; }
    .toast-close      { background:none; border:none; color:#fff; cursor:pointer; opacity:0.7; font-size:14px; margin-left:8px; padding:0; align-self:flex-start; margin-top:2px; }
    .toast-close:hover { opacity:1; }
    @keyframes slideInRight {
        from { opacity:0; transform:translateX(60px); }
        to   { opacity:1; transform:translateX(0); }
    }

    /* ── FILTER BUTTONS ── */
    .filter-btn {
        border:2px solid #dee2e6; background:#fff; border-radius:20px;
        padding:5px 14px; font-size:12px; font-weight:600; cursor:pointer;
        transition:all 0.2s; color:#555;
    }
    .filter-btn:hover           { border-color:#1976D2; color:#1976D2; }
    .filter-btn.active          { background:#1976D2; border-color:#1976D2; color:#fff; }
    .filter-btn.confirmed.active { background:#2e7d32; border-color:#2e7d32; color:#fff; }
    .filter-btn.cancelled.active { background:#c62828; border-color:#c62828; color:#fff; }
    .filter-count               { display:inline-block; background:rgba(255,255,255,0.3); border-radius:10px; padding:0 6px; font-size:11px; margin-left:2px; }
    .filter-btn:not(.active) .filter-count { background:#eee; color:#555; }

    /* ── STATUS PILLS ── */
    .status-pill     { display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; }
    .confirmed-pill  { background:#e8f5e9; color:#2e7d32; }
    .cancelled-pill  { background:#ffebee; color:#c62828; }
    .onhold-pill     { background:#fff8e1; color:#f57f17; }

    /* ── TRIP TYPE BADGE ── */
    .trip-type-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; }
    .badge-oneway    { background:#e3f2fd; color:#1565c0; }
    .badge-return    { background:#f3e5f5; color:#6a1b9a; }

    /* ── BOOKING ID BADGE ── */
    .booking-id-badge { background:#f0f4ff; color:#3a57c1; border-radius:6px; padding:3px 8px; font-size:12px; font-weight:600; font-family:monospace; }

    /* ── ACTION BUTTONS ── */
    .action-btn       { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; border:none; cursor:pointer; font-size:14px; transition:transform 0.15s ease, box-shadow 0.15s ease; }
    .action-btn:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,0.15); }
    .action-btn--view { background:#e8f5e9; color:#2e7d32; }
    .action-btn--view:hover { background:#2e7d32; color:#fff; }

    /* ── DETAIL CARDS (modal) ── */
    .detail-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:#888; margin-bottom:4px; }
    .detail-card          { background:#f8f9fc; border:1px solid #eef0f8; border-radius:12px; padding:16px; text-align:center; height:100%; }
    .detail-icon          { font-size:1.4rem; margin-bottom:6px; }
    .detail-label         { font-size:11px; color:#999; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
    .detail-value         { font-size:15px; font-weight:700; color:#1a1a2e; }

    /* ── FLIGHT SEGMENT ── */
    .segment-flight-badge { background:#1976D2; color:#fff; border-radius:8px; padding:4px 10px; font-size:13px; font-weight:700; font-family:monospace; white-space:nowrap; }

    /* ── ANCILLARY CARDS ── */
    .ancillary-card    { border-radius:12px; padding:14px 16px; text-align:center; height:100%; }
    .ancillary-seat    { background:#e3f2fd; border:1px solid #bbdefb; }
    .ancillary-meal    { background:#fff8e1; border:1px solid #ffe082; }
    .ancillary-baggage { background:#f3e5f5; border:1px solid #ce93d8; }
    .ancillary-icon    { font-size:1.4rem; margin-bottom:4px; }
    .ancillary-label   { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#888; margin-bottom:4px; }
    .ancillary-value   { font-size:14px; font-weight:700; color:#1a1a2e; }

    /* ── MODAL ACTION BUTTONS ── */
    .modal-action-btn          { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; transition:transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s; border:none; cursor:pointer; }
    .modal-action-btn:hover    { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,0.15); opacity:0.92; }
    .modal-action-btn--email   { background:#fff3e0; color:#e65100; }
    .modal-action-btn--download{ background:#e3f2fd; color:#1565c0; }
    .modal-action-btn--cancel  { background:#ffebee; color:#c62828; }
    .modal-action-btn--confirm { background:#e8f5e9; color:#2e7d32; }
    .modal-action-btn--info    { background:#e8eaf6; color:#3949ab; }

    /* ── ADVANCED FILTER MODAL ── */
    .adv-filter-btn { border-color:#6c757d !important; color:#6c757d !important; }
    .adv-filter-btn:hover { border-color:#343a40 !important; color:#343a40 !important; background:#f8f9fa !important; }
    .adv-filter-btn.filter-active { border-color:#6f42c1 !important; background:#6f42c1 !important; color:#fff !important; }

    #advFilterModal { display:none; position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.45); align-items:center; justify-content:center; }
    #advFilterBox   { background:#fff; border-radius:16px; width:100%; max-width:480px; margin:16px; box-shadow:0 20px 60px rgba(0,0,0,0.2); overflow:hidden; animation:slideUp 0.3s ease; }
    @keyframes slideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }

    .adv-filter-header   { background:linear-gradient(135deg,#1a1a2e,#16213e); padding:18px 22px; display:flex; align-items:center; justify-content:space-between; }
    .adv-filter-header h6{ color:#fff; font-weight:700; margin:0; font-size:15px; }
    .adv-filter-close    { background:none; border:none; color:#fff; opacity:0.7; font-size:18px; cursor:pointer; line-height:1; padding:0; }
    .adv-filter-close:hover { opacity:1; }
    .adv-filter-body     { padding:22px; }
    .adv-filter-label    { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#888; margin-bottom:6px; display:block; }
    .adv-filter-input    { width:100%; padding:9px 14px; border:1.5px solid #dee2e6; border-radius:10px; font-size:13px; outline:none; transition:border-color 0.2s; background:#fff; }
    .adv-filter-input:focus { border-color:#1976D2; }
    .adv-filter-footer   { padding:0 22px 22px; display:flex; gap:10px; }
    .adv-filter-apply    { flex:1; padding:10px; background:#1976D2; color:#fff; border:none; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; }
    .adv-filter-apply:hover { background:#1565C0; }
    .adv-filter-reset    { padding:10px 18px; background:#f8f9fa; color:#555; border:1.5px solid #dee2e6; border-radius:10px; font-weight:600; font-size:13px; cursor:pointer; }
    .adv-filter-reset:hover { background:#e9ecef; }

    /* ── PAGINATION ── */
    .pagination .page-link          { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px !important; font-size:13px; font-weight:600; padding:0; color:#555; border:1px solid #dee2e6; transition:all 0.2s; }
    .pagination .page-link:hover    { background:#1976D2; border-color:#1976D2; color:#fff; }
    .pagination .page-item.active .page-link   { background:#1976D2; border-color:#1976D2; color:#fff; }
    .pagination .page-item.disabled .page-link { opacity:0.4; pointer-events:none; }
</style>


<script>
    const PER_PAGE = 20;
    let allRows       = Array.from(document.querySelectorAll('.booking-row'));
    let filtered      = allRows;
    let currentFilter = 'all';
    let currentPage   = 1;

    // ── Count badges ──
    function updateCounts() {
        document.getElementById('count_all').textContent = allRows.length;
        document.getElementById('count_confirmed').textContent = allRows.filter(r => r.dataset.status === 'confirmed' || r.dataset.status === 'ticketed').length;
        document.getElementById('count_cancelled').textContent = allRows.filter(r => r.dataset.status === 'cancelled').length;
    }

    // ── Status filter tabs ──
    function filterTable(filter, btn) {
        currentFilter = filter;
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        if (filter === 'all') {
            filtered = allRows;
        } else if (filter === 'confirmed') {
            filtered = allRows.filter(r => r.dataset.status === 'confirmed' || r.dataset.status === 'ticketed');
        } else {
            filtered = allRows.filter(r => r.dataset.status === filter);
        }
        renderPage(1);
    }

    // ── Open modal ──
    function openViewModal(id) {
        new bootstrap.Modal(document.getElementById('viewModal' + id)).show();
    }

    // ── Render page ──
    function renderPage(page) {
        currentPage = page;
        const start = (page - 1) * PER_PAGE;
        const end   = start + PER_PAGE;
        allRows.forEach(r => r.style.display = 'none');
        filtered.slice(start, end).forEach((r, i) => {
            r.style.display = '';
            r.querySelector('.row-sno').textContent = start + i + 1;
        });
        document.getElementById('totalBadge').textContent = filtered.length + ' Total';
        document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
        const paginationInfo = document.getElementById('paginationInfo');
        if (filtered.length > 0) {
            paginationInfo.textContent = `Showing ${start + 1}–${Math.min(end, filtered.length)} of ${filtered.length} booking${filtered.length !== 1 ? 's' : ''}`;
        } else {
            paginationInfo.textContent = '';
        }
    }

    // ── Advanced Filter ──
    function closeAdvFilter() {
        document.getElementById('advFilterModal').style.display = 'none';
    }

    function resetAdvFilter() {
        ['flt_bookingid', 'flt_name', 'flt_email', 'flt_dep_from', 'flt_dep_to']
            .forEach(id => document.getElementById(id).value = '');
        document.querySelector('.adv-filter-btn').classList.remove('filter-active');
        filtered = currentFilter === 'all' ? allRows : allRows.filter(r => r.dataset.status === currentFilter);
        renderPage(1);
        closeAdvFilter();
    }

    function applyAdvFilter() {
        const bookingid = document.getElementById('flt_bookingid').value.trim().toLowerCase();
        const name      = document.getElementById('flt_name').value.trim().toLowerCase();
        const email     = document.getElementById('flt_email').value.trim().toLowerCase();
        const depFrom   = document.getElementById('flt_dep_from').value;
        const depTo     = document.getElementById('flt_dep_to').value;

        let base = currentFilter === 'all' ? allRows
            : (currentFilter === 'confirmed'
                ? allRows.filter(r => r.dataset.status === 'confirmed' || r.dataset.status === 'ticketed')
                : allRows.filter(r => r.dataset.status === currentFilter));

        filtered = base.filter(row => {
            let pass = true;
            if (bookingid && !row.dataset.bookingid.includes(bookingid)) pass = false;
            if (name      && !row.dataset.name.includes(name))           pass = false;
            if (email     && !row.dataset.email.includes(email))         pass = false;
            if (depFrom   && row.dataset.departure && row.dataset.departure < depFrom) pass = false;
            if (depTo     && row.dataset.departure && row.dataset.departure > depTo)   pass = false;
            return pass;
        });

        const hasFilter = bookingid || name || email || depFrom || depTo;
        document.querySelector('.adv-filter-btn').classList.toggle('filter-active', !!hasFilter);
        renderPage(1);
        closeAdvFilter();
    }

    // ── Toast auto-dismiss ──
    ['successToast', 'emailToast', 'cancelToast', 'errorToast'].forEach(function(id) {
        var el = document.getElementById(id);
        if (el) {
            setTimeout(function() {
                el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                el.style.opacity    = '0';
                el.style.transform  = 'translateX(60px)';
                setTimeout(() => el.remove(), 500);
            }, 5000);
        }
    });

    // ── Init ──
    updateCounts();
    renderPage(1);
</script>

@endsection