@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <!-- En-tête de page -->
            <div class="page-header-chic animate-fade-in">
                <div class="header-title-chic">
                    <h4>Liste des Collèges</h4>
                    <p><i class="feather icon-list"></i> Structure des collèges de la police sélectionnée</p>
                </div>
                <div class="header-actions">
                    <a href="{{ route('admin.police.index') }}" onclick="showOverlay()" class="btn-retour-chic">
                        <i class="feather icon-arrow-left"></i> Retour aux polices
                    </a>
                </div>
            </div>

            <!-- KPI Cards -->
            <div class="kpi-row animate-fade-in" style="animation-delay: 0.1s;">
                <div class="kpi-card info">
                    <div class="kpi-icon"><i class="feather icon-layers"></i></div>
                    <div class="kpi-info">
                        <div class="kpi-label">Collèges</div>
                        <div class="kpi-value">{{ $nbre_college }}</div>
                    </div>
                </div>
                <div class="kpi-card warning">
                    <div class="kpi-icon"><i class="feather icon-users"></i></div>
                    <div class="kpi-info">
                        <div class="kpi-label">Adhérents</div>
                        <div class="kpi-value">{{ $nbre_adherent }}</div>
                    </div>
                </div>
                <div class="kpi-card success">
                    <div class="kpi-icon"><i class="feather icon-heart"></i></div>
                    <div class="kpi-info">
                        <div class="kpi-label">Bénéficiaires</div>
                        <div class="kpi-value">{{ $nbre_beneficiaire }}</div>
                    </div>
                </div>
            </div>

            <!-- Barre de Filtres -->
            <div class="filter-bar-premium animate-fade-in" style="animation-delay: 0.2s;">
                <form action="{{ route('admin.college.index') }}" onsubmit="showOverlay()" method="GET" id="form_search">
                    <input id="idPolice" name="idPolice" type="hidden" value="{{ $idPolice }}">
                    
                    <div class="row g-3 align-items-center">
                        <div class="col-md-9">
                            {{ Form::text('recherche', old('recherche'), ['class' => 'form-control input-chic', 'placeholder' => 'Rechercher par nom de collège...', 'id' => 'recherche']) }}
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn-valider-premium">
                                <i class="feather icon-search"></i> Filtrer
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Conteneur des éléments -->
            <div id="preview" class="animate-fade-in" style="animation-delay: 0.3s;">
                @include('Garant::admin.college.items', ['colleges' => $colleges])
            </div>

        </div>
    </div>
</section>

<style>
/* ══════════════════════════════════════════════
       LISTE DES COLLÈGES — Design Premium
       ══════════════════════════════════════════════ */
    .pcoded-content, .pcoded-inner-content, .page-wrapper { background: transparent !important; }

    /* Entête Premium */
    .page-header-chic {
        background: linear-gradient(135deg, rgba(var(--vt-primary-rgb), 0.05), rgba(0,0,0,0.2));
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 20px;
        padding: 25px 30px;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .header-title-chic h4 {
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 5px 0;
    }

    .header-title-chic p {
        font-size: 0.85rem;
        color: var(--vt-muted);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-retour-chic {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #fff;
        padding: 10px 20px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .btn-retour-chic:hover {
        background: rgba(var(--vt-primary-rgb), 0.1);
        border-color: var(--vt-primary);
        color: #fff;
        transform: translateY(-2px);
    }

    /* KPI Cards */
    .kpi-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .kpi-card {
        background: rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .kpi-card:hover { border-color: rgba(var(--vt-primary-rgb), 0.3); background: rgba(255,255,255,0.04); transform: translateY(-3px); }

    .kpi-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .kpi-info { flex: 1; min-width: 0; }
    
    .kpi-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--vt-muted);
        font-weight: 800;
        margin-bottom: 5px;
    }

    .kpi-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
    }

    /* Couleurs KPI */
    .kpi-card.info .kpi-icon { background: rgba(52, 152, 219, 0.15); color: #3498db; }
    .kpi-card.warning .kpi-icon { background: rgba(241, 196, 15, 0.15); color: #f1c40f; }
    .kpi-card.success .kpi-icon { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }

    /* ── Light Mode Overrides ── */
    body.light-mode .page-header-chic {
        background: linear-gradient(135deg, rgba(var(--vt-primary-rgb), 0.05), #ffffff);
        border-color: #e2e8f0;
        box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
    }
    
    body.light-mode .header-title-chic h4 { color: #1e293b; }
    
    body.light-mode .btn-retour-chic {
        background: #f1f5f9;
        border-color: #e2e8f0;
        color: #475569;
    }
    
    body.light-mode .btn-retour-chic:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    body.light-mode .kpi-card {
        background: #ffffff;
        border-color: #e2e8f0;
        box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    }
    
    body.light-mode .kpi-value { color: #1e293b; }
    body.light-mode .kpi-card:hover { background: #f8fafc; border-color: rgba(var(--vt-primary-rgb), 0.2); }

    body.light-mode .filter-bar-premium {
        background: #ffffff;
        border-color: #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    }
</style>

@endsection