@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">Dépenses par Famille</h2>
                    <p class="val-muted" style="font-size: 0.8rem;"><i class="feather icon-copy me-2"></i> Analyse détaillée des consommations par groupe familial</p>
                </div>
                <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 Dépenses</li>
                    </ul>
                </nav>
            </div>

            <!-- Modern Filter Section -->
            <div class="filter-bar-premium animate-fade-in">
                {{ Form::open(['route' => 'admin.etat.validerDepenseFamille', 'method' => 'GET', 'id' => 'form_statistique']) }}
                    <input name="version" type="hidden" value="{{$version ?? ''}}">
                    <div class="row g-4 mb-4">
                        <div class="col-md-3">
                            <label class="filter-label-chic">Numéro/Nom Adhérent</label>
                            {{ Form::text('adherent', $adherent ?? old('adherent'), ['class' => 'form-control input-chic', 'placeholder' => 'Recherche...']) }}
                        </div>
                        <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', 'required']) }}
                            </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>
                    <div class="row g-4 align-items-end">
                        <div class="col-md-3">
                            <label class="filter-label-chic">Montant Supérieur à</label>
                            {{ Form::text('idDepense', $idDepense ?? old('idDepense'), ['class' => 'form-control input-chic', 'placeholder' => 'Ex: 50000']) }}
                        </div>
                        <div class="col-md-3">
                            <label class="filter-label-chic">Période du *</label>
                            {{ Form::date('dateDebut', $dateDebut ?? old('dateDebut'), ['class' => 'form-control input-chic', 'required']) }}
                        </div>
                        <div class="col-md-3">
                            <label class="filter-label-chic">au *</label>
                            {{ Form::date('dateFin', $dateFin ?? old('dateFin'), ['class' => 'form-control input-chic', 'required']) }}
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn-valider-premium w-100" onclick="showOverlay()">
                                <i class="feather icon-check-circle"></i> Valider les Critères
                            </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>

            <!-- Content Area (Table) -->
            <div id="preview" class="animate-fade-in mt-4">
                @isset ($depenseFamilles)
                    @php
                        $total_popActive = 0; $total_popTraite = 0; $total_montantReclame = 0;
                        $total_montantNonRembourse = 0; $total_montantRembourse = 0; $total_coutMoyen = 0;
                    @endphp

                    @foreach ($depenseFamilles as $d)
                        @php
                            $total_popActive += (int)$d->popActive; $total_popTraite += (int)$d->popTraite;
                            $total_montantReclame += (int)$d->montantReclame; $total_montantRembourse += (int)$d->montantRembourse;
                            $total_montantNonRembourse += (int)$d->NonRembourse; $total_coutMoyen += (int)$d->Coutmoyen;
                        @endphp
                    @endforeach

                    <!-- KPI Recap Row -->
                    <div class="kpi-row-lux animate-fade-in">
                        <div class="kpi-card-lux">
                            <span class="kpi-label-lux">Population Traitée</span>
                            <span class="kpi-val-lux text-primary">{{ number_format($total_popTraite, 0, '', ' ') }}</span>
                        </div>
                        <div class="kpi-card-lux">
                            <span class="kpi-label-lux">Total Réclamé</span>
                            <span class="kpi-val-lux">{{ number_format($total_montantReclame, 0, '', ' ') }} <small class="fw-normal" style="font-size: 0.6rem;">CFA</small></span>
                        </div>
                        <div class="kpi-card-lux">
                            <span class="kpi-label-lux">Total Remboursé</span>
                            <span class="kpi-val-lux text-success">{{ number_format($total_montantRembourse, 0, '', ' ') }} <small class="fw-normal" style="font-size: 0.6rem;">CFA</small></span>
                        </div>
                    </div>

                    <!-- Cloud Table -->
                    <div class="table-responsive">
                        <table class="cloud-table-lux">
                            <thead>
                                <tr>
                                    <th>Famille / Adhérent</th>
                                    <th class="text-center">Pop. Active</th>
                                    <th class="text-center">Traitée</th>
                                    <th class="text-end">Montant Réclamé</th>
                                    <th class="text-end">Montant Remboursé</th>
                                    <th class="text-end">Cout Moyen</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($depenseFamilles as $d)
                                <tr class="cloud-row-lux animate-fade-in" style="animation-delay: {{ $loop->index * 0.01 }}s">
                                    <td>
                                        <div class="fw-bold stat-label-chic">{{ str_limit($d->adherent, 35) }}</div>
                                        <div class="val-muted">{{ $d->numeroAdherent }}</div>
                                    </td>
                                    <td class="text-center stat-primary">{{ $d->popActive }}</td>
                                    <td class="text-center stat-primary fw-800">{{ $d->popTraite }}</td>
                                    <td class="text-end fw-bold">{{ number_format($d->montantReclame, 0, '', ' ') }}</td>
                                    <td class="text-end text-success fw-bold">{{ number_format($d->montantRembourse, 0, '', ' ') }}</td>
                                    <td class="text-end">
                                        <span class="badge bg-primary-transparent text-primary px-2 py-1" style="border-radius: 6px; font-size: 0.65rem;">
                                            {{ number_format($d->Coutmoyen, 0, '', ' ') }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            <!-- Footer Return -->
            <div class="text-center mt-5 mb-5 pb-5">
                <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn-premium-secondary" style="height: 45px;">
                    <i class="feather icon-arrow-left"></i> Retour à l'Espace Précédent
                </a>
            </div>

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

<!-- Select2 Dropdown Customization -->


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

    $("#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 && 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="">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>
/* ══════════════════════════════════════════════
       DÉPENSES PAR FAMILLE — 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; }

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

    /* 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: "→"; }


    /* Results Header Stats */
    .kpi-row-lux { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
    .kpi-card-lux {
        background: rgba(var(--vt-primary-rgb), 0.1); border: 1px solid rgba(var(--vt-primary-rgb), 0.2);
        border-radius: 18px; padding: 15px 20px; flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px;
    }
    .kpi-label-lux { font-size: 0.6rem; text-transform: uppercase; font-weight: 800; color: var(--vt-muted); letter-spacing: 0.5px; }
    .kpi-val-lux { font-size: 1.2rem; font-weight: 900; color: #fff; }

    /* Cloud Table Design */
    .cloud-table-lux { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
    .cloud-table-lux thead th {
        font-size: 0.6rem; font-weight: 800; color: var(--vt-muted); text-transform: uppercase; letter-spacing: 1px;
        padding: 10px 20px; text-align: left; opacity: 0.6;
    }
    .cloud-row-lux { 
        background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); color: #fff; transition: all 0.3s;
    }
    .cloud-row-lux:hover { background: rgba(255, 255, 255, 0.06); transform: scale(1.005); }
    .cloud-row-lux td { padding: 15px 20px; font-size: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .cloud-row-lux td:first-child { border-left: 1px solid rgba(255, 255, 255, 0.05); border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
    .cloud-row-lux td:last-child { border-right: 1px solid rgba(255, 255, 255, 0.05); border-top-right-radius: 15px; border-bottom-right-radius: 15px; }

    .val-primary { color: var(--vt-primary); font-weight: 800; }
    .val-muted { opacity: 0.6; font-size: 0.65rem; }
</style>


<style>
.bg-primary-transparent { background: rgba(var(--vt-primary-rgb), 0.1); }

    /* ── Light Mode Overrides ── */
    body.light-mode h2.text-white { color: #1e293b !important; }
    body.light-mode .breadcrumb-lux .breadcrumb-item, body.light-mode .breadcrumb-lux .breadcrumb-item a { color: #64748b; }
    
    
    body.light-mode .kpi-card-lux { 
        background: #ffffff; 
        border: 1px solid #e2e8f0; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
    }
    body.light-mode .kpi-label-lux { color: #64748b; }
    body.light-mode .kpi-val-lux { color: #1e293b; }
    
    body.light-mode .cloud-row-lux { 
        background: #ffffff; 
        color: #1e293b; 
        border: 1px solid #f1f5f9;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02); 
    }
    body.light-mode .cloud-row-lux:hover { 
        background: #f8fafc; 
        border-color: var(--vt-primary); 
    }
    
    body.light-mode .stat-primary { color: var(--vt-primary); }
    body.light-mode .stat-label-chic { color: #1e293b; }
    body.light-mode .val-muted { color: #64748b; opacity: 1; }

    /* 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>

@endsection