@extends('layouts.app')

@section('content')

{{-- ── 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

@php
    $roleId = Auth::user()->role_id;
@endphp

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

    {{-- ── HEADER ── --}}
    <div class="card-header d-flex justify-content-between align-items-center py-4 flex-wrap gap-3">
        <h3 class="mb-0">
            <i class="fas fa-chart-bar me-2 text-primary"></i> Booking Reports
        </h3>

        <div class="d-flex align-items-center gap-3 flex-wrap">
            {{-- Status Filter Buttons --}}
            <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 pending" data-filter="pending" onclick="filterTable('pending', this)">
                    ⏳ Pending <span class="filter-count" id="count_pending">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="fas fa-sliders-h 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>

            {{-- Export Buttons --}}
            <a href="{{ route('Booking.Reports.Export', request()->all()) }}" class="btn btn-sm btn-success px-3">
                <i class="fas fa-file-excel me-1"></i> Excel
            </a>
            <a href="{{ route('reports.export.pdf', request()->all()) }}" class="btn btn-sm btn-danger px-3">
                <i class="fas fa-file-pdf me-1"></i> PDF
            </a>
        </div>
    </div>

    {{-- ── TABLE ── --}}
    <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:55px;">S.No</th>
                    <th class="py-3">Booking ID</th>
                    {{-- Hide Supplier column from staff (role_id=3) --}}
                    @if(in_array($roleId, [1, 2]))
                    <th class="py-3">Supplier</th>
                    @endif
                    <th class="py-3">Customer Name</th>
                    <th class="py-3">Service Type</th>
                    <th class="py-3">Check-In</th>
                    <th class="py-3">Check-Out</th>
                    <th class="py-3">Total Amount</th>
                    {{-- Hide Commission from staff (role_id=3) --}}
                    @if(in_array($roleId, [1, 2]))
                    <th class="py-3">Commission</th>
                    @endif
                    <th class="py-3 text-center">Status</th>
                    <th class="py-3 text-center" style="width:100px;">Action</th>
                </tr>
            </thead>
            <tbody id="bookingTableBody">
                @forelse($Bookings as $key => $val)
                <tr class="booking-row"
                    data-status="{{ strtolower($val->status) }}"
                    data-index="{{ $key }}">

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

                    <td>
                        <span class="fw-bold text-primary">{{ $val->booking_id }}</span>
                    </td>

                    {{-- Supplier: admin (1) & agent (2) only --}}
                    @if(in_array($roleId, [1, 2]))
                    <td>
                        @if($val->agency && $val->agency->suppliers)
                            <div class="d-flex flex-wrap gap-1">
                                @foreach($val->agency->suppliers as $supplier)
                                    <span class="supplier-badge">{{ $supplier['name'] }}</span>
                                @endforeach
                            </div>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </td>
                    @endif

                    <td>
                        <div class="fw-semibold">{{ $val->holder_name }}</div>
                    </td>

                    <td>
                        <span class="service-badge service-hotel">
                            <i class="fas fa-hotel me-1"></i> Hotel
                        </span>
                    </td>

                    <td>
                        <span class="fw-semibold">
                            {{ \Carbon\Carbon::parse($val->checkin)->format('d M Y') }}
                        </span>
                    </td>

                    <td>
                        <span class="fw-semibold">
                            {{ \Carbon\Carbon::parse($val->checkout)->format('d M Y') }}
                        </span>
                    </td>

                    <td>
                        <span class="fw-bold text-dark">{{ number_format($val->total_price, 2) }}</span>
                    </td>

                    {{-- Commission: admin (1) & agent (2) only --}}
                    @if(in_array($roleId, [1, 2]))
                    <td>
                        <span class="fw-semibold text-info">
                            {{ number_format($val->admin_price ?? 0, 2) }}
                        </span>
                    </td>
                    @endif

                    <td class="text-center">
                        @php $s = strtolower($val->status); @endphp
                        @if($s === 'confirmed')
                            <span class="status-pill confirmed-pill">✅ Confirmed</span>
                        @elseif($s === 'cancelled')
                            <span class="status-pill cancelled-pill">❌ Cancelled</span>
                        @else
                            <span class="status-pill pending-pill">⏳ Pending</span>
                        @endif
                    </td>

                    <td class="text-center">
                        <button class="action-btn action-btn--view" title="View Details"
                            onclick="openViewModal({{ $val->id }})">
                            <i class="fas fa-eye"></i>
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="{{ in_array($roleId, [1, 2]) ? 11 : 9 }}"
                        class="text-center text-muted py-5">
                        <i class="fas 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="fas fa-filter fa-2x text-muted mb-2 d-block"></i>
            <p class="text-muted">No bookings found for this filter.</p>
        </div>
    </div>

    {{-- ── FOOTER / PAGINATION ── --}}
    <div class="card-footer bg-white border-top-0 pt-0 pb-3 px-4">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-3">
            <p class="mb-0 text-muted small">
                Showing {{ $Bookings->firstItem() }}–{{ $Bookings->lastItem() }}
                of {{ $Bookings->total() }} bookings
            </p>
            <div class="d-flex align-items-center gap-3">
                <select class="form-select form-select-sm w-auto" onchange="location = this.value;">
                    @foreach([10, 25, 50, 100] as $limit)
                        <option value="{{ request()->fullUrlWithQuery(['per_page' => $limit]) }}"
                            {{ request('per_page', 10) == $limit ? 'selected' : '' }}>
                            {{ $limit }} per page
                        </option>
                    @endforeach
                </select>
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        <li class="page-item {{ $Bookings->onFirstPage() ? 'disabled' : '' }}">
                            <a class="page-link" href="{{ $Bookings->previousPageUrl() }}">&laquo;</a>
                        </li>
                        @foreach($Bookings->getUrlRange(1, $Bookings->lastPage()) as $page => $url)
                            <li class="page-item {{ $Bookings->currentPage() == $page ? 'active' : '' }}">
                                <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                            </li>
                        @endforeach
                        <li class="page-item {{ $Bookings->hasMorePages() ? '' : 'disabled' }}">
                            <a class="page-link" href="{{ $Bookings->nextPageUrl() }}">&raquo;</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

</div>


{{-- ── VIEW DETAILS MODALS ── --}}
@foreach($Bookings as $val)
<div class="modal fade" id="viewModal{{ $val->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">

            <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="fas fa-file-invoice me-2"></i> Booking Details
                    </h5>
                    <div class="small opacity-75">{{ $val->booking_id }}</div>
                </div>
                <div class="ms-auto d-flex align-items-center gap-3">
                    @php $s = strtolower($val->status); @endphp
                    @if($s === 'confirmed')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">✅ Confirmed</span>
                    @elseif($s === 'cancelled')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">❌ Cancelled</span>
                    @else
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">⏳ Pending</span>
                    @endif
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
            </div>

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

                {{-- ── Customer & Supplier ── --}}
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="detail-section-label">👤 Customer & Supplier</div>
                    </div>

                    <div class="{{ in_array($roleId, [1, 2]) ? 'col-md-4' : 'col-md-6' }}">
                        <div class="detail-card">
                            <div class="detail-icon">🙍</div>
                            <div class="detail-label">Customer Name</div>
                            <div class="detail-value">{{ $val->holder_name }}</div>
                        </div>
                    </div>

                    {{-- Supplier card: admin (1) & agent (2) only --}}
                    @if(in_array($roleId, [1, 2]))
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🏢</div>
                            <div class="detail-label">Suppliers</div>
                            <div class="detail-value" style="font-size:13px;">
                                @if($val->agency && $val->agency->suppliers)
                                    <div class="d-flex flex-wrap gap-1 justify-content-center mt-1">
                                        @foreach($val->agency->suppliers as $supplier)
                                            <span class="supplier-badge">{{ $supplier['name'] }}</span>
                                        @endforeach
                                    </div>
                                @else
                                    —
                                @endif
                            </div>
                        </div>
                    </div>
                    @endif

                    <div class="{{ in_array($roleId, [1, 2]) ? 'col-md-4' : 'col-md-6' }}">
                        <div class="detail-card">
                            <div class="detail-icon">🏷️</div>
                            <div class="detail-label">Booking ID</div>
                            <div class="detail-value text-primary">{{ $val->booking_id }}</div>
                        </div>
                    </div>
                </div>

                {{-- ── Booking Info ── --}}
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="detail-section-label">📋 Booking Info</div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🏨</div>
                            <div class="detail-label">Service Type</div>
                            <div class="detail-value" style="font-size:13px;">Hotel</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <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($val->checkin)->format('d M Y') }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <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($val->checkout)->format('d M Y') }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🕐</div>
                            <div class="detail-label">Booked On</div>
                            <div class="detail-value" style="font-size:12px;">
                                {{ $val->created_at->format('d M Y, h:i A') }}
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── Financials ── --}}
                <div class="row g-3 mb-2">
                    <div class="col-12">
                        <div class="detail-section-label">💰 Financials</div>
                    </div>

                    {{-- Total Amount: all roles --}}
                    <div class="{{ in_array($roleId, [1, 2]) ? 'col-md-6' : 'col-md-12' }}">
                        <div class="detail-card passenger-card">
                            <div class="detail-icon" style="font-size:2rem;">💵</div>
                            <div class="detail-label">Total Amount</div>
                            <div class="detail-value passenger-count">
                                {{ number_format($val->total_price, 2) }}
                            </div>
                        </div>
                    </div>

                    {{-- Commission: admin (1) & agent (2) only --}}
                    @if(in_array($roleId, [1, 2]))
                    <div class="col-md-6">
                        <div class="detail-card passenger-card">
                            <div class="detail-icon" style="font-size:2rem;">📊</div>
                            <div class="detail-label">Commission</div>
                            <div class="detail-value passenger-count text-info">
                                {{ number_format($val->admin_price ?? 0, 2) }}
                            </div>
                        </div>
                    </div>
                    @endif
                </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="fas fa-sliders-h me-2"></i> Advanced Filter</h6>
            <button class="adv-filter-close" onclick="closeAdvFilter()">✕</button>
        </div>

        <form class="adv-filter-body" method="GET" action="{{ route('Booking.Reports') }}" id="advFilterForm">
            <div class="row g-3">

                <div class="col-md-6">
                    <label class="adv-filter-label">🏷️ Booking ID</label>
                    <input type="text" name="bookingid" class="adv-filter-input"
                        placeholder="Search by booking ID..." value="{{ request('bookingid') }}">
                </div>

                <div class="col-md-6">
                    <label class="adv-filter-label">👤 Customer Name</label>
                    <input type="text" name="customer_name" class="adv-filter-input"
                        placeholder="Search by customer name..." value="{{ request('customer_name') }}">
                </div>

                {{-- Supplier/Agency filter: admin (1) & agent (2) only --}}
                @if(in_array($roleId, [1, 2]))
                <div class="col-md-6">
                    <label class="adv-filter-label">🏢 Supplier / Agency</label>
                    <select name="agency_id" class="adv-filter-input">
                        <option value="">All Suppliers</option>
                        @foreach(\App\Models\Agency::orderBy('agency_name')->get() as $agency)
                            <option value="{{ $agency->id }}"
                                {{ request('agency_id') == $agency->id ? 'selected' : '' }}>
                                {{ $agency->agency_name }} ({{ $agency->agency_code }})
                            </option>
                        @endforeach
                    </select>
                </div>
                @endif

                <div class="col-md-6">
                    <label class="adv-filter-label">🔧 Service Type</label>
                    <select name="servicetype" class="adv-filter-input">
                        <option value="">All Services</option>
                        <option value="Hotel"   {{ request('servicetype') == 'Hotel'   ? 'selected' : '' }}>Hotel</option>
                        <option value="Flight"  {{ request('servicetype') == 'Flight'  ? 'selected' : '' }}>Flight</option>
                        <option value="Visa"    {{ request('servicetype') == 'Visa'    ? 'selected' : '' }}>Visa</option>
                        <option value="Package" {{ request('servicetype') == 'Package' ? 'selected' : '' }}>Package</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="adv-filter-label">📊 Booking Status</label>
                    <select name="status" class="adv-filter-input">
                        <option value="">All Statuses</option>
                        <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                        <option value="pending"   {{ request('status') == 'pending'   ? 'selected' : '' }}>Pending</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>

                {{-- Booked By filter: admin (1) only --}}
                @if($roleId === 1)
                <div class="col-md-6">
                    <label class="adv-filter-label">👥 Booked By</label>
                    <select name="bookedby" class="adv-filter-input">
                        <option value="">All Users</option>
                        <option value="1" {{ request('bookedby') == '1' ? 'selected' : '' }}>Admin</option>
                        <option value="2" {{ request('bookedby') == '2' ? 'selected' : '' }}>Agent</option>
                        <option value="3" {{ request('bookedby') == '3' ? 'selected' : '' }}>Staff</option>
                    </select>
                </div>
                @endif

                <div class="col-md-6">
                    <label class="adv-filter-label">📅 Check-In From</label>
                    <input type="date" name="fromdate" class="adv-filter-input" value="{{ request('fromdate') }}">
                </div>

                <div class="col-md-6">
                    <label class="adv-filter-label">📅 Check-In To</label>
                    <input type="date" name="todate" class="adv-filter-input" value="{{ request('todate') }}">
                </div>

            </div>
        </form>

        <div class="adv-filter-footer">
            <button class="adv-filter-reset" onclick="resetAdvFilter()">
                <i class="fas fa-undo me-1"></i> Reset
            </button>
            <button class="adv-filter-apply" onclick="document.getElementById('advFilterForm').submit()">
                <i class="fas 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-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); }
}

/* ── Supplier Badge ── */
.supplier-badge {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: #ede9fe; color: #5b21b6;
}

/* ── 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.pending.active   { background: #f57f17; border-color: #f57f17; 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; }
.pending-pill   { background: #fff8e1; color: #f57f17; }
.cancelled-pill { background: #ffebee; color: #c62828; }

/* ── Service Badge ── */
.service-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.service-hotel   { background: #e3f2fd; color: #1565c0; }
.service-flight  { background: #f3e5f5; color: #6a1b9a; }
.service-visa    { background: #e8f5e9; color: #2e7d32; }
.service-package { background: #fff8e1; color: #f57f17; }

/* ── Action Button ── */
.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 Modal Cards ── */
.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; }
.passenger-card       { border: 2px solid #eef0f8; }
.passenger-count      { font-size: 1.6rem !important; color: #1565C0 !important; line-height: 1.2; }

/* ── 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: 660px;
    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; color:#333; }
.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 allRows = Array.from(document.querySelectorAll('.booking-row'));
let currentFilter = 'all';

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_pending').textContent   = allRows.filter(r => r.dataset.status === 'pending').length;
    document.getElementById('count_cancelled').textContent = allRows.filter(r => r.dataset.status === 'cancelled').length;
}

function filterTable(filter, btn) {
    currentFilter = filter;
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const filtered = filter === 'all' ? allRows : allRows.filter(r => r.dataset.status === filter);
    allRows.forEach(r => r.style.display = 'none');
    filtered.forEach(r => r.style.display = '');
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
}

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

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

function resetAdvFilter() {
    window.location.href = '{{ route('Booking.Reports') }}';
}

/* Auto-dismiss success toast */
var successToast = document.getElementById('successToast');
if (successToast) {
    setTimeout(function () {
        successToast.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        successToast.style.opacity = '0';
        successToast.style.transform = 'translateX(60px)';
        setTimeout(() => successToast.remove(), 500);
    }, 5000);
}

/* Mark filter button active if filters are applied */
(function () {
    const params = new URLSearchParams(window.location.search);
    const filterKeys = ['bookingid','customer_name','agency_id','servicetype','status','bookedby','fromdate','todate'];
    if (filterKeys.some(k => params.get(k))) {
        document.querySelector('.adv-filter-btn').classList.add('filter-active');
    }
})();

updateCounts();
</script>

@endsection