@extends('admin.layout.master')
@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <!-- Page Header & KPI Combined -->
            <div class="page-header-organic animate-organic-header mb-5">
                <div class="organic-glass-card shadow-soft p-3">
                    <div class="row align-items-center">
                        <!-- Titre -->
                        <div class="col-md-7">
                            <h2 class="text-white fw-900 mb-2">Etat des Bénéficiaires</h2>
                            <p class="text-organic-desc mb-0 opacity-70"><i class="feather icon-users me-2"></i> Exploration fluide et intuitive de votre base d'adhérents</p>
                        </div>
                        
                        <!-- KPI Intégré -->
                        <div class="col-md-3 mt-4 mt-md-0">
                            <div class="bento-stats-lux" style="min-height: auto; padding: 15px 25px; border-radius: 20px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);">
                                <div>
                                    <span class="stat-label-lux" style="font-size: 0.55rem; color: #94a3b8;">Effectif Total Analysé</span>
                                    <span class="stat-val-lux text-warning" style="font-size: 2rem; margin-top: 5px;">
                                        @if(isset($beneficiaires)) {{ number_format($beneficiaires->count(), 0, ',', ' ') }} @else 0 @endif
                                    </span>
                                </div>
                                <div class="stat-icon-lux" style="font-size: 2.2rem; filter: none; opacity: 0.8; color: #f59e0b;"><i class="feather icon-users"></i></div>
                            </div>
                        </div>

                        <div class="col-md-2 text-md-end mt-4 mt-md-0">
                            <a class="btn-premium-secondary w-100 justify-content-center" href="{{ route('admin.etat.pdf', array_merge(request()->all(), ['pdf' => 1])) }}">
                                <i class="fas fa-file-pdf"></i> Exporter PDF
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="page-body">
                <div class="row">
                    <div class="col-sm-12">
                        <!-- Panel: Filtres Premium -->
                        <div class="glass-panel-lux animate-fade-in shadow-lg">
                            <div class="section-title-lux">
                                <i class="feather icon-filter"></i> Critères de Recherche Avancés
                            </div>
                            
                            {{ Form::open(['route' => 'admin.etat.valider', 'method' => 'GET', 'id' => 'form_search']) }}
                            <div class="row g-4 align-items-end">
                                <div class="col-xl-3 col-lg-3 col-md-6">
                                    <label class="filter-label-chic">Date de Situation</label>
                                    {{ Form::date('dateDemande', old('dateDemande'), ['class' => 'form-control input-chic']) }}
                                </div>
                                @if (in_array($role_id, [1, 3, 4]))
                                <div class="col-xl-3 col-lg-3 col-md-6">
                                    <label class="filter-label-chic">Garant</label>
                                    <div class="select2-premium-wrapper">
                                        {{ Form::select('codeGcAssureur', $garants, old('codeGcAssureur'), ['class' => 'select2 js-select2-premium', 'id' => 'codeGcAssureur']) }}
                                    </div>
                                </div>
                                @endif
                                <div class="col-xl-3 col-lg-3 col-md-6">
                                    <label class="filter-label-chic">Souscripteur</label>
                                    <div class="select2-premium-wrapper">
                                        {{ Form::select('idSouscripteur', $souscripteurs, old('idSouscripteur'), ['class' => 'select2 js-select2-premium', 'id' => 'idSouscripteur']) }}
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-6">
                                    <label class="filter-label-chic">Police d'Assurance</label>
                                    <div class="select2-premium-wrapper">
                                        {{ Form::select('idPolice', $polices, old('idPolice'), ['class' => 'select2 js-select2-premium', 'id' => 'idPolice']) }}
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-6">
                                    <label class="filter-label-chic">Collège</label>
                                    <div class="select2-premium-wrapper">
                                        {{ Form::select('idCollege', $colleges, old('idCollege'), ['class' => 'select2 js-select2-premium', 'id' => 'idCollege']) }}
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-6">
                                    <label class="filter-label-chic">État de la Police</label>
                                    <div class="select2-premium-wrapper">
                                        {{ Form::select('codeEtatPolice', $etatpolices, old('codeEtatPolice'), ['class' => 'select2 js-select2-premium', 'id' => 'codeEtatPolice']) }}
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-6">
                                    <label class="filter-label-chic">Statut Administratif</label>
                                    <div class="select2-premium-wrapper">
                                        <select name="Sorti" id="Sorti" class="select2 js-select2-premium">
                                            <option value="">Tous les membres</option>
                                            <option value="1" {{ old('Sorti') == '1' ? 'selected' : '' }}>Membres Actifs (En vigueur)</option>
                                            <option value="0" {{ old('Sorti') == '0' ? 'selected' : '' }}>Membres Sortis (Retiré)</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-6">
                                    <button type="submit" onclick="showOverlay()" class="btn-valider-premium w-100">
                                        <i class="feather icon-search"></i> Actualiser l'Annuaire
                                    </button>
                                </div>
                            </div>
                            {{ Form::close() }}

                            <!-- Info Dates Police -->
                            <div id="police-info-box" class="animate-fade-in" style="display: none; margin-top: 20px; text-align: center;">
                                <div class="police-dates-badge">
                                    <i class="feather icon-info"></i>
                                    <span>Police : <span id="date-effet-val">...</span> au <span id="date-echeance-val">...</span></span>
                                    <span class="badge-separator"></span>
                                    <i class="feather icon-check-circle"></i>
                                    <span>Dernière date de cloture des sinistres : <span id="date-validation-val">...</span></span>
                                </div>
                            </div>
                        </div>

                        <!-- Results List -->
                        <div class="glass-panel-lux animate-fade-in shadow-xl">
                            <div class="section-title-lux">
                                <i class="feather icon-list"></i> Liste des Bénéficiaires Identifiés
                            </div>

                            <div id="preview-list">
                                @if(isset($beneficiaires))
                                    @include('admin.etat.items', ['beneficiaires' => $beneficiaires])
                                @else
                                    <div class="text-center py-5">
                                        <div class="mb-4" style="opacity: 0.2;">
                                            <i class="feather icon-search" style="font-size: 5rem; color: #fff;"></i>
                                        </div>
                                        <span class="text-muted fw-800 uppercase" style="font-size: 0.75rem; letter-spacing: 2px;">En attente de recherche</span>
                                        <p class="text-muted mt-2" style="font-size: 0.8rem;">Configurez les filtres pour explorer la base des adhérents.</p>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="text-center mt-5 mb-5">
                            <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn-premium-secondary" style="height: 45px;">
                                <i class="feather icon-arrow-left"></i> Retour
                            </a>
                        </div>

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

<script>
    $(document).ready(function() {
        $(".js-select2-premium").select2({ width: '100%', placeholder: "Sélectionner", allowClear: true, dropdownAutoWidth: false });
        
        $("#codeGcAssureur").on("change", function() {
            var codeGcAssureur = $(this).val();
            $.ajax({
                method: "GET",
                data: { codeGcAssureur: codeGcAssureur },
                url: "{{ url('admin/garantSouscripteur') }}",
            }).done(function (souscripteurs) {
                var result = '<option value="">Veuillez sélectionner le souscripteur</option>';
                for (var i = 0; i < souscripteurs.length; i++) {
                    result += '<option value="' + souscripteurs[i].id + '">' + souscripteurs[i].nom + '</option>';
                }
                $("#idSouscripteur").html(result).trigger('change');
            });
        });

        $("#idSouscripteur").on("change", function() {
            var idSouscripteur = $(this).val();
            $.ajax({
                method: "GET",
                data: { idSouscripteur: idSouscripteur },
                url: "{{ url('admin/sousPolice') }}",
            }).done(function (polices) {
                var result = '<option value="">Choisir la police</option>';
                for (var i = 0; i < polices.length; i++) {
                    result += '<option value="' + polices[i].id + '">' + polices[i].libellePolice + '</option>';
                }
                $("#idPolice").html(result).trigger('change');
            });
        });

        $("#idPolice").on("change", function() {
            var idPolice = $(this).val();
            var idSouscripteur = $('#idSouscripteur').val();
            $.ajax({
                method: "GET",
                data: { idPolice: idPolice, idSouscripteur: idSouscripteur },
                url: "{{ url('admin/policeCollege') }}",
            }).done(function (data) {
                var colleges = data.colleges;
                var police = data.police;

                // Mise à jour des dates
                if(idPolice && police) {
                    $("#date-effet-val").text(police.dateEffet);
                    $("#date-echeance-val").text(police.dateEcheance);
                    $("#date-validation-val").text(police.dateValidation);
                    $("#police-info-box").fadeIn();
                } else {
                    $("#police-info-box").fadeOut();
                }

                var result = '<option value="">Choisir le collège</option>';
                for (var i = 0; i < colleges.length; i++) {
                    result += '<option value="' + colleges[i].id + '">' + colleges[i].libelleCollege + '</option>';
                }
                $("#idCollege").html(result).trigger('change');
            });
        });
    });
</script>

<style>
/* ══════════════════════════════════════════════
       DESIGN ORGANIQUE & SOFT — INDEX
       ══════════════════════════════════════════════ */
    
    :root {
        --organic-base: rgba(10, 15, 25, 0.4);
        --organic-primary: #00f2fe;
        --organic-secondary: #4facfe;
        --organic-border: rgba(255, 255, 255, 0.06);
        --organic-shadow: rgba(0, 0, 0, 0.2);
    }

    .select2-premium-wrapper { width: 100%; position: relative; }
    .select2-premium-wrapper .select2-container { width: 100% !important; }

    .organic-glass-card {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        border: 1px solid var(--organic-border);
        border-radius: 40px;
        position: relative; overflow: hidden;
    }

    .text-organic-desc { color: #94a3b8; font-weight: 600; font-size: 0.8rem; }

    /* Bento Stats Organic */
    .bento-stats-lux {
        background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
        backdrop-filter: blur(40px);
        border: 1px solid var(--organic-border);
        border-radius: 35px; padding: 28px;
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        min-height: 120px; display: flex; align-items: center; justify-content: space-between;
    }
    .bento-stats-lux:hover { 
        background: rgba(255, 255, 255, 0.08); 
        border-color: var(--organic-primary); 
        transform: scale(1.03) translateY(-8px); 
        box-shadow: 0 40px 80px -15px rgba(0,0,0,0.5);
    }
    .stat-label-lux { font-size: 0.65rem; text-transform: uppercase; font-weight: 800; color: #64748b; letter-spacing: 2px; }
    .stat-val-lux { font-size: 2.5rem; font-weight: 900; color: #fff; display: block; line-height: 1; margin-top: 10px; font-family: 'Outfit', sans-serif; }
    .stat-icon-lux { font-size: 2.8rem; opacity: 0.4; color: var(--organic-primary); filter: drop-shadow(0 0 15px rgba(0,242,254,0.3)); }

    /* Glass Panels Organic */
    .glass-panel-lux {
        background: var(--organic-base);
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        border: 1px solid var(--organic-border);
        border-radius: 42px; padding: 30px; margin-bottom: 30px;
        box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
    }
    .section-title-lux { 
        font-size: 0.8rem; text-transform: uppercase; font-weight: 900; color: #fff; 
        letter-spacing: 2.5px; margin-bottom: 55px; display: flex; align-items: center; gap: 15px;
        opacity: 0.6;
    }
    .section-title-lux i { color: var(--organic-primary); font-size: 1.2rem; }
    
    /* Animations Organic Headers */
    .animate-organic-header { animation: organicHeader 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
    @keyframes organicHeader { from { opacity: 0; transform: translateY(-30px) scale(0.95); filter: blur(20px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }

        background: #ffffff !important;
        border-color: #e2e8f0 !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.03) !important;
        transition: all 0.4s ease;
    }
    body.light-mode .bento-stats-lux:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.06) !important;
        border-color: var(--vt-primary) !important;
    }
    body.light-mode .stat-val-lux { color: #1e293b; }
    body.light-mode .stat-label-lux { color: #94a3b8; }
    
    body.light-mode .glass-panel-lux {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1) !important;
    }
    body.light-mode .section-title-lux { color: #1e293b; opacity: 0.8; }
    
    

    body.light-mode .stat-icon-lux {
        opacity: 0.2;
    }

    /* Police Dates Badge */
    body.light-mode .police-dates-badge {
        background: rgba(var(--vt-primary-rgb), 0.05);
        border-color: rgba(var(--vt-primary-rgb), 0.2);
        color: var(--vt-primary);
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    }
    body.light-mode .police-dates-badge span span { color: #1e293b; }

    .badge-separator {
        width: 1px;
        height: 15px;
        background: rgba(255,255,255,0.2);
        margin: 0 15px;
    }
    body.light-mode .badge-separator { background: rgba(0,0,0,0.1); }
</style>

@endsection