@extends('layouts.app')

@section('title', 'Ventes urgentes')

@section('content')
@php
    $flashMessage = session('success')
        ?? session('info')
        ?? (session('urgent_sale_just_created')
            ? 'Annonce créée avec succès. Vous pouvez maintenant gérer les demandes et ajuster votre stock.'
            : null);

    $filterValues = collect([
        request('status'),
        request('category'),
        request('subcategory'),
        request('condition'),
        request('sort') !== 'created_at_desc' ? request('sort') : null,
    ])->filter(fn ($value) => !is_null($value) && $value !== '');

    $hasActiveFilters = $filterValues->isNotEmpty();
    $activeFilterCount = $filterValues->count();
@endphp

<div class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(254,226,226,0.92),_rgba(255,255,255,0.96)_52%),linear-gradient(180deg,#fff7ed_0%,#fff1f2_58%,#ffffff_100%)] pb-24">
    @php
        $statusTabs = [
            ['value' => '', 'label' => 'Toutes', 'count' => $stats['total'] ?? 0],
            ['value' => 'active', 'label' => 'Actives', 'count' => $stats['active'] ?? 0],
            ['value' => 'sold', 'label' => 'Vendues', 'count' => $stats['sold'] ?? 0],
            ['value' => 'withdrawn', 'label' => 'Retirées', 'count' => $stats['withdrawn'] ?? 0],
        ];

        $needsReviewCount = ($stats['reported'] ?? 0) + ($stats['blocked'] ?? 0);
    @endphp

    <div class="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
        @if($flashMessage)
            <div class="mb-4 rounded-[22px] border border-red-200 bg-white px-4 py-3 shadow-sm">
                <div class="flex items-start gap-3">
                    <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-red-50 text-red-600">
                        <i class="fas fa-check text-sm"></i>
                    </span>
                    <div class="min-w-0">
                        <p class="text-sm font-semibold text-slate-900">Mise à jour enregistrée</p>
                        <p class="mt-1 text-sm leading-6 text-slate-600">{{ $flashMessage }}</p>
                    </div>
                </div>
            </div>
        @endif

        <section class="overflow-hidden rounded-[28px] border border-white/80 bg-white/90 shadow-[0_28px_70px_rgba(15,23,42,0.08)] backdrop-blur">
            <div class="border-b border-red-100/80 px-4 py-4 sm:px-6 sm:py-5">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                    <div class="min-w-0">
                        <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-red-500">Boutique prestataire</p>
                        <div class="mt-2 flex flex-col gap-1 sm:flex-row sm:items-end sm:gap-3">
                            <h1 class="text-2xl font-black tracking-tight text-slate-900 sm:text-3xl">Ventes urgentes</h1>
                            <span class="text-sm font-medium text-slate-500">{{ $stats['total'] ?? 0 }} annonce(s) au total</span>
                        </div>
                        <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-600">
                            Suivez les demandes, ajustez vos annonces et gardez une vue nette sur le stock sans perdre d'espace.
                        </p>
                    </div>

                    <div class="grid w-full gap-2 sm:grid-cols-2 lg:w-auto lg:min-w-[520px] xl:grid-cols-3">
                        <a href="{{ route('prestataire.reservations.index') }}" class="inline-flex items-center justify-center rounded-full border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700 transition hover:bg-red-100">
                            <i class="fas fa-calendar-check mr-2 text-xs"></i>Réservations
                            <span class="ml-2 inline-flex min-w-[1.55rem] items-center justify-center rounded-full bg-white px-2 py-0.5 text-[11px] font-black text-red-600">
                                {{ $stats['reservations_pending'] ?? 0 }}
                            </span>
                        </a>
                        <a href="{{ route('prestataire.urgent-sales.select-inventory') }}" class="inline-flex items-center justify-center rounded-full border border-slate-200 bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200">
                            <i class="fas fa-boxes mr-2 text-xs"></i>Depuis inventaire
                        </a>
                        <a href="{{ route('prestataire.urgent-sales.create') }}" class="inline-flex items-center justify-center rounded-full bg-red-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-red-700">
                            <i class="fas fa-plus mr-2 text-xs"></i>Nouvelle annonce
                        </a>
                    </div>
                </div>

                <div class="mt-4 flex flex-wrap gap-2">
                    <span class="inline-flex items-center gap-2 rounded-full border border-red-100 bg-red-50 px-3 py-2 text-xs font-semibold text-red-700">
                        <i class="fas fa-tag text-[11px]"></i>{{ $stats['total'] ?? 0 }} total
                    </span>
                    <span class="inline-flex items-center gap-2 rounded-full border border-emerald-100 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-700">
                        <i class="fas fa-circle-check text-[11px]"></i>{{ $stats['active'] ?? 0 }} actives
                    </span>
                    <span class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-semibold text-slate-700">
                        <i class="fas fa-bag-shopping text-[11px]"></i>{{ $stats['sold'] ?? 0 }} vendues
                    </span>
                    <span class="inline-flex items-center gap-2 rounded-full border border-red-100 bg-red-50 px-3 py-2 text-xs font-semibold text-red-700">
                        <i class="fas fa-comments text-[11px]"></i>{{ number_format($stats['total_contacts'] ?? 0, 0, ',', ' ') }} contact(s)
                    </span>
                    <span class="inline-flex items-center gap-2 rounded-full border border-orange-100 bg-orange-50 px-3 py-2 text-xs font-semibold text-orange-700">
                        <i class="fas fa-eye text-[11px]"></i>{{ number_format($stats['total_views'] ?? 0, 0, ',', ' ') }} vues
                    </span>
                    @if($needsReviewCount > 0)
                        <span class="inline-flex items-center gap-2 rounded-full border border-amber-100 bg-amber-50 px-3 py-2 text-xs font-semibold text-amber-700">
                            <i class="fas fa-triangle-exclamation text-[11px]"></i>{{ $needsReviewCount }} à surveiller
                        </span>
                    @endif
                </div>
            </div>

            <div class="border-b border-red-100/80 px-4 py-3 sm:px-6">
                <div class="-mx-1 flex gap-2 overflow-x-auto px-1 urgent-chip-scroll">
                    @foreach($statusTabs as $tab)
                        @php
                            $tabQuery = request()->except('page', 'status');
                            if ($tab['value']) {
                                $tabQuery['status'] = $tab['value'];
                            }

                            $isActiveTab = request('status', '') === $tab['value'];
                        @endphp
                        <a href="{{ route('prestataire.urgent-sales.index', $tabQuery) }}" class="inline-flex shrink-0 items-center gap-2 rounded-full border px-3 py-2 text-xs font-semibold transition sm:text-sm {{ $isActiveTab ? 'border-red-600 bg-red-600 text-white shadow-sm' : 'border-red-100 bg-white text-slate-600 hover:border-red-200 hover:bg-red-50 hover:text-red-700' }}">
                            <span>{{ $tab['label'] }}</span>
                            <span class="rounded-full px-2 py-0.5 text-[11px] {{ $isActiveTab ? 'bg-white/20 text-white' : 'bg-slate-100 text-slate-600' }}">
                                {{ $tab['count'] }}
                            </span>
                        </a>
                    @endforeach
                </div>
            </div>

            <details class="filter-panel" {{ $hasActiveFilters ? 'open' : '' }}>
                <summary class="flex list-none cursor-pointer items-center justify-between gap-3 px-4 py-4 sm:px-6">
                    <div class="min-w-0">
                        <h2 class="text-sm font-semibold text-slate-900 sm:text-base">Filtres et tri</h2>
                        <p class="mt-1 text-xs text-slate-500 sm:text-sm">
                            {{ $hasActiveFilters ? 'Affichage filtré selon vos critères actuels.' : 'Affinez la liste par statut, catégorie, état ou ordre de tri.' }}
                        </p>
                    </div>
                    <div class="flex items-center gap-2">
                        @if($activeFilterCount > 0)
                            <span class="inline-flex items-center rounded-full border border-red-100 bg-red-50 px-3 py-1.5 text-xs font-semibold text-red-700">
                                {{ $activeFilterCount }} actif(s)
                            </span>
                        @endif
                        <span class="inline-flex items-center gap-2 rounded-full border border-red-100 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700">
                            <span>{{ $urgentSales->total() }} résultat(s)</span>
                            <i class="fas fa-chevron-down filter-chevron text-[10px] text-slate-400"></i>
                        </span>
                    </div>
                </summary>

                <div class="border-t border-red-100/80 px-4 pb-4 sm:px-6 sm:pb-6">
                    <form method="GET" action="{{ route('prestataire.urgent-sales.index') }}" class="grid gap-3 pt-4 sm:grid-cols-2 xl:grid-cols-6">
                        <div class="xl:col-span-1">
                            <label for="status" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Statut</label>
                            <select name="status" id="status" class="w-full rounded-2xl border border-red-100 bg-white px-3 py-3 text-sm font-medium text-slate-700 outline-none transition focus:border-red-300 focus:ring-2 focus:ring-red-100">
                                <option value="">Tous les statuts</option>
                                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Actif</option>
                                <option value="sold" {{ request('status') === 'sold' ? 'selected' : '' }}>Vendu</option>
                                <option value="withdrawn" {{ request('status') === 'withdrawn' ? 'selected' : '' }}>Retiré</option>
                                <option value="reported" {{ request('status') === 'reported' ? 'selected' : '' }}>Signalé</option>
                                <option value="blocked" {{ request('status') === 'blocked' ? 'selected' : '' }}>Bloqué</option>
                            </select>
                        </div>

                        <div class="xl:col-span-1">
                            <label for="parentCategory" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Catégorie</label>
                            <select name="category" id="parentCategory" class="w-full rounded-2xl border border-red-100 bg-white px-3 py-3 text-sm font-medium text-slate-700 outline-none transition focus:border-red-300 focus:ring-2 focus:ring-red-100">
                                <option value="">Toutes les catégories</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="xl:col-span-1">
                            <label for="subcategory" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Sous-catégorie</label>
                            <select name="subcategory" id="subcategory" class="w-full rounded-2xl border border-red-100 bg-white px-3 py-3 text-sm font-medium text-slate-700 outline-none transition focus:border-red-300 focus:ring-2 focus:ring-red-100">
                                <option value="">Toutes</option>
                                @foreach($subcategories as $subcategory)
                                    <option value="{{ $subcategory->id }}" {{ request('subcategory') == $subcategory->id ? 'selected' : '' }}>{{ $subcategory->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="xl:col-span-1">
                            <label for="condition" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">État</label>
                            <select name="condition" id="condition" class="w-full rounded-2xl border border-red-100 bg-white px-3 py-3 text-sm font-medium text-slate-700 outline-none transition focus:border-red-300 focus:ring-2 focus:ring-red-100">
                                <option value="">Tous les états</option>
                                <option value="excellent" {{ request('condition') === 'excellent' ? 'selected' : '' }}>Excellent</option>
                                <option value="very_good" {{ request('condition') === 'very_good' ? 'selected' : '' }}>Très bon</option>
                                <option value="good" {{ request('condition') === 'good' ? 'selected' : '' }}>Bon</option>
                                <option value="fair" {{ request('condition') === 'fair' ? 'selected' : '' }}>Correct</option>
                                <option value="poor" {{ request('condition') === 'poor' ? 'selected' : '' }}>Mauvais</option>
                            </select>
                        </div>

                        <div class="xl:col-span-1">
                            <label for="sort" class="mb-1.5 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Tri</label>
                            <select name="sort" id="sort" class="w-full rounded-2xl border border-red-100 bg-white px-3 py-3 text-sm font-medium text-slate-700 outline-none transition focus:border-red-300 focus:ring-2 focus:ring-red-100">
                                <option value="created_at_desc" {{ request('sort', 'created_at_desc') === 'created_at_desc' ? 'selected' : '' }}>Plus récent</option>
                                <option value="created_at_asc" {{ request('sort') === 'created_at_asc' ? 'selected' : '' }}>Plus ancien</option>
                                <option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Prix croissant</option>
                                <option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Prix décroissant</option>
                                <option value="views_desc" {{ request('sort') === 'views_desc' ? 'selected' : '' }}>Plus vues</option>
                                <option value="contacts_desc" {{ request('sort') === 'contacts_desc' ? 'selected' : '' }}>Plus contactées</option>
                            </select>
                        </div>

                        <div class="flex flex-col gap-2 sm:flex-row sm:items-end xl:col-span-1 xl:justify-end">
                            <button type="submit" class="inline-flex w-full items-center justify-center rounded-full bg-red-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-red-700 sm:w-auto">
                                <i class="fas fa-sliders mr-2 text-xs"></i>Appliquer
                            </button>
                            @if($hasActiveFilters)
                                <a href="{{ route('prestataire.urgent-sales.index') }}" class="inline-flex w-full items-center justify-center rounded-full border border-slate-200 bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200 sm:w-auto">
                                    Réinitialiser
                                </a>
                            @endif
                        </div>
                    </form>
                </div>
            </details>
        </section>

        <div class="mt-4 flex flex-col gap-2 px-1 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-sm font-semibold text-slate-700">{{ $urgentSales->total() }} annonce(s) affichée(s)</p>
            <p class="text-xs text-slate-500">
                Les demandes clientes se gèrent depuis le bouton <span class="font-semibold text-slate-700">Demandes</span>.
            </p>
        </div>

        @if($urgentSales->count() > 0)
            <div class="mt-4 space-y-3 sm:space-y-4">
                @foreach($urgentSales as $sale)
                    @php
                        $statusClasses = match($sale->status) {
                            'active' => 'border-emerald-200 bg-emerald-50 text-emerald-700',
                            'sold' => 'border-slate-200 bg-slate-100 text-slate-700',
                            'withdrawn' => 'border-amber-200 bg-amber-50 text-amber-700',
                            'reported' => 'border-orange-200 bg-orange-50 text-orange-700',
                            'blocked' => 'border-rose-200 bg-rose-50 text-rose-700',
                            default => 'border-slate-200 bg-slate-100 text-slate-700',
                        };

                        $contactsCount = (int) ($sale->contacts_count ?? 0);
                        $reportsCount = (int) ($sale->reports_count ?? 0);
                        $photos = $sale->photos ?? [];
                        $locationText = $sale->location ?: 'Lieu non précisé';
                        $shortDescription = trim(\Illuminate\Support\Str::limit(preg_replace('/\s+/', ' ', strip_tags($sale->description ?? '')), 150));
                        $availableQuantity = $sale->quantity !== null ? $sale->available_quantity : null;

                        if (is_null($availableQuantity)) {
                            $stockTone = 'text-slate-600';
                            $stockLabel = 'Stock non précisé';
                        } elseif ($availableQuantity > 5) {
                            $stockTone = 'text-emerald-700';
                            $stockLabel = $availableQuantity . ' disponible(s)';
                        } elseif ($availableQuantity > 0) {
                            $stockTone = 'text-amber-700';
                            $stockLabel = $availableQuantity . ' restante(s)';
                        } else {
                            $stockTone = 'text-rose-700';
                            $stockLabel = 'Plus de stock';
                        }
                    @endphp

                    <article class="overflow-hidden rounded-[26px] border border-white/90 bg-white shadow-[0_18px_50px_rgba(15,23,42,0.07)] ring-1 ring-red-100/60 transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_28px_60px_rgba(15,23,42,0.1)]">
                        <div class="flex flex-col gap-3 p-3 sm:gap-4 sm:p-4">
                            <div class="flex gap-3 sm:gap-4">
                                <a href="{{ route('prestataire.urgent-sales.show', $sale) }}" class="relative h-24 w-24 shrink-0 overflow-hidden rounded-[20px] bg-red-50 sm:h-32 sm:w-32 lg:h-36 lg:w-36">
                                    @if(count($photos) > 0)
                                        <x-media-image :path="$photos[0]" :alt="$sale->title" class="h-full w-full object-cover" />
                                        @if(count($photos) > 1)
                                            <span class="absolute left-2 top-2 inline-flex items-center rounded-full bg-black/65 px-2 py-1 text-[11px] font-semibold text-white backdrop-blur-sm">
                                                <i class="fas fa-images mr-1 text-[10px]"></i>{{ count($photos) }}
                                            </span>
                                        @endif
                                    @else
                                        <span class="flex h-full w-full flex-col items-center justify-center text-red-300">
                                            <i class="fas fa-image text-2xl"></i>
                                            <span class="mt-2 text-[11px] font-semibold">Aucune image</span>
                                        </span>
                                    @endif
                                </a>

                                <div class="min-w-0 flex-1">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-semibold {{ $statusClasses }}">
                                            {{ $sale->status_label }}
                                        </span>
                                        @if($contactsCount > 0)
                                            <span class="inline-flex items-center rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-700">
                                                <i class="fas fa-users mr-1 text-[10px]"></i>{{ $contactsCount }} demande(s)
                                            </span>
                                        @endif
                                        @if($sale->inventory_item_id)
                                            <span class="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 text-[11px] font-semibold text-blue-700">
                                                <i class="fas fa-link mr-1 text-[10px]"></i>Inventaire lié
                                            </span>
                                        @endif
                                        @if($reportsCount > 0)
                                            <span class="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-700">
                                                <i class="fas fa-flag mr-1 text-[10px]"></i>{{ $reportsCount }} signalement(s)
                                            </span>
                                        @endif
                                    </div>

                                    <div class="mt-2 flex flex-col gap-2">
                                        <div class="flex items-start justify-between gap-3">
                                            <div class="min-w-0">
                                                <h2 class="text-base font-black leading-tight text-slate-900 sm:text-lg">{{ $sale->title }}</h2>
                                                <p class="mt-1 text-xs font-medium text-slate-500 sm:text-sm">
                                                    {{ $sale->category->name ?? 'Sans catégorie' }}
                                                    <span class="mx-1.5 text-slate-300">•</span>
                                                    Mise en ligne le {{ $sale->created_at->format('d/m/Y') }}
                                                </p>
                                            </div>

                                            <div class="shrink-0 text-right">
                                                <div class="text-xl font-black tracking-tight text-red-600 sm:text-2xl">
                                                    {{ number_format((float) $sale->price, 0, ',', ' ') }} €
                                                </div>
                                                <div class="mt-1 text-xs font-semibold text-slate-500">
                                                    {{ $sale->condition_label }}
                                                </div>
                                            </div>
                                        </div>

                                        <p class="line-clamp-2 text-sm leading-6 text-slate-600">
                                            {{ $shortDescription ?: 'Aucune description détaillée.' }}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="grid gap-3 border-t border-red-100/80 pt-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
                                <div class="flex flex-wrap gap-x-4 gap-y-2 text-xs text-slate-600 sm:text-sm">
                                    <span class="inline-flex items-center gap-1.5 font-semibold text-slate-900">
                                        <i class="fas fa-boxes text-red-400"></i>
                                        <span class="{{ $stockTone }}">{{ $stockLabel }}</span>
                                    </span>

                                    @if(($sale->sold_quantity ?? 0) > 0)
                                        <span class="inline-flex items-center gap-1.5">
                                            <i class="fas fa-check-circle text-emerald-400"></i>{{ $sale->sold_quantity }} vendue(s)
                                        </span>
                                    @endif

                                    @if(($sale->reserved_quantity ?? 0) > 0)
                                        <span class="inline-flex items-center gap-1.5">
                                            <i class="fas fa-hourglass-half text-amber-400"></i>{{ $sale->reserved_quantity }} réservée(s)
                                        </span>
                                    @endif

                                    <span class="inline-flex items-center gap-1.5">
                                        <i class="fas fa-eye text-red-300"></i>{{ number_format((int) $sale->views_count, 0, ',', ' ') }} vues
                                    </span>

                                    <span class="inline-flex items-center gap-1.5">
                                        <i class="fas fa-comments text-red-300"></i>{{ $contactsCount }} contact(s)
                                    </span>

                                    <span class="inline-flex min-w-0 items-center gap-1.5">
                                        <i class="fas fa-location-dot text-red-300"></i>
                                        <span class="truncate">{{ $locationText }}</span>
                                    </span>
                                </div>

                                <div class="urgent-sale-actions w-full sm:w-auto">
                                    @if($contactsCount > 0)
                                        <a href="{{ route('prestataire.urgent-sales.contacts', $sale) }}" class="urgent-sale-action-btn urgent-sale-action-btn--primary mb-2 inline-flex h-9 w-full items-center justify-center rounded-full bg-emerald-600 px-3 py-2 text-[11px] font-semibold leading-none text-white transition hover:bg-emerald-700 sm:mb-0 sm:mr-2 sm:h-10 sm:w-auto sm:px-4 sm:text-sm">
                                            <i class="fas fa-users mr-1.5 text-[10px] sm:mr-2 sm:text-[11px]"></i>
                                            <span class="sm:hidden">Demandes</span>
                                            <span class="hidden sm:inline">Demandes ({{ $contactsCount }})</span>
                                        </a>
                                    @endif

                                    <div class="urgent-sale-actions-row grid w-full gap-2 sm:flex sm:w-auto sm:flex-wrap sm:justify-end">
                                        <a href="{{ route('prestataire.urgent-sales.show', $sale) }}" class="urgent-sale-action-btn inline-flex h-9 min-w-0 items-center justify-center rounded-full border border-red-200 bg-red-50 px-3 py-2 text-[11px] font-semibold leading-none text-red-700 transition hover:border-red-300 hover:bg-red-100 sm:h-10 sm:px-4 sm:text-sm">
                                            <i class="fas fa-eye mr-1.5 text-[10px] sm:mr-2 sm:text-[11px]"></i>Voir
                                        </a>

                                        <a href="{{ route('prestataire.urgent-sales.edit', $sale) }}" class="urgent-sale-action-btn inline-flex h-9 min-w-0 items-center justify-center rounded-full border border-slate-200 bg-slate-100 px-3 py-2 text-[11px] font-semibold leading-none text-slate-700 transition hover:bg-slate-200 sm:h-10 sm:px-4 sm:text-sm">
                                            <i class="fas fa-pen mr-1.5 text-[10px] sm:mr-2 sm:text-[11px]"></i>
                                            <span class="sm:hidden">Modif.</span>
                                            <span class="hidden sm:inline">Modifier</span>
                                        </a>

                                        <form action="{{ route('prestataire.urgent-sales.destroy', $sale) }}" method="POST" class="delete-form urgent-sale-delete-form">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="delete-urgent-sale-btn urgent-sale-delete-btn inline-flex h-9 w-9 items-center justify-center rounded-full border border-rose-200 bg-rose-50 text-rose-600 transition hover:bg-rose-100 sm:h-10 sm:w-10" title="Supprimer" data-sale-title="{{ $sale->title }}">
                                                <i class="fas fa-trash text-[11px]"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="mt-6">
                {{ $urgentSales->appends(request()->query())->links() }}
            </div>
        @else
            <section class="mt-4 overflow-hidden rounded-[28px] border border-white/80 bg-white/90 px-6 py-12 text-center shadow-[0_28px_70px_rgba(15,23,42,0.08)]">
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-50 text-red-400">
                    <i class="fas fa-tag text-2xl"></i>
                </div>
                <h2 class="mt-4 text-xl font-black text-slate-900">Aucune vente urgente trouvée</h2>
                <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-slate-600">
                    {{ $hasActiveFilters ? 'Aucune annonce ne correspond aux filtres actuels.' : 'Vous n’avez pas encore publié de vente urgente.' }}
                </p>
                <div class="mt-6 flex flex-col items-center justify-center gap-2 sm:flex-row">
                    @if($hasActiveFilters)
                        <a href="{{ route('prestataire.urgent-sales.index') }}" class="inline-flex items-center justify-center rounded-full border border-slate-200 bg-slate-100 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200">
                            Réinitialiser les filtres
                        </a>
                    @endif
                    <a href="{{ route('prestataire.urgent-sales.create') }}" class="inline-flex items-center justify-center rounded-full bg-red-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-red-700">
                        <i class="fas fa-plus mr-2 text-xs"></i>Créer une annonce
                    </a>
                </div>
            </section>
        @endif

        <div id="deleteConfirmationModal" class="fixed inset-0 z-[10050] hidden opacity-0 transition-opacity duration-200" style="backdrop-filter: blur(4px); background-color: rgba(15, 23, 42, 0.52);">
            <div class="flex min-h-full w-full items-end justify-center p-3 sm:items-center">
                <div class="modal-show w-full max-w-md rounded-[28px] bg-white p-5 shadow-2xl transition-all duration-200 sm:p-6" style="padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem); transform: translateY(16px); opacity: 0;">
                    <div class="text-center">
                        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-rose-50 text-rose-600">
                            <i class="fas fa-trash-alt text-lg"></i>
                        </div>
                        <h3 class="mt-4 text-lg font-black text-slate-900">Supprimer cette annonce ?</h3>
                        <p class="mt-2 text-sm leading-6 text-slate-600">
                            Cette action retirera définitivement la vente urgente de votre boutique.
                        </p>
                        <p id="urgentSaleTitle" class="mt-2 text-sm font-semibold text-rose-700"></p>
                        <div class="mt-5 grid gap-2 sm:grid-cols-2">
                            <button id="cancelDeleteBtn" type="button" class="inline-flex items-center justify-center rounded-full border border-slate-200 bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200">
                                Annuler
                            </button>
                            <button id="confirmDeleteBtn" type="button" class="inline-flex items-center justify-center rounded-full bg-rose-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-rose-700">
                                Supprimer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const parentCategorySelect = document.getElementById('parentCategory');
    const subcategorySelect = document.getElementById('subcategory');
    const deleteModal = document.getElementById('deleteConfirmationModal');
    const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
    const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
    const urgentSaleTitleElement = document.getElementById('urgentSaleTitle');
    const fixedUiElements = [
        document.getElementById('site-navbar'),
        document.getElementById('mobile-bottom-nav'),
    ].filter(Boolean);
    let currentDeleteForm = null;

    function syncModalUiState(isOpen) {
        fixedUiElements.forEach((element) => {
            if (isOpen) {
                if (!('modalDisplayBackup' in element.dataset)) {
                    element.dataset.modalDisplayBackup = element.style.display || '';
                }
                element.style.display = 'none';
                return;
            }

            if ('modalDisplayBackup' in element.dataset) {
                element.style.display = element.dataset.modalDisplayBackup;
                delete element.dataset.modalDisplayBackup;
            } else {
                element.style.display = '';
            }
        });

        if (isOpen) {
            if (!('modalOverflowBackup' in document.body.dataset)) {
                document.body.dataset.modalOverflowBackup = document.body.style.overflow || '';
            }
            document.body.style.overflow = 'hidden';
            return;
        }

        if ('modalOverflowBackup' in document.body.dataset) {
            document.body.style.overflow = document.body.dataset.modalOverflowBackup;
            delete document.body.dataset.modalOverflowBackup;
        } else {
            document.body.style.overflow = '';
        }
    }

    function openModal(button) {
        if (!deleteModal) {
            return;
        }

        currentDeleteForm = button.closest('form');
        urgentSaleTitleElement.textContent = button.dataset.saleTitle || '';
        deleteModal.classList.remove('hidden');
        syncModalUiState(true);

        setTimeout(() => {
            deleteModal.classList.remove('opacity-0');
            const modalContent = deleteModal.querySelector('.modal-show');

            if (!modalContent) {
                return;
            }

            modalContent.style.transform = 'translateY(0)';
            modalContent.style.opacity = '1';
        }, 10);
    }

    function closeModal() {
        if (!deleteModal) {
            return;
        }

        const modalContent = deleteModal.querySelector('.modal-show');
        if (modalContent) {
            modalContent.style.transform = 'translateY(16px)';
            modalContent.style.opacity = '0';
        }

        deleteModal.classList.add('opacity-0');

        setTimeout(() => {
            deleteModal.classList.add('hidden');
            currentDeleteForm = null;
            syncModalUiState(false);
        }, 220);
    }

    if (parentCategorySelect && subcategorySelect) {
        parentCategorySelect.addEventListener('change', function () {
            subcategorySelect.selectedIndex = 0;

            if (this.form && typeof this.form.requestSubmit === 'function') {
                this.form.requestSubmit();
                return;
            }

            if (this.form) {
                this.form.submit();
            }
        });
    }

    document.querySelectorAll('.delete-urgent-sale-btn').forEach((button) => {
        button.addEventListener('click', function () {
            openModal(this);
        });
    });

    if (cancelDeleteBtn) {
        cancelDeleteBtn.addEventListener('click', closeModal);
    }

    if (confirmDeleteBtn) {
        confirmDeleteBtn.addEventListener('click', function () {
            if (currentDeleteForm) {
                currentDeleteForm.submit();
            }
        });
    }

    if (deleteModal) {
        deleteModal.addEventListener('click', function (event) {
            if (event.target === deleteModal) {
                closeModal();
            }
        });
    }

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && deleteModal && !deleteModal.classList.contains('hidden')) {
            closeModal();
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.urgent-chip-scroll {
    scrollbar-width: none;
}

.urgent-chip-scroll::-webkit-scrollbar {
    display: none;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.filter-panel summary::-webkit-details-marker {
    display: none;
}

.filter-panel[open] .filter-chevron {
    transform: rotate(180deg);
}

@media (max-width: 639px) {
    .urgent-sale-actions {
        width: 100%;
    }

    .urgent-sale-actions-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .urgent-sale-action-btn {
        height: 2rem !important;
        padding: 0 0.7rem !important;
        font-size: 10px !important;
        line-height: 1 !important;
        border-radius: 9999px;
    }

    .urgent-sale-action-btn i {
        margin-right: 0.325rem !important;
        font-size: 10px !important;
    }

    .urgent-sale-delete-form {
        display: flex;
        justify-content: flex-end;
    }

    .urgent-sale-delete-btn {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem;
    }
}
</style>
@endpush