@extends('layouts.app')

@section('content')
    <header class="page-header">
        <div>
            <h1>Toutes les fiches</h1>
            <p>{{ $total }} fiche(s) trouvée(s)</p>
        </div>
        <div class="actions">
            <a class="secondary small" href="{{ route('organizations.create') }}">Ajouter une fiche</a>
            @if($total)
                <a class="primary small" href="{{ route('campaigns.index', request()->query()) }}">Créer une campagne avec cette sélection</a>
            @endif
        </div>
    </header>

    <form method="get" action="{{ route('organizations.index') }}" class="guided-search">
        <label>Recherche
            <input id="live-search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Nom de structure, ville, contact...">
        </label>
        <label>Esthétique
            <select name="aesthetic">
                <option value="">Toutes</option>
                @foreach ($aesthetics as $item)
                    <option value="{{ $item }}" @selected(($filters['aesthetic'] ?? '') === $item)>{{ $item }}</option>
                @endforeach
            </select>
        </label>
        <label>Période
            <select name="period">
                <option value="">Toutes</option>
                @foreach ($periods as $item)
                    <option value="{{ $item }}" @selected(($filters['period'] ?? '') === $item)>{{ $item }}</option>
                @endforeach
            </select>
        </label>
        <label>Type
            <select name="organizer_type">
                <option value="">Tous</option>
                @foreach ($organizerTypes as $item)
                    <option value="{{ $item }}" @selected(($filters['organizer_type'] ?? '') === $item)>{{ $item }}</option>
                @endforeach
            </select>
        </label>
        <label>Ville centre
            <input name="center_city" value="{{ $filters['center_city'] ?? '' }}" placeholder="Bordeaux">
        </label>
        <label>Rayon
            <select name="radius_km">
                <option value="">Aucun</option>
                <option value="50" @selected(($filters['radius_km'] ?? '') === '50')>50 km</option>
                <option value="100" @selected(($filters['radius_km'] ?? '') === '100')>100 km</option>
            </select>
        </label>
        <label>Affichage
            <select name="per_page">
                @foreach ([50, 100, 250] as $count)
                    <option value="{{ $count }}" @selected((string)($filters['per_page'] ?? '50') === (string)$count)>{{ $count }}</option>
                @endforeach
            </select>
        </label>
        <button class="primary">Filtrer</button>
    </form>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Structure</th>
                    <th>Ville</th>
                    <th>Type</th>
                    <th>Esthétiques</th>
                    <th>Contact</th>
                    <th>Statut</th>
                </tr>
            </thead>
            <tbody id="organizations-table">
                @foreach($organizations as $organization)
                    <tr data-search="{{ strtolower($organization->name.' '.$organization->city.' '.$organization->contact_name.' '.$organization->email.' '.$organization->contact_email) }}">
                        <td><a href="{{ route('organizations.show', $organization) }}">{{ $organization->name }}</a></td>
                        <td>{{ $organization->city }}</td>
                        <td>{{ $organization->organizer_types }}</td>
                        <td>{{ $organization->aesthetics }}</td>
                        <td>{{ $organization->contactLabel() }}</td>
                        <td>{{ $organization->commercial_status }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

@push('scripts')
<script>
const input = document.getElementById('live-search');
const rows = [...document.querySelectorAll('#organizations-table tr')];
if (input) {
    input.addEventListener('input', () => {
        const value = input.value.toLowerCase();
        rows.forEach(row => row.hidden = !row.dataset.search.includes(value));
    });
}
</script>
@endpush