@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4">
    <div class="mb-4">
        <h1 class="mt-4 h3 fw-bold text-dark">Paramètres : Circonscriptions</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Circonscriptions</li>
        </ol>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-4">
        {{-- Bloc Formulaire : Fixe --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white py-3 border-bottom">
                    <h6 class="m-0 fw-bold text-primary">
                        <i class="fas fa-plus-circle me-2"></i>Nouvelle Circonscription
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.comoe.circonscriptions.store') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted">Nom du lieu / Circonscription</label>
                            <input type="text" name="nom" class="form-control" placeholder="Ex: Commune d'Abobo" required>
                        </div>
                        <button type="submit" class="btn btn-success w-100 shadow-sm fw-bold">
                            <i class="fas fa-check me-1"></i> Ajouter à la liste
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- Bloc Liste : Scrollable avec Filtrage --}}
        <div class="col-md-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white py-3 border-bottom">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="m-0 fw-bold text-primary">Circonscriptions enregistrées</h6>
                        </div>
                        <div class="col-md-6">
                            {{-- Champ de filtrage --}}
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light border-end-0"><i class="fas fa-search text-muted"></i></span>
                                <input type="text" id="filterInput" class="form-control bg-light border-start-0" placeholder="Rechercher une localité...">
                            </div>
                        </div>
                    </div>
                </div>
                
                {{-- Conteneur Scrollable --}}
                <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="circonscriptionTable">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th class="ps-4 py-3">Désignation</th>
                                    <th class="py-3 text-center">Décisions liées</th>
                                    <th class="text-end pe-4 py-3">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="tableBody">
                                @forelse($circonscriptions as $circ)
                                <tr class="border-bottom circonscription-row">
                                    <td class="ps-4 fw-medium text-dark circonscription-name">
                                        <i class="fas fa-map-marker-alt text-muted me-2 small"></i>{{ $circ->nom }}
                                    </td>
                                    <td class="text-center">
                                        @if($circ->decisions_count > 0)
                                            <span class="badge bg-info text-dark px-3 py-2 border">
                                                <i class="fas fa-gavel me-1 opacity-50"></i> {{ $circ->decisions_count }}
                                            </span>
                                        @else
                                            <span class="badge bg-light text-muted px-3 py-2 border">Aucune</span>
                                        @endif
                                    </td>
                                    <td class="text-end pe-4">
                                        <form action="{{ route('admin.comoe.circonscriptions.destroy', $circ->id) }}" 
                                              method="POST" 
                                              onsubmit="return confirm('Attention : Cela supprimera la circonscription. Continuer ?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" 
                                                    class="btn btn-sm btn-outline-danger border-0 rounded-circle" 
                                                    {{ $circ->decisions_count > 0 ? 'disabled' : '' }}>
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr id="emptyRow">
                                    <td colspan="3" class="text-center py-5 text-muted">
                                        <i class="fas fa-folder-open fa-2x mb-2 opacity-25"></i>
                                        <p class="mb-0">Aucune donnée disponible.</p>
                                    </td>
                                </tr>
                                @endforelse
                                {{-- Message si recherche vide --}}
                                <tr id="noResults" style="display: none;">
                                    <td colspan="3" class="text-center py-5 text-muted fst-italic">
                                        Aucun résultat correspondant à votre recherche.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer bg-white border-top-0 py-2">
                    <small class="text-muted"><i class="fas fa-info-circle me-1"></i> <span id="countText">{{ $circonscriptions->count() }}</span> localités au total.</small>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Scrollbar minimaliste */
    div[style*="overflow-y: auto"]::-webkit-scrollbar { width: 5px; }
    div[style*="overflow-y: auto"]::-webkit-scrollbar-track { background: #f8f9fa; }
    div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 10px; }
    
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f8f9fa !important;
        border-bottom: 2px solid #dee2e6 !important;
    }
    
    .table-hover tbody tr:hover {
        background-color: #f8faff;
    }

    button:disabled {
        cursor: not-allowed;
        opacity: 0.3;
    }
</style>

{{-- Script de filtrage --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterInput = document.getElementById('filterInput');
    const rows = document.querySelectorAll('.circonscription-row');
    const noResults = document.getElementById('noResults');
    const countText = document.getElementById('countText');

    filterInput.addEventListener('keyup', function() {
        const query = filterInput.value.toLowerCase().trim();
        let visibleCount = 0;

        rows.forEach(row => {
            const name = row.querySelector('.circonscription-name').textContent.toLowerCase();
            if (name.includes(query)) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        // Affichage du message "Aucun résultat"
        noResults.style.display = (visibleCount === 0 && query !== '') ? '' : 'none';
        
        // Mise à jour du compteur
        countText.textContent = visibleCount;
    });
});
</script>
@endsection