@extends('layouts.admin')

@section('title', 'Annonces')
@section('page-title', 'Modération des annonces')
@section('page-subtitle', 'Biens proposés et demandes clients')

@section('content')
    <form method="GET" action="{{ route('admin.properties.index') }}"
          class="mb-6 grid gap-3 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm lg:grid-cols-6">
        <div class="lg:col-span-2">
            <label for="search" class="sr-only">Recherche</label>
            <input type="search" name="search" id="search" value="{{ $filters['search'] ?? '' }}"
                   placeholder="Titre, référence…"
                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
        </div>
        <div>
            <select name="kind" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                @foreach (['all' => 'Tous types', 'request' => 'Demandes', 'proposal' => 'Biens'] as $value => $label)
                    <option value="{{ $value }}" @selected(($filters['kind'] ?? 'all') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <select name="transaction_type" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Transaction</option>
                <option value="achat" @selected(($filters['transaction_type'] ?? '') === 'achat')>Vente / Achat</option>
                <option value="location" @selected(($filters['transaction_type'] ?? '') === 'location')>Location</option>
                <option value="location_saisonniere" @selected(($filters['transaction_type'] ?? '') === 'location_saisonniere')>Location saisonnière</option>
            </select>
        </div>
        <div>
            <select name="account_type" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Type d’agent</option>
                <option value="independent_agent" @selected(($filters['account_type'] ?? '') === 'independent_agent')>Agent indépendant</option>
                <option value="agency" @selected(($filters['account_type'] ?? '') === 'agency')>Agence</option>
            </select>
        </div>
        <div>
            <select name="city_id" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Ville</option>
                @foreach ($cities as $city)
                    <option value="{{ $city->id }}" @selected(($filters['city_id'] ?? '') == $city->id)>{{ $city->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex gap-2 lg:col-span-6">
            <select name="zone_id" class="max-w-xs rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">Zone / quartier</option>
                @foreach ($zones as $zone)
                    <option value="{{ $zone->id }}" @selected(($filters['zone_id'] ?? '') == $zone->id)>
                        {{ $zone->name }} ({{ $zone->city?->name }})
                    </option>
                @endforeach
            </select>
            <button type="submit" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800">Filtrer</button>
            <a href="{{ route('admin.properties.index') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Réinitialiser</a>
        </div>
    </form>

    <p class="mb-4 text-sm text-slate-600">{{ $listings->total() }} annonce(s) trouvée(s)</p>

    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 py-3 text-left font-semibold text-slate-700">Aperçu</th>
                        <th class="px-4 py-3 text-left font-semibold text-slate-700">Annonce</th>
                        <th class="px-4 py-3 text-left font-semibold text-slate-700">Localisation</th>
                        <th class="px-4 py-3 text-left font-semibold text-slate-700">Agent</th>
                        <th class="px-4 py-3 text-left font-semibold text-slate-700">Carte</th>
                        <th class="px-4 py-3 text-right font-semibold text-slate-700">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($listings as $listing)
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-3">
                                @if ($listing->thumbnailUrl)
                                    <img src="{{ $listing->thumbnailUrl }}" alt="" class="h-12 w-12 rounded-lg object-cover ring-1 ring-slate-200">
                                @else
                                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-slate-100 text-xs font-semibold text-slate-500">
                                        {{ $listing->kind === 'proposal' ? 'Bien' : 'Dem.' }}
                                    </div>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <a href="{{ route('admin.properties.show', $listing->key) }}" class="font-medium text-slate-900 hover:text-indigo-700">
                                    {{ $listing->title }}
                                </a>
                                @if ($listing->subtitle)
                                    <p class="text-xs text-slate-500">{{ $listing->subtitle }}</p>
                                @endif
                                <p class="mt-1 text-xs text-slate-500">{{ $listing->transactionLabel ?? '—' }}</p>
                                <p class="text-sm font-semibold text-indigo-700">{{ $listing->amountLabel ?? '—' }}</p>
                            </td>
                            <td class="px-4 py-3 text-slate-600">
                                @if (count($listing->breadcrumb) > 0)
                                    <nav class="text-xs leading-relaxed" aria-label="Fil d'Ariane">
                                        {{ implode(' › ', $listing->breadcrumb) }}
                                    </nav>
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @if ($listing->agent)
                                    <a href="{{ route('admin.agents.show', $listing->agent) }}"
                                       class="font-medium text-indigo-600 hover:underline">
                                        {{ $listing->agent->name }}
                                    </a>
                                    <p class="text-xs text-slate-500">{{ $listing->agent->account_type?->value ?? '—' }}</p>
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @if ($listing->isVisibleOnMap)
                                    <span class="inline-flex rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">
                                        Actif sur la carte
                                    </span>
                                @else
                                    <span class="inline-flex rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">
                                        Masqué
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-right whitespace-nowrap">
                                <form method="POST" action="{{ route('admin.properties.toggle', $listing->key) }}" class="inline">
                                    @csrf @method('PATCH')
                                    <button type="submit" class="font-medium text-indigo-600 hover:underline">
                                        {{ $listing->isVisibleOnMap ? 'Masquer' : 'Afficher' }}
                                    </button>
                                </form>
                                <span class="text-slate-300">·</span>
                                <button type="button"
                                        class="font-medium text-red-600 hover:underline"
                                        data-delete-url="{{ route('admin.properties.destroy', $listing->key) }}"
                                        data-delete-title="{{ $listing->title }}"
                                        onclick="openDeleteModal(this)">
                                    Supprimer
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-12 text-center text-slate-500">Aucune annonce ne correspond aux critères.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if ($listings->hasPages())
        <div class="mt-6">{{ $listings->withQueryString()->links() }}</div>
    @endif

    <div id="delete-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/50 p-4" role="dialog" aria-modal="true">
        <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
            <h3 class="text-lg font-semibold text-slate-900">Confirmer la suppression</h3>
            <p class="mt-2 text-sm text-slate-600">
                Supprimer définitivement l’annonce « <span id="delete-modal-title" class="font-medium"></span> » ?
                Cette action est irréversible.
            </p>
            <form id="delete-modal-form" method="POST" class="mt-6 flex justify-end gap-3">
                @csrf @method('DELETE')
                <button type="button" onclick="closeDeleteModal()"
                        class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                    Annuler
                </button>
                <button type="submit"
                        class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">
                    Supprimer
                </button>
            </form>
        </div>
    </div>

    <script>
        function openDeleteModal(button) {
            document.getElementById('delete-modal-form').action = button.dataset.deleteUrl;
            document.getElementById('delete-modal-title').textContent = button.dataset.deleteTitle;
            const modal = document.getElementById('delete-modal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }
        function closeDeleteModal() {
            const modal = document.getElementById('delete-modal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    </script>
@endsection