@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>Polices (Collèges)</h4>
                    <p><i class="feather icon-shield"></i> Liste globale des polices liées aux collèges</p>
                </div>
                <div class="header-actions">
                    <a href="{{ route('admin.souscripteur.index') }}" onclick="showOverlay()" class="btn-retour-chic">
                        <i class="feather icon-arrow-left"></i> Retour aux souscripteurs
                    </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-shield"></i></div>
                    <div class="kpi-info">
                        <div class="kpi-label">Polices</div>
                        <div class="kpi-value">{{ $nbre_police }}</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.indexAll') }}" onsubmit="showOverlay()" method="GET" id="form_search">
                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6">
                            <label class="filter-label">Recherche</label>
                            {{ Form::text('recherche', old('recherche'), ['class' => 'form-control input-chic', 'placeholder' => 'Rechercher par le nom ...', 'id' => 'recherche']) }}
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label class="filter-label">État de la police</label>
                            {{ Form::select('codeEtatPolice', $etatpolice, old('codeEtatPolice'), ['class' => 'select2 js-select2-premium form-control', 'id' => 'codeEtatPolice']) }}
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label class="filter-label">Date d'effet (<)</label>
                            {{ Form::date('dateEffet', old('dateEffet'), ['class' => 'form-control input-chic datepicker', 'id' => 'dateEffet']) }}
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label class="filter-label">Date d'échéance (>)</label>
                            {{ Form::date('dateEcheance', old('dateEcheance'), ['class' => 'form-control input-chic datepicker', 'id' => 'date_fin']) }}
                        </div>
                        <div class="col-lg-2 col-md-12">
                            <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;">
                <div class="dt-responsive table-responsive">
                    @include('Garant::admin.police.itemsAll', ['polices' => $polices])
                </div>
            </div>

        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        if ($('.select2 js-select2-premium').length) {
            $('.select2 js-select2-premium').select2({
                width: '100%',
                minimumResultsForSearch: 10
            });
        }
    });

    $('#form_search').on('submit', function(e) {
        var form = $(this);
        var datas = $(form).serialize();
        e.preventDefault();
        $('.page-loader-wrapper').fadeIn();
        $.ajax({
            method: "GET",
            data: datas,
            url: "{{ route('admin.police.items') }}",
        }).done(function (response) {
            $('#preview').html(response);
            $('.page-loader-wrapper').fadeOut();
        });
    });

    $('#form_search input, #form_search select').on('change', function() {
        $('#form_search').submit();
    });
</script>

<style>
/* ══════════════════════════════════════════════
       LISTE DES POLICES (Collèges module) — 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);
    }

    body.light-mode .filter-label { color: #475569; }
</style>

@endsection