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

    @if(empty($hotels) && isset($bookings))

    <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">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">Bookings</li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- ── SUCCESS TOAST (generic) ── --}}
        @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-arrow-circle-right me-2 text-primary"></i> 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">{{ count($bookings) }} 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">Destination</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-checkin="{{ $booking->checkin }}"
                                    data-checkout="{{ $booking->checkout }}">

                                    <td class="px-4 text-muted row-sno">{{ $index + 1 }}</td>

                                    <td>
                                        <div class="small text-muted mt-1">
                                            <i class="fa fa-tag me-1"></i>{{ $booking->booking_reference }}
                                        </div>
                                    </td>

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

                                    <td>
                                        <div class="fw-bold" style="max-width:200px;">{{ $booking->city_name }}@if($booking->country_name), {{ $booking->country_name }}@endif</div>
                                        <div class="small text-muted mt-1">
                                            <i class="fa fa-calendar me-1"></i>
                                            {{ \Carbon\Carbon::parse($booking->checkin)->format('d M Y') }}
                                            → {{ \Carbon\Carbon::parse($booking->checkout)->format('d M Y') }}
                                        </div>
                                    </td>

                                    <td>
                                        <span class="fw-bold">{{ number_format($booking->receivable_price, 2) }}</span>
                                        <span class="text-muted small"> {{ $booking->currency }}</span>
                                    </td>

                                    <td class="text-center">
                                        @if($booking->status == 'confirmed')
                                        <span class="status-pill confirmed-pill">✅ Confirmed</span>
                                        @elseif($booking->status == 'ON_HOLD')
                                        <span class="status-pill onhold-pill">⏳ On Hold</span>
                                        @else
                                        <span class="status-pill cancelled-pill">❌ Cancelled</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-inbox fa-2x mb-2 d-block"></i>
                                        No 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 info --}}
                        <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"></p>
                            <nav>
                                <ul class="pagination pagination-sm mb-0" id="paginationLinks"></ul>
                            </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)
    {{-- All policy data is pre-parsed in the controller, no @php block needed --}}
    <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-info-circle me-2"></i> Booking Details
                        </h5>
                        <div class="small opacity-75">
                            {{ $booking->city_name }}@if($booking->country_name), {{ $booking->country_name }}@endif
                        </div>
                    </div>
                    <div class="ms-auto d-flex align-items-center gap-3">
                        @if($booking->status == 'confirmed')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">✅ Confirmed</span>
                        @elseif($booking->status == 'ON_HOLD')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">⏳ On Hold</span>
                        @else
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">❌ Cancelled</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-6">
                            <div class="detail-card">
                                <div class="detail-icon">🏨</div>
                                <div class="detail-label">Hotel</div>
                                <div class="detail-value" style="font-size:13px;">{{ $booking->hotel_name ?? '—' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-card">
                                <div class="detail-icon">📋</div>
                                <div class="detail-label">Reference</div>
                                <div class="detail-value" style="font-size:12px; font-family:monospace; word-break:break-all;">{{ $booking->booking_reference }}</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_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 · {{ $booking->nights }} Nights</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>

                    {{-- STAY INFO --}}
                    <div class="row g-3 mb-4">
                        <div class="col-12">
                            <div class="detail-section-label">✈️ Stay Details</div>
                        </div>
                        <div class="col-md-4">
                            <div class="detail-card">
                                <div class="detail-icon">📍</div>
                                <div class="detail-label">Destination</div>
                                <div class="detail-value" style="font-size:13px;">{{ $booking->city_name }}@if($booking->country_name), {{ $booking->country_name }}@endif</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="detail-card">
                                <div class="detail-icon">📅</div>
                                <div class="detail-label">Check-in</div>
                                <div class="detail-value" style="font-size:13px;">{{ \Carbon\Carbon::parse($booking->checkin)->format('d M Y') }}</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="detail-card">
                                <div class="detail-icon">📅</div>
                                <div class="detail-label">Check-out</div>
                                <div class="detail-value" style="font-size:13px;">{{ \Carbon\Carbon::parse($booking->checkout)->format('d M Y') }}</div>
                            </div>
                        </div>
                    </div>

                    {{-- HOTEL ADDRESS --}}
                    @if($booking->hotel_address)
                    <div class="mb-4">
                        <div class="detail-section-label">🏨 Hotel Address</div>
                        <div class="mt-2 p-3 rounded-3" style="background:#f8f9fc; border-left:4px solid #1976D2; font-size:14px; color:#444; line-height:1.7;">
                            {{ $booking->hotel_address }}
                        </div>
                    </div>
                    @endif

                    {{-- CANCELLATION POLICY ── purely display, no logic ── --}}
                    <div class="mb-4">
                        <div class="detail-section-label">📋 Cancellation Policy</div>

                        @if(empty($booking->parsed_policy['policies']))
                        <div class="mt-2 p-3 rounded-3 d-flex align-items-center gap-2"
                            style="background:#f8f9fc; border:1px dashed #dee2e6; font-size:13px; color:#999;">
                            <i class="fa fa-info-circle"></i> Non-Cancellable.
                        </div>
                        @else
                        <div class="mt-2 rounded-3 overflow-hidden" style="border:1px solid #eef0f8;">

                            @if($booking->parsed_policy['free_before'])
                            <div class="d-flex align-items-center gap-2 px-3 py-2"
                                style="background:#e8f5e9; border-bottom:1px solid #c8e6c9;">
                                <span style="width:20px;height:20px;background:#2e7d32;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                    <i class="fa fa-check" style="color:#fff;font-size:9px;"></i>
                                </span>
                                <span style="font-size:13px;font-weight:600;color:#2e7d32;">
                                    Free cancellation before <strong> {{ \Carbon\Carbon::parse($booking->parsed_policy['free_before'])->format('d M Y, H:i') }}
    UTC+0</strong>
                                </span>
                            </div>
                            @endif

                            @foreach($booking->parsed_policy['policies'] as $pol)
                            <div class="d-flex align-items-center justify-content-between px-3 py-2"
                                style="background:#fff; {{ !$loop->last || $booking->cancel_record ? 'border-bottom:1px solid #f0f0f5;' : '' }}">
                                <div class="d-flex align-items-center gap-2">
                                    <span style="width:7px;height:7px;border-radius:50%;background:{{ $pol['is_free'] ? '#2e7d32' : '#c62828' }};display:inline-block;flex-shrink:0;"></span>
                                    <span style="font-size:13px;color:#444;font-weight:500;">{{ $pol['period'] }}</span>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <span style="font-size:13px;font-weight:700;color:{{ $pol['is_free'] ? '#2e7d32' : '#c62828' }};">
                                        {{ $pol['is_free'] ? 'Free' : number_format($pol['charge'], 2) . ' ' . ($booking->currency ?? 'USD') }}
                                    </span>
                                    @if(!$pol['is_free'])
                                    <span style="font-size:11px;background:#fff3e0;color:#e65100;padding:2px 8px;border-radius:20px;font-weight:600;">⚠️ Charges Apply</span>
                                    @endif
                                </div>
                            </div>
                            @endforeach

                            @if($booking->cancel_record)
                            <div class="d-flex align-items-center justify-content-between px-3 py-3"
                                style="background:#fff5f5; border-top:2px dashed #ffcdd2;">
                                <div class="d-flex align-items-center gap-2">
                                    <div style="width:30px;height:30px;background:#ffebee;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <i class="fa fa-ban" style="color:#c62828;font-size:12px;"></i>
                                    </div>
                                    <div>
                                        <div style="font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:1px;">Cancelled On</div>
                                        <div style="font-size:13px;font-weight:700;color:#c62828;">
                                            {{ \Carbon\Carbon::parse($booking->cancel_record->cancel_date)->format('d M Y, h:i A') }}
                                        </div>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div style="font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:1px;">Charge Applied</div>
                                    <div style="font-size:15px;font-weight:800;color:#c62828;">
                                        {{ number_format($booking->cancel_record->cancellation_charges, 2) }}
                                        <span style="font-size:11px;font-weight:600;">{{ $booking->cancel_record->cancellation_currency ?? 'USD' }}</span>
                                    </div>
                                </div>
                            </div>
                            @endif

                        </div>
                        @endif
                    </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">

                            <a href="{{ route('b2b.hotels.booking.resend', $booking->uuid ?? $booking->booking_id) }}"
                                class="modal-action-btn modal-action-btn--email">
                                <i class="fa fa-envelope"></i> Resend Email
                            </a>
                            <a href="{{ route('b2b.hotels.whatsapp.send', $booking->uuid) }}"
                                class="modal-action-btn modal-action-btn--whatsapp">
                                <i class="fa-brands fa-whatsapp"></i> WhatsApp
                            </a>
                            <a href="{{ route('b2b.hotels.booking.confirmation_info.view', $booking->uuid) }}" target="_blank"
                                class="modal-action-btn modal-action-btn--info">
                                <i class="fa fa-share-square-o"></i> View Confirmation
                            </a>
                            @if($booking->status == 'confirmed' && !empty($booking->id))
                            <a href="{{ route('b2b.hotels.booking.voucher', ['id' => $booking->uuid]) }}"
                                class="modal-action-btn modal-action-btn--download">
                                <i class="fa fa-download"></i> Download Voucher
                            </a>
                            @if(!empty($booking->parsed_policy['policies']))
                            <a href="{{ route('b2b.hotels.booking.cancel', $booking->uuid) }}"
                                onclick="return confirm('Are you sure you want to cancel this booking?');"
                                class="modal-action-btn modal-action-btn--cancel">
                                <i class="fa fa-ban"></i> Cancel Booking
                            </a>
                            @endif
                            @endif
                            @if($booking->status == 'ON_HOLD')
                            <a href="{{ route('b2b.hotels.booking.confirm', $booking->uuid) }}"
                                class="modal-action-btn modal-action-btn--confirm">
                                <i class="fa fa-check-circle"></i> Confirm Booking
                            </a>
                            <a href="{{ route('b2b.hotels.booking.cancel', $booking->uuid) }}"
                                onclick="return confirm('Are you sure you want to cancel this booking?');"
                                class="modal-action-btn modal-action-btn--cancel">
                                <i class="fa fa-ban"></i> Cancel Booking
                            </a>
                            @endif
                        </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>

                {{-- CHECK-IN DATE RANGE --}}
                <div class="mb-1">
                    <label class="adv-filter-label">📅 Check-in 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_checkin_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_checkin_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;
        }

        /* ── 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;
        }

        /* ── 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--whatsapp {
            background: #e8f5e9;
            color: #1b7a3e;
        }

        .modal-action-btn--info {
            background: #e8eaf6;
            color: #3949ab;
        }

        .modal-action-btn--download {
            background: #e3f2fd;
            color: #1565c0;
        }

        .modal-action-btn--cancel {
            background: #ffebee;
            color: #c62828;
        }

        .modal-action-btn--confirm {
            background: #e8f5e9;
            color: #2e7d32;
        }

        /* ── 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 = 10;
        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').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');
            filtered = filter == 'all' ? allRows : 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 = '';
            }
            renderPagination();
        }

        // ── Render pagination ──
        function renderPagination() {
            const totalPages = Math.ceil(filtered.length / PER_PAGE);
            const paginationLinks = document.getElementById('paginationLinks');
            paginationLinks.innerHTML = '';
            if (totalPages <= 1) return;

            const prev = document.createElement('li');
            prev.className = `page-item ${currentPage == 1 ? 'disabled' : ''}`;
            prev.innerHTML = `<a class="page-link" href="#">&laquo;</a>`;
            prev.addEventListener('click', e => {
                e.preventDefault();
                if (currentPage > 1) renderPage(currentPage - 1);
            });
            paginationLinks.appendChild(prev);

            for (let i = 1; i <= totalPages; i++) {
                const li = document.createElement('li');
                li.className = `page-item ${i == currentPage ? 'active' : ''}`;
                li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
                li.addEventListener('click', e => {
                    e.preventDefault();
                    renderPage(i);
                });
                paginationLinks.appendChild(li);
            }

            const next = document.createElement('li');
            next.className = `page-item ${currentPage == totalPages ? 'disabled' : ''}`;
            next.innerHTML = `<a class="page-link" href="#">&raquo;</a>`;
            next.addEventListener('click', e => {
                e.preventDefault();
                if (currentPage < totalPages) renderPage(currentPage + 1);
            });
            paginationLinks.appendChild(next);
        }

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

        function resetAdvFilter() {
            ['flt_bookingid', 'flt_name', 'flt_email', 'flt_checkin_from', 'flt_checkin_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 checkinFrom = document.getElementById('flt_checkin_from').value;
            const checkinTo = document.getElementById('flt_checkin_to').value;

            let base = currentFilter == 'all' ? allRows : 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 (checkinFrom && row.dataset.checkin && row.dataset.checkin < checkinFrom) pass = false;
                if (checkinTo && row.dataset.checkin && row.dataset.checkin > checkinTo) pass = false;
                return pass;
            });

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

        // ── Toast auto-dismiss ──
        ['successToast', 'emailToast', 'cancelToast'].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>

    @endif {{-- end @if(empty($hotels) && isset($bookings)) --}}

    @endsection