@extends('layouts.app')

@section('content')

{{-- ── SUCCESS TOAST ── --}}
@if(session('success'))
<div id="successToast" class="pkg-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">

    {{-- ── CARD 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="fa fa-box me-2 text-primary"></i> View Packages
        </h3>

        <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']) ? 'filter-active' : '' }}"
                onclick="document.getElementById('advFilterModal').style.display='flex'"
                title="Filter Packages">
                <i class="fa fa-sliders me-1"></i> Filter
                @if(request()->hasAny(['name','destination_id','date_from','date_to']))
                    <span class="filter-count">
                        {{ collect(['name','destination_id','date_from','date_to'])->filter(fn($k) => request()->filled($k))->count() }}
                    </span>
                @endif
            </button>

            <span class="badge text-white bg-primary fs-6 px-3 py-2">
                {{ $packages->total() }} Total
            </span>

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


    {{-- ── ACTIVE FILTER CHIPS ── --}}
    @if(request()->hasAny(['name','destination_id','date_from','date_to']))
    <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="{{ request()->fullUrlWithQuery(['name' => null, 'page' => 1]) }}" 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="{{ request()->fullUrlWithQuery(['destination_id' => null, 'page' => 1]) }}" 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="{{ request()->fullUrlWithQuery(['date_from' => null, 'page' => 1]) }}" 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="{{ request()->fullUrlWithQuery(['date_to' => null, 'page' => 1]) }}" class="chip-remove">&times;</a>
            </span>
            @endif

            <a href="{{ route('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>
                    <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:240px; 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>
                            Added {{ $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>

                    <td>
                        @if($package->price)
                            <span class="price-badge">
                                ${{ number_format($package->price, 2) }}
                                <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="#packageModal{{ $package->id }}"
                                title="View Details">
                                <i class="fa fa-eye"></i>
                            </button>

                            <a href="{{ route('packages.edit', $package->id) }}"
                               class="action-btn action-btn--edit" title="Edit">
                                <i class="fa fa-pen"></i>
                            </a>

                            <form action="{{ route('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>

                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="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']))
                            No packages found matching your filters.
                            <br>
                            <a href="{{ route('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> package{{ $packages->total() !== 1 ? 's' : '' }}
        </p>
        {{ $packages->onEachSide(1)->links() }}
    </div>
    @endif

</div>


{{-- ── VIEW DETAILS MODALS ── --}}
@foreach($packages as $package)
<div class="modal fade" id="packageModal{{ $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;">

            <div class="modal-header border-0 py-4 px-4 text-white"
                 style="background: linear-gradient(135deg, #1565C0, #1976D2);">
                <div>
                    <h5 class="modal-title fw-bold mb-1">
                        <i class="fa fa-box me-2"></i> Package Details
                    </h5>
                    <div class="small opacity-75">{{ $package->name }}</div>
                </div>
                <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal"></button>
            </div>

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

                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">📦 Package Information</div></div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🏷️</div>
                            <div class="detail-label">Package Name</div>
                            <div class="detail-value" style="font-size:13px;">{{ $package->name }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🗺️</div>
                            <div class="detail-label">Destination</div>
                            <div class="detail-value" style="font-size:13px;">{{ $package->holidaydestination->name ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">💵</div>
                            <div class="detail-label">Price</div>
                            <div class="detail-value" style="color:#1a6e2e;">
                                @if($package->price)
                                    ${{ number_format($package->price, 2) }}
                                    <small style="font-size:11px; color:#888; font-weight:400;"> USD/person</small>
                                @else —
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <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 Date</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>Map</th><td>{!! $package->map ?? '—' !!}</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="120" 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 type="button" class="btn btn-outline-secondary rounded-pill px-4"
                    data-bs-dismiss="modal">Close</button>
                <a href="{{ route('packages.edit', $package->id) }}" class="btn btn-primary rounded-pill px-4">
                    <i class="fa fa-pen me-2"></i> Edit Package
                </a>
            </div>

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


{{-- ── ADVANCED FILTER MODAL ── --}}
{{-- Same template / classes as enquiries page AdvFilter --}}
<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('packages') }}">
            <div class="adv-filter-body">

                {{-- Package Name --}}
                <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>

                {{-- Destination --}}
                <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>

                {{-- Date Range --}}
                <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('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 ── */
.pkg-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; 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); }
}

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

/* ── 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;
}
.filter-btn:hover { border-color: #1976D2; color: #1976D2; }
.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; line-height: 1; }
.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; transition: background 0.15s;
}
.chip-clear-all:hover { background: #ffebee; }

/* ── Advanced filter modal — identical to enquiries page ── */
#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; line-height:1; }
.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; color:#333; }

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

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

/* ── 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>
function closeAdvFilter() {
    document.getElementById('advFilterModal').style.display = 'none';
}

var toast = document.getElementById('successToast');
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