@extends('layouts.app')

@section('content')

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

@if(session('success'))
<div id="successToast" class="hm-toast">
    <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

<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-box me-2 text-primary"></i>
                {{ $isAdmin ? 'All Packages' : 'Packages' }}
            </h3>
            <span class="dest-total-badge">{{ $packages->total() }} Total</span>
        </div>

        <div class="d-flex align-items-center gap-3 flex-wrap">
            <button class="filter-btn adv-filter-btn {{ request()->hasAny(['name','destination_id','date_from','date_to','agency_id']) ? 'filter-active' : '' }}"
                onclick="document.getElementById('advFilterModal').style.display='flex'">
                <i class="fa fa-sliders me-1"></i> Filter
                @if(request()->hasAny(['name','destination_id','date_from','date_to','agency_id']))
                    <span class="filter-count">
                        {{ collect(['name','destination_id','date_from','date_to','agency_id'])->filter(fn($k) => request()->filled($k))->count() }}
                    </span>
                @endif
            </button>

            @if(!$isAdmin)
                <a href="{{ route('holiday.packages.create') }}" class="btn btn-primary">
                    <i class="fa fa-plus me-1"></i> Add Package
                </a>
            @endif
        </div>
    </div>

    {{-- ACTIVE FILTER CHIPS --}}
    @if(request()->hasAny(['name','destination_id','date_from','date_to','agency_id']))
    <div class="px-4 pt-3 pb-1">
        <div class="d-flex flex-wrap gap-2 align-items-center">

            @if(request()->filled('name'))
            <span class="filter-chip">
                📦 Name: <strong>{{ request('name') }}</strong>
                <a href="{{ route('holiday.packages', request()->except(['name','page'])) }}" class="chip-remove">&times;</a>
            </span>
            @endif

            @if(request()->filled('agency_id') && $isAdmin)
            <span class="filter-chip">
                🏢 Agency: <strong>{{ $agencies->firstWhere('id', request('agency_id'))?->name }}</strong>
                <a href="{{ route('holiday.packages', request()->except(['agency_id','page'])) }}" class="chip-remove">&times;</a>
            </span>
            @endif

            @if(request()->filled('destination_id'))
            <span class="filter-chip">
                🗺️ Destination: <strong>{{ $destinations->firstWhere('id', request('destination_id'))?->name }}</strong>
                <a href="{{ route('holiday.packages', request()->except(['destination_id','page'])) }}" class="chip-remove">&times;</a>
            </span>
            @endif

            @if(request()->filled('date_from'))
            <span class="filter-chip">
                📅 From: <strong>{{ \Carbon\Carbon::parse(request('date_from'))->format('d M Y') }}</strong>
                <a href="{{ route('holiday.packages', request()->except(['date_from','page'])) }}" class="chip-remove">&times;</a>
            </span>
            @endif

            @if(request()->filled('date_to'))
            <span class="filter-chip">
                📅 To: <strong>{{ \Carbon\Carbon::parse(request('date_to'))->format('d M Y') }}</strong>
                <a href="{{ route('holiday.packages', request()->except(['date_to','page'])) }}" class="chip-remove">&times;</a>
            </span>
            @endif

            <a href="{{ route('holiday.packages') }}" class="chip-clear-all">
                <i class="fa fa-times me-1"></i> Clear all
            </a>
        </div>
    </div>
    @endif

    {{-- 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;">SL</th>
                    <th class="py-3">Photo</th>
                    <th class="py-3">Package Name</th>
                    <th class="py-3">Destination</th>
                    @if($isAdmin)
                        <th class="py-3">Agency</th>
                    @endif
                    <th class="py-3">Price</th>
                    <th class="py-3 text-center" style="width:130px;">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($packages as $key => $package)
                <tr>
                    <td class="px-4 text-muted">{{ $packages->firstItem() + $key }}</td>
                    <td>
                        @if($package->photo)
                            <img src="{{ asset('storage/' . $package->photo) }}"
                                width="80" style="border-radius:8px; object-fit:cover; height:55px;">
                        @else
                            <div style="width:80px; height:55px; border-radius:8px; background:#f1f3f5;
                                display:flex; align-items:center; justify-content:center; color:#bbb; font-size:11px;">
                                No photo
                            </div>
                        @endif
                    </td>
                    <td>
                        <div class="fw-bold">{{ $package->name }}</div>
                        @if($package->short_description)
                            <div class="small text-muted mt-1"
                                style="max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                {{ $package->short_description }}
                            </div>
                        @endif
                        <div class="small text-muted mt-1">
                            <i class="fa fa-calendar-alt me-1"></i>
                            {{ $package->created_at->format('d M Y') }}
                        </div>
                    </td>
                    <td>
                        @if($package->holidaydestination)
                            <span class="dest-badge">
                                <i class="fa fa-map-marker-alt me-1"></i>
                                {{ $package->holidaydestination->name }}
                            </span>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </td>
                    @if($isAdmin)
                        <td>
                            <span class="agency-badge">
                                <i class="fa fa-building me-1"></i>
                                {{ optional($package->agency)->name ?? '—' }}
                            </span>
                        </td>
                    @endif
                    <td>
                        @if($package->price_min !== null)
                            <span class="price-badge">
                                @if($package->price_max === null)
                                    ${{ number_format($package->price_min, 2) }}
                                @else
                                    ${{ number_format($package->price_min, 2) }} – ${{ number_format($package->price_max, 2) }}
                                @endif
                                <small class="text-muted">USD</small>
                            </span>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </td>
                    <td class="text-center">
                        <div class="d-flex gap-2 justify-content-center">
                            <button class="action-btn action-btn--view"
                                data-bs-toggle="modal"
                                data-bs-target="#pkgModal{{ $package->id }}" title="View">
                                <i class="fa fa-eye"></i>
                            </button>
                            @if(!$isAdmin)
                                <a href="{{ route('holiday.packages.edit', $package->id) }}"
                                class="action-btn action-btn--edit" title="Edit">
                                    <i class="fa fa-pen"></i>
                                </a>
                                <form action="{{ route('holiday.packages.delete', $package->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button class="action-btn action-btn--delete" title="Delete"
                                        onclick="return confirm('Delete this package?')">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="{{ $isAdmin ? 7 : 6 }}" class="text-center text-muted py-5">
                        <i class="fa fa-box-open fa-2x mb-2 d-block"></i>
                        @if(request()->hasAny(['name','destination_id','date_from','date_to','agency_id']))
                            No packages found matching your filters.
                            <br>
                            <a href="{{ route('holiday.packages') }}" class="btn btn-sm btn-outline-secondary mt-2">
                                <i class="fa fa-times me-1"></i> Clear Filters
                            </a>
                        @else
                            No packages added yet.
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- PAGINATION --}}
    @if($packages->hasPages())
    <div class="card-footer bg-white border-top px-4 py-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <p class="mb-0 text-muted small">
            Showing <strong>{{ $packages->firstItem() }}</strong>–<strong>{{ $packages->lastItem() }}</strong>
            of <strong>{{ $packages->total() }}</strong> packages
        </p>
        {{ $packages->onEachSide(1)->appends(request()->query())->links() }}
    </div>
    @endif

</div>


{{-- VIEW MODALS --}}
@foreach($packages as $package)
<div class="modal fade" id="pkgModal{{ $package->id }}" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">

            {{-- UNIQUE PACKAGE MODAL HEADER --}}
            <div class="pkg-modal-header">
                <div class="pkg-modal-bg-circle pkg-modal-bg-circle--1"></div>
                <div class="pkg-modal-bg-circle pkg-modal-bg-circle--2"></div>

                <div class="pkg-modal-header-inner">
                    <div class="pkg-modal-title-row">
                        <div class="pkg-modal-icon">
                            <i class="fa fa-box"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h5 class="pkg-modal-name">{{ $package->name }}</h5>
                            <div class="d-flex align-items-center gap-2 flex-wrap mt-1">
                                @if($package->holidaydestination)
                                <span class="pkg-modal-dest-tag">
                                    <i class="fa fa-map-marker-alt me-1"></i>{{ $package->holidaydestination->name }}
                                </span>
                                @endif
                                @if($package->price_min !== null)
                                <span class="pkg-modal-price-tag">
                                    💵 @if($package->price_max === null)
                                        ${{ number_format($package->price_min, 2) }}
                                    @else
                                        ${{ number_format($package->price_min, 2) }} – ${{ number_format($package->price_max, 2) }}
                                    @endif
                                </span>
                                @endif
                            </div>
                        </div>
                        <button type="button" class="btn-close btn-close-white flex-shrink-0" data-bs-dismiss="modal"></button>
                    </div>

                    {{-- Agency strip --}}
                    @if($package->agency)
                    <div class="pkg-modal-agency-strip">
                        <div class="pkg-agency-logo-wrap">
                            @if($package->agency->agency_logo)
                                <img src="{{ asset('storage/logos/' . $package->agency->agency_logo) }}"
                                    height="30" style="border-radius:4px; background:#fff; padding:2px;">
                            @else
                                <div class="pkg-agency-initial">
                                    {{ strtoupper(substr($package->agency->agency_name ?? 'A', 0, 2)) }}
                                </div>
                            @endif
                        </div>
                        <div class="pkg-agency-info-wrap">
                            <div class="pkg-agency-info-item">
                                <span class="pkg-info-key">Agency</span>
                                <span class="pkg-info-val">{{ $package->agency->agency_name }}</span>
                            </div>
                            @if($package->agency->agency_email)
                            <div class="pkg-agency-info-item">
                                <span class="pkg-info-key">Email</span>
                                <span class="pkg-info-val">{{ $package->agency->agency_email }}</span>
                            </div>
                            @endif
                            @if($package->agency->agency_phone)
                            <div class="pkg-agency-info-item">
                                <span class="pkg-info-key">Phone</span>
                                <span class="pkg-info-val">{{ $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">📅 Tour Dates</div></div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🛫</div>
                            <div class="detail-label">Start Date</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ $package->tour_start_date ? \Carbon\Carbon::parse($package->tour_start_date)->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">End Date</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ $package->tour_end_date ? \Carbon\Carbon::parse($package->tour_end_date)->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">Last Booking</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ $package->last_booking_date ? \Carbon\Carbon::parse($package->last_booking_date)->format('d M Y') : '—' }}
                            </div>
                        </div>
                    </div>
                </div>

                <table class="table table-bordered">
                    <tr><th width="180">Location</th><td>{{ $package->location ?? '—' }}</td></tr>
                    <tr><th>Payment Mode</th><td>{{ ucfirst($package->payment_type ?? '—') }}</td></tr>
                    <tr><th>Short Description</th><td>{{ $package->short_description ?? '—' }}</td></tr>
                    <tr><th>Description</th><td>{!! $package->description ?? '—' !!}</td></tr>
                    <tr><th>Itinerary</th><td>{!! $package->itinerary ?? '—' !!}</td></tr>
                    <tr><th>Policy</th><td>{!! $package->policy ?? '—' !!}</td></tr>
                    <tr><th>Terms & Conditions</th><td>{!! $package->terms_conditions ?? '—' !!}</td></tr>
                    <tr>
                        <th>Photo</th>
                        <td>@if($package->photo) <img src="{{ asset('storage/' . $package->photo) }}" width="200" style="border-radius:8px;"> @else — @endif</td>
                    </tr>
                    <tr>
                        <th>Banner</th>
                        <td>@if($package->banner) <img src="{{ asset('storage/' . $package->banner) }}" width="300" style="border-radius:8px;"> @else — @endif</td>
                    </tr>
                    <tr>
                        <th>Tour Photos</th>
                        <td>
                            @forelse($package->photos as $photo)
                                <img src="{{ asset('storage/'.$photo->photo) }}" width="100" class="me-2 mb-2" style="border-radius:6px;">
                            @empty <span class="text-muted">—</span> @endforelse
                        </td>
                    </tr>
                    <tr>
                        <th>Tour Videos</th>
                        <td>
                            @forelse($package->videos as $video)
                                <div class="mb-3">{!! $video->video_iframe !!}</div>
                            @empty <span class="text-muted">—</span> @endforelse
                        </td>
                    </tr>
                </table>
            </div>

            <div class="modal-footer border-0 px-4 pb-4 pt-0">
                <button class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                @if(!$isAdmin)
                    <a href="{{ route('holiday.packages.edit', $package->id) }}" class="btn btn-primary rounded-pill px-4">
                        <i class="fa fa-pen me-2"></i> Edit Package
                    </a>
                @endif
            </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> Filter Packages</h6>
            <button class="adv-filter-close" onclick="closeAdvFilter()">✕</button>
        </div>
        <form method="GET" action="{{ route('holiday.packages') }}">
            <div class="adv-filter-body">

                <div class="mb-3">
                    <label class="adv-filter-label">📦 Package Name</label>
                    <input type="text" name="name" class="adv-filter-input"
                        placeholder="Search by package name..." value="{{ request('name') }}">
                </div>

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

                <div class="mb-3">
                    <label class="adv-filter-label">🗺️ Destination</label>
                    <select name="destination_id" class="adv-filter-input adv-filter-select">
                        <option value="">All Destinations</option>
                        @foreach($destinations as $destination)
                            <option value="{{ $destination->id }}" {{ request('destination_id') == $destination->id ? 'selected' : '' }}>
                                {{ $destination->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-1">
                    <label class="adv-filter-label">📅 Added 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" name="date_from" class="adv-filter-input" value="{{ request('date_from') }}">
                        </div>
                        <div style="flex:1;">
                            <label style="font-size:11px; color:#aaa; margin-bottom:4px; display:block;">To</label>
                            <input type="date" name="date_to" class="adv-filter-input" value="{{ request('date_to') }}">
                        </div>
                    </div>
                </div>

            </div>
            <div class="adv-filter-footer">
                <a href="{{ route('holiday.packages') }}" class="adv-filter-reset">
                    <i class="fa fa-rotate-left me-1"></i> Reset
                </a>
                <button type="submit" class="adv-filter-apply">
                    <i class="fa fa-check me-1"></i> Apply Filter
                </button>
            </div>
        </form>
    </div>
</div>


<style>
/* ── Toast ── */
.hm-toast { position:fixed; bottom:30px; right:30px; background:linear-gradient(135deg,#1b5e20,#2e7d32); color:#fff; 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; }
.toast-icon { font-size:1.4rem; 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);} }

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

/* ── Badges ── */
.price-badge { font-weight:700; color:#1a6e2e; font-size:14px; }
.dest-badge  { display:inline-block; background:#e8f5e9; color:#2e7d32; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.agency-badge { display:inline-block; background:#e3f2fd; color:#1565c0; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }

/* ── Filter button ── */
.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; }
.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; }
.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(.filter-active) .filter-count { background:#eee; color:#555; }

/* ── Filter chips ── */
.filter-chip { display:inline-flex; align-items:center; gap:6px; background:#e8f0fe; color:#1a56c4; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:500; }
.chip-remove { color:#1a56c4; text-decoration:none; font-size:14px; opacity:0.7; }
.chip-remove:hover { opacity:1; color:#c62828; }
.chip-clear-all { color:#c62828; text-decoration:none; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; }
.chip-clear-all:hover { background:#ffebee; }

/* ── 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; text-decoration:none; transition:transform 0.15s ease, box-shadow 0.15s ease, background 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; }
.action-btn--delete { background:#ffebee; color:#c62828; }
.action-btn--delete:hover { background:#c62828; color:#fff; }

/* ── Detail cards in modal body ── */
.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; }

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

/* ════════════════════════════════════════
   PACKAGE MODAL HEADER — Unique Dark Teal
   ════════════════════════════════════════ */
.pkg-modal-header {
    position: relative;
    background: linear-gradient(135deg, #0d2137 0%, #0f3554 60%, #1a5276 100%);
   
}

.pkg-modal-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.pkg-modal-bg-circle--1 {
    width: 180px; height: 180px;
    top: -60px; right: -40px;
    background: rgba(255,255,255,0.04);
}
.pkg-modal-bg-circle--2 {
    width: 100px; height: 100px;
    bottom: -30px; left: 20%;
    background: rgba(100,181,246,0.1);
}

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

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

.pkg-modal-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(100,181,246,0.2);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: #90caf9;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

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

.pkg-modal-dest-tag {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    color: #b3e5fc;
    font-size: 11px; font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
}

.pkg-modal-price-tag {
    display: inline-block;
    background: rgba(67,160,71,0.25);
    color: #a5d6a7;
    font-size: 11px; font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(165,214,167,0.3);
}

/* Agency strip */
.pkg-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;
}

.pkg-agency-logo-wrap { flex-shrink: 0; }

.pkg-agency-initial {
    width: 36px; height: 36px;
    background: rgba(100,181,246,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #90caf9; font-size: 12px; font-weight: 800;
}

.pkg-agency-info-wrap { display:flex; gap:24px; flex-wrap:wrap; }

.pkg-agency-info-item { display:flex; flex-direction:column; gap:1px; }

.pkg-info-key {
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: rgba(255,255,255,0.35);
}

.pkg-info-val {
    font-size: 13px; font-weight: 600;
    color: #e1f5fe;
}

/* ── 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; 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; box-sizing:border-box; }
.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; text-decoration:none; display:inline-flex; align-items:center; }
.adv-filter-reset:hover { background:#e9ecef; }
</style>

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

var toast = document.querySelector('.hm-toast');
if (toast) {
    setTimeout(function () {
        toast.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        toast.style.opacity = '0';
        toast.style.transform = 'translateX(60px)';
        setTimeout(function () { toast.remove(); }, 500);
    }, 4000);
}
</script>

@endsection