@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">Évolution des Dépenses</h2>
                    <p class="val-muted" style="font-size: 0.8rem;"><i class="feather icon-trending-up me-2"></i> Analyse comparative des dépenses validées par période</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb breadcrumb-lux mb-0 p-0 bg-transparent">
                        <li class="breadcrumb-item"><a href="{{ route('home_path') }}" class="text-muted"><i class="feather icon-home"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('home_path') }}" class="text-muted">Accueil</a></li>
                        <li class="breadcrumb-item active text-primary" aria-current="page">Dépenses Validées</li>
                    </ul>
                </nav>
            </div>

            <!-- Modern Filter Section -->
            <div class="filter-bar-premium animate-fade-in">
                @if (in_array($role_id, [1, 3, 4, 5, 6, 25, 26, 29, 30, 31]))
                <div class="row g-4 mb-4">
                    <div class="col-md-4">
                        <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>
                    <div class="col-md-4">
                        <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-4">
                        <label class="filter-label-chic">Police</label>
                        <div class="select2-premium-wrapper">
                            {{ Form::select('idPolice', $polices, old('idPolice'), ['class' => 'select2 js-select2-premium', 'id' => 'idPolice']) }}
                        </div>
                    </div>
                </div>
                @else
                <div class="row g-4 mb-4">
                    <div class="col-md-4">
                        <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-4">
                        <label class="filter-label-chic">Police</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-4">
                        <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>
                @endif
                
                <div class="row g-4 mb-4">
                    @if ($role_id == 4)
                    <div class="col-md-4">
                        <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>
                    @endif
                    <div class="col-md-{{ $role_id == 4 ? '4' : '6' }}">
                        <label class="filter-label-chic">Famille d'acte</label>
                        <div class="select2-premium-wrapper">
                            {{ Form::select('codeGarantie', $garanties, $idGarantie ?? old('codeGarantie'), ['class' => 'select2 js-select2-premium', 'id' => 'codeGarantie']) }}
                        </div>
                    </div>
                    <div class="col-md-{{ $role_id == 4 ? '4' : '6' }}">
                        <label class="filter-label-chic">Prestataire</label>
                        <div class="select2-premium-wrapper">
                            {{ Form::select('codePrestataire', $prestataires, $idPrestataire ?? old('codePrestataire'), ['class' => 'select2 js-select2-premium', 'id' => 'codePrestataire']) }}
                        </div>
                    </div>
                </div>

                <div class="row g-4 align-items-end">
                    <div class="col-md-4">
                        <label class="filter-label-chic">Période du</label>
                        {{ Form::date('dateDebut', old('dateDebut'), ['class' => 'form-control input-chic', 'id' => 'dateDebut']) }}
                    </div>
                    <div class="col-md-4">
                        <label class="filter-label-chic">au</label>
                        {{ Form::date('dateFin', old('dateFin'), ['class' => 'form-control input-chic', 'id' => 'dateFin']) }}
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="btnDepensesearch" class="btn-valider-premium w-100">
                            <i class="feather icon-activity me-1"></i> Valider & Analyser
                        </button>
                    </div>
                </div>

                <!-- 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>Validation : <span id="date-validation-val">...</span></span>
                    </div>
                </div>
            </div>

            <!-- Content Area -->
            <div id="preview" class="animate-fade-in">
                @include('admin.evolution.depense.items', ['depenses' => $depenses])
            </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 });

    function formatDate(dateStr) {
        if (!dateStr) return '';
        const date = new Date(dateStr);
        return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
    }

    function formatNumber(value) {
        if (value == null || isNaN(value)) return '0';
        return Number(value).toLocaleString('fr-FR', { minimumFractionDigits: 0 });
    }

    // AJAX Cascading Logic
    $("#codeGcAssureur").on("change", function() {
        const val = $(this).val(); if (!val) return;
        $.ajax({ method: "GET", url: "{{ url('admin/garantSouscripteur') }}", data: { codeGcAssureur: val } })
        .done(function(data) {
            let res = '<option value="">Choisir un souscripteur</option>';
            data.forEach(i => res += `<option value="${i.souscripteur.id}">${i.souscripteur.nom}</option>`);
            $("#idSouscripteur").html(res).trigger('change');
        });
    });

    $("#idSouscripteur").on("change", function() {
        const val = $(this).val(); if (!val) return;
        $.ajax({ method: "GET", url: "{{ url('admin/sousPolice') }}", data: { idSouscripteur: val } })
        .done(function(data) {
            let res = '<option value="">Choisir une police</option>';
            data.forEach(i => res += `<option value="${i.id}">${i.libellePolice}</option>`);
            $("#idPolice").html(res).trigger('change');
        });
    });

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

            // Mise à jour des dates
            if(val && 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();
            }

            let res = '<option value="">Choisir un collège</option>';
            colleges.forEach(i => res += `<option value="${i.id}">${i.libelleCollege}</option>`);
            $("#idCollege").html(res).trigger('change');
        });
    });

    // Main Search Logic
    $('#btnDepensesearch').on('click', function() {
        showOverlay();
        const formData = {
            codeGcAssureur: $('#codeGcAssureur').val(),
            idPolice: $('#idPolice').val(),
            idCollege: $('#idCollege').val(),
            idSouscripteur: $('#idSouscripteur').val(),
            codeGarantie: $('#codeGarantie').val(),
            codePrestataire: $('#codePrestataire').val(),
            dateDebut: $('#dateDebut').val(),
            dateFin: $('#dateFin').val(),
            valider: "valider",
            _token: '{{ csrf_token() }}'
        };

        $.ajax({
            url: '{{ route("admin.depense.indexAll") }}',
            type: 'GET',
            data: formData,
            success: function(res) {
                if (res.status === 'success') {
                    $('#depense-banner').show();
                    $('#banner-date-range').text(`${formatDate(res.dateDebut)} - ${formatDate(res.dateFin)}`);
                    let rows = '';
                    const list = res.depenses.data || res.depenses;
                    list.forEach(d => {
                        rows += `
                        <tr class="cloud-row-lux">
                            <td><div class="fw-800 stat-primary">${d.codeGarant || ''}</div></td>
                            <td><div class="fw-800 stat-label-chic">${d.libellePolice || ''}</div></td>
                            <td class="text-center">${formatNumber(d.JANVIER)}</td>
                            <td class="text-center">${formatNumber(d.FEVRIER)}</td>
                            <td class="text-center">${formatNumber(d.MARS)}</td>
                            <td class="text-center">${formatNumber(d.AVRIL)}</td>
                            <td class="text-center">${formatNumber(d.MAI)}</td>
                            <td class="text-center">${formatNumber(d.JUIN)}</td>
                            <td class="text-center">${formatNumber(d.JUILLET)}</td>
                            <td class="text-center">${formatNumber(d.AOUT)}</td>
                            <td class="text-center">${formatNumber(d.SEPTEMBRE)}</td>
                            <td class="text-center">${formatNumber(d.OCTOBRE)}</td>
                            <td class="text-center">${formatNumber(d.NOVEMBRE)}</td>
                            <td class="text-center">${formatNumber(d.DECEMBRE)}</td>
                            <td class="text-end"><span class="val-total-lux">${formatNumber(d.TOTAUX)}</span></td>
                        </tr>`;
                    });
                    $('#depense-body').html(rows);
                }
                hideOverlay();
            },
            error: function() { hideOverlay(); }
        });
    });
});
</script>

<style>
/* ══════════════════════════════════════════════
       EVOLUTION DEPENSES — 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-bar-premium {
        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 35px; 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; }
    
    .btn-valider-premium {
        background: var(--vt-primary); color: #000; font-weight: 900; border: none; border-radius: 12px; 
        height: 42px; width: 100%; transition: all 0.3s; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px;
    }
    .btn-valider-premium:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(var(--vt-primary-rgb), 0.4); }

    /* Cloud Table Design */
    .cloud-table-lux { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
    .cloud-table-lux thead th {
        font-size: 0.55rem; font-weight: 800; color: var(--vt-muted); text-transform: uppercase; letter-spacing: 1px;
        padding: 10px 15px; text-align: left; opacity: 0.6; white-space: nowrap;
    }
    .cloud-row-lux { 
        background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(10px); color: #fff; transition: all 0.3s;
    }
    .cloud-row-lux:hover { background: rgba(255, 255, 255, 0.05); transform: scale(1.002); }
    .cloud-row-lux td { padding: 12px 15px; font-size: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
    .cloud-row-lux td:first-child { border-left: 1px solid rgba(255, 255, 255, 0.03); 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.03); border-top-right-radius: 15px; border-bottom-right-radius: 15px; }

    .stat-primary { color: var(--vt-primary); font-weight: 800; }
    .stat-label-chic { color: #fff; font-weight: 700; }
    .val-total-lux { font-weight: 900; color: #fff; background: rgba(var(--vt-primary-rgb), 0.1); border-radius: 6px; padding: 4px 8px; }

    /* Status Banner */
    .status-banner-lux {
        background: rgba(var(--vt-primary-rgb), 0.1); border: 1px solid rgba(var(--vt-primary-rgb), 0.2);
        padding: 15px 25px; border-radius: 18px; margin-bottom: 30px; display: flex; align-items: center; gap: 15px;
        color: #fff; font-weight: 700; font-size: 0.85rem;
    }

    /* Light Mode Overrides */
    body.light-mode .page-header-premium h2 { color: #1e293b; }
    body.light-mode .breadcrumb-lux .breadcrumb-item, body.light-mode .breadcrumb-lux .breadcrumb-item a { color: #64748b; }
    body.light-mode .breadcrumb-lux .breadcrumb-item + .breadcrumb-item::before { color: #cbd5e1; }
    body.light-mode .filter-bar-premium { background: #ffffff; border-color: rgba(0,0,0,0.06); box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
    body.light-mode .select2-container--default .select2-selection--single { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
    body.light-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: #1e293b !important; }
    body.light-mode .cloud-row-lux { background: #ffffff; color: #1e293b; border: 1px solid #f1f5f9; }
    body.light-mode .cloud-row-lux:hover { background: #f8fafc; }
    body.light-mode .stat-label-chic { color: #1e293b !important; }
    body.light-mode .val-total-lux { color: var(--vt-primary); background: rgba(var(--vt-primary-rgb), 0.1); }
    body.light-mode .val-primary { color: #16a34a !important; }
    body.light-mode .status-banner-lux { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
    body.light-mode .select2-dropdown { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #1e293b !important; }
    body.light-mode .select2-results__option { color: #1e293b !important; }
    body.light-mode .input-chic { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #1e293b !important; }

    .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; }

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