@extends('layouts.app')

@section('content')

@php $isAdmin = optional(auth()->user()->role)->role_name === 'admin'; @endphp

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


<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">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <h3 class="mb-0">
                <i class="fa fa-envelope me-2 text-primary"></i>
                {{ $isAdmin ? 'All Package Enquiries' : 'Package Enquiries' }}
            </h3>
            <span class="dest-total-badge" id="totalBadge">{{ $enquiries->total() }} Total</span>
        </div>

        <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 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'">
                    <i class="fa fa-sliders me-1"></i> Filter
                </button>
            </div>
        </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:60px;">S.No</th>
                    <th class="py-3">Package</th>
                    @if($isAdmin)
                        <th class="py-3">Agency</th>
                    @endif
                    <th class="py-3">Name</th>
                    <th class="py-3">Phone</th>
                    <th class="py-3 text-center">Status</th>
                    @if(!$isAdmin)
                    <th class="py-3 text-center" style="width:120px;">Actions</th>
                    @endif
                </tr>
            </thead>
            <tbody id="enquiryTableBody">
                @forelse($enquiries as $key => $enquiry)
                <tr class="enquiry-row"
                    data-status="{{ $enquiry->status }}"
                    data-name="{{ strtolower($enquiry->full_name) }}"
                    data-email="{{ strtolower($enquiry->email) }}"
                    data-phone="{{ $enquiry->phone }}"
                    data-travel-start="{{ $enquiry->travel_start_date }}"
                    data-travel-end="{{ $enquiry->travel_end_date }}"
                    data-agency="{{ strtolower(optional(optional($enquiry->package)->agency)->name ?? '') }}">

                    <td class="px-4 text-muted row-sno">{{ $enquiries->firstItem() + $key }}</td>

                    <td>
                        <div class="fw-bold" style="max-width:220px;">{{ optional($enquiry->package)->name ?? '—' }}</div>
                        <div class="small text-muted mt-1">
                            <i class="fa fa-calendar me-1"></i>
                            {{ \Carbon\Carbon::parse($enquiry->travel_start_date)->format('d M Y') }}
                            @if($enquiry->travel_end_date)
                                → {{ \Carbon\Carbon::parse($enquiry->travel_end_date)->format('d M Y') }}
                            @endif
                        </div>
                    </td>

                    @if($isAdmin)
                    <td>
                        <span class="agency-badge">
                            <i class="fa fa-building me-1"></i>
                            {{ optional(optional($enquiry->package)->agency)->name ?? '—' }}
                        </span>
                    </td>
                    @endif

                    <td>
                        <div class="fw-semibold">{{ $enquiry->full_name }}</div>
                        <div class="small text-muted">{{ $enquiry->email }}</div>
                    </td>

                    <td><span class="fw-semibold">{{ $enquiry->phone }}</span></td>

                    <td class="text-center">
                        @if($enquiry->status == 'confirmed')
                            <span class="status-pill confirmed-pill">✅ Confirmed</span>
                        @elseif($enquiry->status == 'cancelled')
                            <span class="status-pill cancelled-pill">❌ Cancelled</span>
                        @else
                            <span class="status-pill pending-pill">⏳ Pending</span>
                        @endif
                    </td>
                    
                    <td class="text-center">
                        <div class="d-flex gap-2 justify-content-center">
                            <button class="action-btn action-btn--view" title="View Details"
                                onclick="openViewModal({{ $enquiry->id }})">
                                <i class="fa fa-eye"></i>
                            </button>
                            @if(!$isAdmin)
                            <button class="action-btn action-btn--edit" title="Change Status"
                                onclick="openEditModal({{ $enquiry->id }}, '{{ $enquiry->status }}', '{{ addslashes($enquiry->full_name) }}')">
                                <i class="fa fa-pen"></i>
                            </button>
                            @endif
                        </div>
                    </td>
                    
                </tr>
                @empty
                <tr>
                    <td colspan="{{ $isAdmin ? 7 : 6 }}" class="text-center text-muted py-5">
                        <i class="fa fa-inbox fa-2x mb-2 d-block"></i>
                        No enquiries received yet.
                    </td>
                </tr>
                @endforelse
            </tbody>

            <tfoot>
                <tr>
                    <td colspan="{{ $isAdmin ? 6 : 7 }}" class="px-4 py-3">
                        {{ $enquiries->onEachSide(1)->links() }}
                    </td>
                </tr>
            </tfoot>
        </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 enquiries found for this filter.</p>
        </div>
    </div>

</div>


{{-- VIEW DETAILS MODALS --}}
@foreach($enquiries as $enquiry)
<div class="modal fade" id="viewModal{{ $enquiry->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;">

            {{-- UNIQUE ENQUIRY MODAL HEADER --}}
            <div class="enq-modal-header">
                {{-- Background decoration --}}
                <div class="enq-modal-deco enq-modal-deco--1"></div>
                <div class="enq-modal-deco enq-modal-deco--2"></div>

                <div class="enq-modal-header-inner">
                    {{-- Title row --}}
                    <div class="enq-modal-title-row">
                        <div class="enq-modal-icon">
                            <i class="fa fa-user-circle"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h5 class="enq-modal-title">Enquiry Details</h5>
                            <div class="enq-modal-package-name">
                                {{ optional($enquiry->package)->name ?? '—' }}
                            </div>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            @if($enquiry->status == 'confirmed')
                                <span class="enq-status-badge enq-status--confirmed">✅ Confirmed</span>
                            @elseif($enquiry->status == 'cancelled')
                                <span class="enq-status-badge enq-status--cancelled">❌ Cancelled</span>
                            @else
                                <span class="enq-status-badge enq-status--pending">⏳ Pending</span>
                            @endif
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                    </div>

                    {{-- Agency strip - always show if isAdmin, else skip --}}
                    @if($enquiry->package && $enquiry->package->agency)
                    <div class="enq-modal-agency-strip">
                        <div class="enq-agency-logo">
                            @if($enquiry->package->agency->agency_logo)
                                <img src="{{ asset('storage/logos/' . $enquiry->package->agency->agency_logo) }}"
                                    height="30" style="border-radius:4px; background:#fff; padding:2px;">
                            @else
                                <div class="enq-agency-initial">
                                    {{ strtoupper(substr($enquiry->package->agency->agency_name ?? 'A', 0, 2)) }}
                                </div>
                            @endif
                        </div>
                        <div class="enq-agency-info">
                            <div class="enq-agency-item">
                                <span class="enq-info-key">Agency</span>
                                <span class="enq-info-val">{{ $enquiry->package->agency->agency_name }}</span>
                            </div>
                            @if($enquiry->package->agency->agency_email)
                            <div class="enq-agency-item">
                                <span class="enq-info-key">Email</span>
                                <span class="enq-info-val">{{ $enquiry->package->agency->agency_email }}</span>
                            </div>
                            @endif
                            @if($enquiry->package->agency->agency_phone)
                            <div class="enq-agency-item">
                                <span class="enq-info-key">Phone</span>
                                <span class="enq-info-val">{{ $enquiry->package->agency->agency_phone }}</span>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endif
                </div>
            </div>

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

                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">👤 Traveller 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">{{ $enquiry->full_name }}</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:13px;">{{ $enquiry->email }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">📞</div>
                            <div class="detail-label">Phone</div>
                            <div class="detail-value">{{ $enquiry->phone }}</div>
                        </div>
                    </div>
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">✈️ Travel Details</div></div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">📅</div>
                            <div class="detail-label">Travel Date</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ \Carbon\Carbon::parse($enquiry->travel_start_date)->format('d M Y') }}
                                @if($enquiry->travel_end_date)
                                    <br><span class="text-muted" style="font-size:12px;">→ {{ \Carbon\Carbon::parse($enquiry->travel_end_date)->format('d M Y') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🏨</div>
                            <div class="detail-label">Package</div>
                            <div class="detail-value" style="font-size:13px;">{{ optional($enquiry->package)->name ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🕐</div>
                            <div class="detail-label">Received On</div>
                            <div class="detail-value" style="font-size:13px;">{{ $enquiry->created_at->format('d M Y, h:i A') }}</div>
                        </div>
                    </div>
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">👨‍👩‍👧‍👦 Passengers</div></div>
                    <div class="col-md-4">
                        <div class="detail-card passenger-card">
                            <div class="detail-icon" style="font-size:2rem;">🧑</div>
                            <div class="detail-label">Adults</div>
                            <div class="detail-value passenger-count">{{ $enquiry->adults }}</div>
                            <div class="detail-sub">12+ years</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card passenger-card">
                            <div class="detail-icon" style="font-size:2rem;">🧒</div>
                            <div class="detail-label">Children</div>
                            <div class="detail-value passenger-count">{{ $enquiry->children }}</div>
                            <div class="detail-sub">Age 2–12</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card passenger-card">
                            <div class="detail-icon" style="font-size:2rem;">👶</div>
                            <div class="detail-label">Infants</div>
                            <div class="detail-value passenger-count">{{ $enquiry->infants }}</div>
                            <div class="detail-sub">Below 2 yrs</div>
                        </div>
                    </div>
                </div>

                @if($enquiry->message)
                <div class="mb-2">
                    <div class="detail-section-label">💬 Special Requirements</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;">
                        {{ $enquiry->message }}
                    </div>
                </div>
                @endif

            </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>
                <button type="button" class="btn btn-primary rounded-pill px-4"
                    onclick="bootstrap.Modal.getInstance(document.getElementById('viewModal{{ $enquiry->id }}')).hide(); openEditModal({{ $enquiry->id }}, '{{ $enquiry->status }}', '{{ addslashes($enquiry->full_name) }}')">
                    <i class="fa fa-pen me-2"></i> Change Status
                </button>
            </div>
        </div>
    </div>
</div>
@endforeach


{{-- EDIT STATUS MODAL --}}
<div class="modal fade" id="editStatusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">
            <div class="modal-header border-0 py-4 px-4" style="background:linear-gradient(135deg,#1a1a2e,#16213e);">
                <div>
                    <h5 class="modal-title text-white fw-bold mb-1"><i class="fa fa-pen me-2"></i> Update Booking Status</h5>
                    <div class="small text-white opacity-50" id="editModalSubtitle"></div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <form id="editStatusForm" method="POST">
                    @csrf
                    <label class="status-option-card mb-3" id="card_confirmed">
                        <input type="radio" name="status" value="confirmed" class="status-radio" id="status_confirmed">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#e8f5e9; color:#2e7d32;">✅</div>
                            <div>
                                <div class="fw-bold" style="color:#2e7d32;">Booking Confirmed</div>
                                <div class="small text-muted">Approve and confirm this booking</div>
                            </div>
                        </div>
                    </label>
                    <label class="status-option-card mb-3" id="card_pending">
                        <input type="radio" name="status" value="pending" class="status-radio" id="status_pending">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#fff8e1; color:#f57f17;">⏳</div>
                            <div>
                                <div class="fw-bold" style="color:#f57f17;">Pending</div>
                                <div class="small text-muted">Keep this booking under review</div>
                            </div>
                        </div>
                    </label>
                    <label class="status-option-card mb-3" id="card_cancelled">
                        <input type="radio" name="status" value="cancelled" class="status-radio" id="status_cancelled">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#ffebee; color:#c62828;">❌</div>
                            <div>
                                <div class="fw-bold" style="color:#c62828;">Cancel Booking</div>
                                <div class="small text-muted">Cancel and reject this booking</div>
                            </div>
                        </div>
                    </label>
                    <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill fw-bold mt-2">
                        <i class="fa fa-save me-2"></i> Save Status
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>


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

            @if($isAdmin)
            <div class="mb-3">
                <label class="adv-filter-label">🏢 Agency</label>
                <select id="flt_agency" class="adv-filter-input adv-filter-select">
                    <option value="">All Agencies</option>
                    @foreach($agencies as $agency)
                        <option value="{{ strtolower($agency->name) }}">{{ $agency->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif

            <div class="mb-3">
                <label class="adv-filter-label">👤 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>
            <div class="mb-3">
                <label class="adv-filter-label">📞 Mobile Number</label>
                <input type="text" id="flt_phone" class="adv-filter-input" placeholder="Search by phone...">
            </div>
            <div class="mb-1">
                <label class="adv-filter-label">📅 Travel 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_start_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_start_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>
/* ── Total badge ── */
.dest-total-badge { display:inline-flex; align-items:center; background:linear-gradient(135deg,#1565C0,#1976D2); color:#fff; font-size:12px; font-weight:700; padding:4px 14px; border-radius:20px; letter-spacing:0.3px; }

/* ── Toast ── */
.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-confirmed { background:linear-gradient(135deg,#1b5e20,#2e7d32); }
.toast-pending   { background:linear-gradient(135deg,#e65100,#f57f17); }
.toast-cancelled { background:linear-gradient(135deg,#b71c1c,#c62828); }
.toast-icon { font-size:1.5rem; 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; }
.toast-close { background:none; border:none; color:#fff; cursor:pointer; opacity:0.7; font-size:14px; margin-left:8px; padding:0; }
@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.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; }
.adv-filter-btn { border-color:#6c757d !important; color:#6c757d !important; }
.adv-filter-btn:hover { border-color:#343a40 !important; color:#343a40 !important; background:#f8f9fa !important; }

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

/* ── Agency badge in table ── */
.agency-badge { display:inline-block; background:#e3f2fd; color:#1565c0; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }

/* ── 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; }
.action-btn--edit  { background:#e3f2fd; color:#1565c0; }
.action-btn--edit:hover  { background:#1565c0; color:#fff; }

/* ── Detail 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:2rem !important; color:#1565C0 !important; line-height:1; }
.detail-sub { font-size:11px; color:#aaa; margin-top:4px; }

/* ── Status option cards ── */
.status-option-card { display:block; border:2px solid #eee; border-radius:12px; padding:14px 16px; cursor:pointer; transition:all 0.2s; }
.status-option-card:hover { border-color:#1976D2; background:#f0f7ff; }
.status-option-card.selected-confirmed { border-color:#2e7d32 !important; background:#f1f8f1 !important; }
.status-option-card.selected-pending   { border-color:#f57f17 !important; background:#fffde7 !important; }
.status-option-card.selected-cancelled { border-color:#c62828 !important; background:#fff5f5 !important; }
.status-radio { display:none; }
.status-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }

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

/* ════════════════════════════════════════
   ENQUIRY MODAL HEADER — Unique Green-Dark
   ════════════════════════════════════════ */
.enq-modal-header {
    position: relative;
    background: linear-gradient(135deg, #1a2e1a 0%, #1b3a20 50%, #0d4a2e 100%);
    overflow: hidden;
}

.enq-modal-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.enq-modal-deco--1 {
    width: 160px; height: 160px;
    top: -50px; right: -30px;
    background: rgba(255,255,255,0.04);
}
.enq-modal-deco--2 {
    width: 90px; height: 90px;
    bottom: -25px; left: 25%;
    background: rgba(76,175,80,0.12);
}

.enq-modal-header-inner {
    padding: 20px 24px 0 24px;
    position: relative;
    z-index: 1;
}

.enq-modal-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 16px;
}

.enq-modal-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(76,175,80,0.25);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: #a5d6a7;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.enq-modal-title {
    font-size: 17px; font-weight: 700;
    color: #fff; margin: 0;
}

.enq-modal-package-name {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
}

/* Status badge inside modal header */
.enq-status-badge {
    font-size: 11px; font-weight: 700;
    padding: 4px 12px; border-radius: 20px;
}
.enq-status--confirmed { background: rgba(76,175,80,0.25); color: #a5d6a7; border:1px solid rgba(165,214,167,0.3); }
.enq-status--pending   { background: rgba(255,152,0,0.25);  color: #ffcc80; border:1px solid rgba(255,204,128,0.3); }
.enq-status--cancelled { background: rgba(244,67,54,0.25);  color: #ef9a9a; border:1px solid rgba(239,154,154,0.3); }

/* Agency strip */
.enq-modal-agency-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 12px 0;
    margin: 0 -6px;
    padding-left: 6px;
}

.enq-agency-logo { flex-shrink: 0; }

.enq-agency-initial {
    width: 36px; height: 36px;
    background: rgba(76,175,80,0.25);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #a5d6a7; font-size: 12px; font-weight: 800;
}

.enq-agency-info { display:flex; gap:24px; flex-wrap:wrap; }
.enq-agency-item { display:flex; flex-direction:column; gap:1px; }
.enq-info-key { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,0.35); }
.enq-info-val { font-size:13px; font-weight:600; color:#e8f5e9; }

/* ── Adv filter modal ── */
#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-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-select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.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; }
</style>


<script>
let allRows       = Array.from(document.querySelectorAll('.enquiry-row'));
let filtered      = allRows;
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');
    filtered = filter === 'all' ? allRows : allRows.filter(r => r.dataset.status === filter);
    allRows.forEach(r => r.style.display = 'none');
    filtered.forEach((r, i) => { r.style.display = ''; r.querySelector('.row-sno').textContent = i + 1; });
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
}

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

function openEditModal(id, currentStatus, name) {
    document.getElementById('editStatusForm').dataset.id = id;
    document.getElementById('editModalSubtitle').textContent = 'Updating status for: ' + name;
    ['confirmed','pending','cancelled'].forEach(s => {
        document.getElementById('card_' + s).classList.remove('selected-confirmed','selected-pending','selected-cancelled');
    });
    const radio = document.getElementById('status_' + currentStatus);
    if (radio) { radio.checked = true; document.getElementById('card_' + currentStatus).classList.add('selected-' + currentStatus); }
    new bootstrap.Modal(document.getElementById('editStatusModal')).show();
}

document.getElementById('editStatusForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const id     = this.dataset.id;
    const status = this.querySelector('input[name="status"]:checked')?.value;
    const token  = this.querySelector('input[name="_token"]').value;
    if (!status) { alert('Please select a status.'); return; }

    fetch('{{ route("holiday.enquiries.status", ":id") }}'.replace(':id', id), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token },
        body: JSON.stringify({ status: status }),
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('editStatusModal')).hide();
            allRows.forEach(row => {
                if (row.innerHTML.includes(`openEditModal(${id},`)) {
                    row.dataset.status = status;
                    const pill = row.querySelector('.status-pill');
                    if (pill) {
                        pill.className = 'status-pill';
                        if (status === 'confirmed') { pill.className += ' confirmed-pill'; pill.textContent = '✅ Confirmed'; }
                        else if (status === 'cancelled') { pill.className += ' cancelled-pill'; pill.textContent = '❌ Cancelled'; }
                        else { pill.className += ' pending-pill'; pill.textContent = '⏳ Pending'; }
                        row.querySelector('.action-btn--edit').setAttribute('onclick',
                            `openEditModal(${id}, '${status}', '${data.name.replace(/'/g,"\\'")}')` );
                    }
                }
            });
            updateCounts();
            filterTable(currentFilter, document.querySelector('.filter-btn.active'));
            showToast(status, data.name);
        }
    });
});

function showToast(status, name) {
    document.querySelectorAll('.status-toast').forEach(t => t.remove());
    const configs = {
        confirmed: { cls:'toast-confirmed', icon:'🎉', title:'Booking Confirmed!', msg:`${name}'s booking confirmed.` },
        cancelled: { cls:'toast-cancelled', icon:'❌', title:'Booking Cancelled',   msg:`${name}'s booking cancelled.` },
        pending:   { cls:'toast-pending',   icon:'⏳', title:'Marked as Pending',   msg:`${name}'s booking set to pending.` },
    };
    const c = configs[status]; if (!c) return;
    const toast = document.createElement('div');
    toast.className = `status-toast ${c.cls}`;
    toast.innerHTML = `<span class="toast-icon">${c.icon}</span><div><div class="toast-title">${c.title}</div><div class="toast-msg">${c.msg}</div></div><button onclick="this.parentElement.remove()" class="toast-close">✕</button>`;
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        toast.style.opacity = '0'; toast.style.transform = 'translateX(60px)';
        setTimeout(() => toast.remove(), 500);
    }, 5000);
}

document.querySelectorAll('.status-radio').forEach(function(radio) {
    radio.addEventListener('change', function() {
        ['confirmed','pending','cancelled'].forEach(s => {
            document.getElementById('card_' + s).classList.remove('selected-confirmed','selected-pending','selected-cancelled');
        });
        document.getElementById('card_' + this.value).classList.add('selected-' + this.value);
    });
});

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

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

function resetAdvFilter() {
    ['flt_name','flt_email','flt_phone','flt_start_from','flt_start_to'].forEach(id => {
        var el = document.getElementById(id); if(el) el.value='';
    });
    var fltAgency = document.getElementById('flt_agency'); if(fltAgency) fltAgency.value='';
    filtered = currentFilter === 'all' ? allRows : allRows.filter(r => r.dataset.status === currentFilter);
    allRows.forEach(r => r.style.display='none');
    filtered.forEach((r,i) => { r.style.display=''; r.querySelector('.row-sno').textContent=i+1; });
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
    closeAdvFilter();
}

function applyAdvFilter() {
    const name      = document.getElementById('flt_name')?.value.trim().toLowerCase() || '';
    const email     = document.getElementById('flt_email')?.value.trim().toLowerCase() || '';
    const phone     = document.getElementById('flt_phone')?.value.trim().toLowerCase() || '';
    const startFrom = document.getElementById('flt_start_from')?.value || '';
    const startTo   = document.getElementById('flt_start_to')?.value || '';
    const agency    = document.getElementById('flt_agency')?.value || '';

    let base = currentFilter === 'all' ? allRows : allRows.filter(r => r.dataset.status === currentFilter);
    filtered = base.filter(row => {
        let pass = true;
        if (name      && !(row.dataset.name||'').includes(name))    pass = false;
        if (email     && !(row.dataset.email||'').includes(email))  pass = false;
        if (phone     && !(row.dataset.phone||'').includes(phone))  pass = false;
        if (agency    && !(row.dataset.agency||'').includes(agency)) pass = false;
        const ts = row.dataset.travelStart || '';
        if (startFrom && ts && ts < startFrom) pass = false;
        if (startTo   && ts && ts > startTo)   pass = false;
        return pass;
    });

    allRows.forEach(r => r.style.display='none');
    filtered.forEach((r,i) => { r.style.display=''; r.querySelector('.row-sno').textContent=i+1; });
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
    closeAdvFilter();
}

updateCounts();
</script>

@endsection