@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <!-- Page Header -->
            <div class="page-header-premium animate-fade-in">
                <div>
                    <h2 class="text-white fw-800">Etats & Statistiques</h2>
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb breadcrumb-lux">
                            <li class="breadcrumb-item"><a href="{{ route('home_path') }}"><i class="feather icon-home"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{ route('home_path') }}">Accueil</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Statistiques</li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- Modern Filter Section -->
            <div class="filter-bar-premium animate-fade-in">
                {{ Form::open(['route' => 'admin.etat.validerEtat', 'method' => 'GET', 'id' => 'form_statistique']) }}
                    <div class="row g-4 mb-4">
                        <div class="col-md-3">
                            <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-md-3">
                            <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-md-3">
                            <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-md-3">
                            <label class="filter-label-chic">Montant Supérieur à</label>
                            {{ Form::text('idDepense', isset($idDepense) ? $idDepense : old('idDepense'), ['class' => 'form-control input-chic', 'id' => 'idDepense', 'placeholder' => 'Ex: 50000']) }}
                        </div>
                    </div>
                    <div class="row g-4 align-items-end">
                        <div class="col-md-2">
                          
                        </div>
                        <div class="col-md-4">
                            <label class="filter-label-chic">Période du</label>
                            {{ Form::date('dateDebut', old('dateDebut'), ['class' => 'form-control input-chic']) }}
                        </div>
                        <div class="col-md-4">
                            <label class="filter-label-chic">au</label>
                            {{ Form::date('dateFin', old('dateFin'), ['class' => 'form-control input-chic']) }}
                        </div>
                        <div class="col-md-2">
                          
                        </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>

            <!-- Report List Section -->
            <div id="preview" class="animate-fade-in mt-4">
                @php
                    $versions = [
                        'V0 - Données élémentaires - RSP' => 'fiche1',
                        'V1 - Etat des dépenses par contrat' => 'fiche2',
                        'V1-B - Etat des dépenses par contrat par college' => 'fiche2-B',
                        'V2 - Récapitulatif des dépenses par tranches d\'âges' => 'fiche4',
                        'V3 - Etat des dépenses par famille d\'assurés' => 'fiche6',
                        'V4 - Evolution mensuelle des dépenses par famille d\'assurés' => 'fiche7',
                        'V5 - Etat des dépenses par prestataires médicaux' => 'fiche12',
                        'V6 - Etat des dépenses par famille d\'actes et par prestataires' => 'fiche13',
                        'V7 - Extraction des depenses detaillées-validees' => 'fiche_extraction1',
                        'V8 - Extraction des depenses par famille d\'assures-validees' => 'fiche_extraction2',
                    ];
                @endphp

                <div class="row g-4">
                    <!-- Colonne PDF -->
                    <div class="col-md-6">
                        <div class="report-section-title">
                            <i class="feather icon-pie-chart"></i>
                            <span>Rapports d'Analyse (PDF)</span>
                        </div>
                        <div class="report-grid">
                            @foreach ($versions as $label => $name)
                                @if(strpos($name, 'fiche_extraction') === false)
                                <button type="submit" name="{{ $name }}" value="{{ $label }}" form="form_statistique" 
                                        class="report-card-lux {{ $version == $label ? 'active' : '' }}">
                                    <div class="report-info">
                                        <div class="report-icon-box">
                                            <i class="feather icon-file-text"></i>
                                        </div>
                                        <span class="report-title">{{ $label }}</span>
                                    </div>
                                    <span class="pdf-badge-lux">PDF</span>
                                </button>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    <!-- Colonne EXCEL -->
                    <div class="col-md-6">
                        <div class="report-section-title excel">
                            <i class="feather icon-database"></i>
                            <span>Extractions de Données (EXCEL)</span>
                        </div>
                        <div class="report-grid">
                            @foreach ($versions as $label => $name)
                                @if(strpos($name, 'fiche_extraction') !== false)
                                <button type="submit" name="{{ $name }}" value="{{ $label }}" form="form_statistique" 
                                        class="report-card-lux {{ $version == $label ? 'active' : '' }}">
                                    <div class="report-info">
                                        <div class="report-icon-box excel">
                                            <i class="feather icon-grid"></i>
                                        </div>
                                        <span class="report-title">{{ $label }}</span>
                                    </div>
                                    <span class="excel-badge-lux">EXCEL</span>
                                </button>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer Return -->
            <div class="text-center mt-5 mb-5 pb-5">
                <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn" style="color: var(--vt-muted); font-weight: 700; gap: 10px; display: inline-flex; align-items: center; text-decoration: none;">
                    <i class="feather icon-arrow-left text-primary"></i> Retour 
                </a>
            </div>

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

<!-- Select2 Dropdown Restoration -->


<script>
$(document).ready(function() {
    $(".js-select2-premium").select2({ minimumResultsForSearch: Infinity, placeholder: "Sélectionner", allowClear: true, width: '100%', dropdownAutoWidth: false });

    // Fix for infinite loading overlay on PDF downloads
    $(".report-card-lux").on("click", function() {
        showOverlay();
        // Hide overlay after 5 seconds (approximate time for PDF generation to start download)
        setTimeout(function() {
            hideOverlay();
        }, 5000);
    });

    $("#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="">Veuillez sélectionner une 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) {
                $("#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="">Veuillez sélectionner un 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>
/* ══════════════════════════════════════════════
       ÉTATS & RAPPORTS — Design Cloud-Premium
       ══════════════════════════════════════════════ */

    .page-header-premium { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
    .page-header-premium h2 { font-weight: 800; color: #fff; letter-spacing: -0.5px; margin: 0; }

    /* Breadcrumb Modern */
    .breadcrumb-lux { background: transparent; padding: 0; margin-top: 5px; }
    .breadcrumb-lux .breadcrumb-item { font-size: 0.75rem; font-weight: 600; color: var(--vt-muted); }
    .breadcrumb-lux .breadcrumb-item a { color: var(--vt-muted); text-decoration: none; }
    .breadcrumb-lux .breadcrumb-item.active { color: var(--vt-primary); }
    .breadcrumb-lux .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.2); content: "→"; }

    /* Space Glass Filter Bar */
    .filter-glass-container {
        background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px; padding: 25px; margin-bottom: 40px;
    }

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

    /* Select2 Premium Fix */
    .select2-container--default .select2-selection--single {
        background: rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important; height: 42px !important; display: flex !important; align-items: center !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff !important; padding-left: 15px !important; font-size: 0.8rem; background: transparent !important; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; }
    
    /* Neutralisation du badge Sélection */
    .select2-selection__choice { background: transparent !important; border: none !important; color: #fff !important; }

    /* Glass Report Cards */
    .report-grid { display: flex; flex-direction: column; gap: 12px; width: 100%; }
    
    .report-card-lux {
        background: rgba(255, 255, 255, 0.03) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 18px !important;
        padding: 15px 25px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-align: left !important;
        width: 100% !important;
        cursor: pointer !important;
        position: relative !important;
    }
    .report-card-lux:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: var(--vt-primary) !important;
        transform: translateX(10px) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }
    .report-card-lux.active {
        background: rgba(var(--vt-primary-rgb), 0.1) !important;
        border-color: var(--vt-primary) !important;
    }

    .report-info { display: flex; align-items: center; gap: 15px; }
    .report-icon-box { 
        width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.05); 
        display: flex; align-items: center; justify-content: center; color: var(--vt-primary);
        font-size: 1.2rem;
    }
    .report-title { color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.3px; }

    .report-section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
        color: var(--vt-primary);
        font-weight: 800;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 1px;
        width: 100%;
    }
    .report-section-title i { font-size: 1rem; }
    .report-section-title.excel { color: #27ae60; margin-top: 10px; }

    .report-icon-box.excel { color: #27ae60; background: rgba(39, 174, 96, 0.1); }

    .pdf-badge-lux {
        background: rgba(231, 76, 60, 0.15); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3);
        padding: 4px 12px; border-radius: 8px; font-size: 0.6rem; font-weight: 900; text-transform: uppercase;
        letter-spacing: 1px; box-shadow: 0 0 10px rgba(231, 76, 60, 0.2); transition: all 0.3s;
    }
    
    .excel-badge-lux {
        background: rgba(39, 174, 96, 0.15); color: #27ae60; border: 1px solid rgba(39, 174, 96, 0.3);
        padding: 4px 12px; border-radius: 8px; font-size: 0.6rem; font-weight: 900; text-transform: uppercase;
        letter-spacing: 1px; box-shadow: 0 0 10px rgba(39, 174, 96, 0.2); transition: all 0.3s;
    }

    .report-card-lux:hover .pdf-badge-lux { background: #e74c3c; color: #fff; box-shadow: 0 0 15px rgba(231, 76, 60, 0.5); }
    .report-card-lux:hover .excel-badge-lux { background: #27ae60; color: #fff; box-shadow: 0 0 15px rgba(39, 174, 96, 0.5); }

    /* Police Dates Badge */
    .police-dates-badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: rgba(var(--vt-primary-rgb), 0.1);
        border: 1px solid rgba(var(--vt-primary-rgb), 0.2);
        padding: 8px 24px;
        border-radius: 50px;
        color: var(--vt-primary);
        font-size: 0.8rem;
        font-weight: 600;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .police-dates-badge i { font-size: 1rem; }
    .police-dates-badge span span { color: #fff; font-weight: 800; margin: 0 5px; }
    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>


<style>
.select2-dropdown {
        background: rgba(30,35,45,0.98) !important; backdrop-filter: blur(25px) !important;
        border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; border-radius: 12px !important;
    }
    .select2-results__option { background: transparent !important; color: #fff !important; font-size: 0.75rem !important; }
    .select2-results__option--highlighted { background: rgba(var(--vt-primary-rgb), 0.2) !important; color: var(--vt-primary) !important; }

    /* ── Light Mode Overrides ── */
    body.light-mode h2.text-white { color: #1e293b !important; }
    body.light-mode .select2-container--default .select2-selection--single { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; }
    body.light-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: #1e293b !important; }
    
    body.light-mode .report-card-lux { 
        background: #ffffff !important; 
        border: 1px solid #e2e8f0 !important; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; 
    }
    body.light-mode .report-card-lux:hover { 
        background: #f8fafc !important; 
        border-color: var(--vt-primary) !important; 
    }
    body.light-mode .report-title { color: #1e293b; }
    body.light-mode .report-icon-box { background: rgba(var(--vt-primary-rgb), 0.1); }
    body.light-mode .report-icon-box.excel { background: rgba(39, 174, 96, 0.1); }
    body.light-mode .report-section-title { color: #1e293b; opacity: 0.8; }
    body.light-mode .report-section-title.excel { color: #27ae60; opacity: 1; }

    /* Badges Mode Clair */
    body.light-mode .pdf-badge-lux { background: rgba(231, 76, 60, 0.1); border-color: rgba(231, 76, 60, 0.2); }
    body.light-mode .excel-badge-lux { background: rgba(39, 174, 96, 0.1); border-color: rgba(39, 174, 96, 0.2); }
    body.light-mode .report-card-lux:hover .pdf-badge-lux { background: #e74c3c !important; color: #fff !important; }
    body.light-mode .report-card-lux:hover .excel-badge-lux { background: #27ae60 !important; color: #fff !important; }
</style>

@endsection