@extends('admin.layout.master')
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/files/assets/css/select-responsive-fraza.css') }}">



@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">
                <h2 class="text-white fw-800">Suivi des Sinistres</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb" style="background: transparent; padding: 0; margin-top: 5px;">
                        <li class="breadcrumb-item"><a href="{{ route('home_path') }}" style="color: var(--vt-muted); font-size: 0.75rem;"><i class="feather icon-home"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('home_path') }}" style="color: var(--vt-muted); font-size: 0.75rem;">Accueil</a></li>
                        <li class="breadcrumb-item active" style="color: var(--vt-primary); font-size: 0.75rem; font-weight: 700;">Suivi Global des Dépenses</li>
                    </ol>
                </nav>
            </div>

            <div class="page-body" style="margin-top:5px">
                <div class="row">
                    <div class="col-sm-12">
                        
                        <!-- KPIs - Bento Style Lux -->
                        <div class="row mb-5 g-4 animate-fade-in">
                             @foreach ($depenseSinitres as $ds)
                             <div class="col-md-4">
                                <div class="bento-stats-lux">
                                    <div>
                                        <span class="stat-label-lux">Sinistres Validés</span>
                                        <span class="stat-val-lux text-info">{{ number_format($ds->SinistresValide, 0, '', ' ') }} <small style="font-size: 0.7rem; color: var(--vt-muted);">FCFA</small></span>
                                    </div>
                                    <div class="stat-icon-lux"><i class="feather icon-check-circle"></i></div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="bento-stats-lux">
                                    <div>
                                        <span class="stat-label-lux">Bénéficiaires Traités</span>
                                        <span class="stat-val-lux text-warning">{{ number_format($ds->BenefTraites, 0, '', ' ') }}</span>
                                    </div>
                                    <div class="stat-icon-lux"><i class="feather icon-users"></i></div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="bento-stats-lux">
                                    <div>
                                        <span class="stat-label-lux">Encours Provisoires</span>
                                        <span class="stat-val-lux text-success">{{ number_format($ds->SinistresEnAttente, 0, '', ' ') }} <small style="font-size: 0.7rem; color: var(--vt-muted);">FCFA</small></span>
                                    </div>
                                    <div class="stat-icon-lux"><i class="feather icon-clock"></i></div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <!-- Space Glass Filter Bar -->
                        <div class="filter-bar-premium animate-fade-in">
                            <form action="{{ route('admin.sinistre.indexAll') }}" onsubmit="showOverlay()" method="GET" id="form_search">
                                @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 d'Assurance</label>
                                        <div class="select2-premium-wrapper">
                                            {{ Form::select('idPolice', $polices, $id ?? old('idPolice'), ['class' => 'select2 js-select2-premium', 'id' => 'idPolice']) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-4 align-items-end">
                                    <div class="col-md-3">
                                        <label class="filter-label-chic">Collège Bénéficiaire</label>
                                        <div class="select2-premium-wrapper">
                                            {{ Form::select('idCollege', $colleges, $idCollege ?? old('idCollege'), ['class' => 'select2 js-select2-premium', 'id' => 'idCollege']) }}
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="filter-label-chic">Date Début</label>
                                        {{ Form::date('dateDebut', old('dateDebut'), ['class' => 'form-control input-chic', 'id' => 'dateDebut']) }}
                                    </div>
                                    <div class="col-md-3">
                                        <label class="filter-label-chic">Date Fin</label>
                                        {{ Form::date('dateFin', old('dateFin'), ['class' => 'form-control input-chic', 'id' => 'dateFin']) }}
                                    </div>
                                    <div class="col-md-3">
                                        <button type="submit" class="btn-lux-validate w-100">
                                            <i class="feather icon-play-circle"></i> Lancer l'Analyse
                                        </button>
                                    </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 d'Assurance</label>
                                        <div class="select2-premium-wrapper">
                                            {{ Form::select('idPolice', $polices, $id ?? old('idPolice'), ['class' => 'select2 js-select2-premium', 'id' => 'idPolice']) }}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="filter-label-chic">Collège Bénéficiaire</label>
                                        <div class="select2-premium-wrapper">
                                            {{ Form::select('idCollege', $colleges, $idCollege ?? old('idCollege'), ['class' => 'select2 js-select2-premium', 'id' => 'idCollege']) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-4 align-items-end">
                                    <div class="col-md-4">
                                        <label class="filter-label-chic">Date Début</label>
                                        {{ Form::date('dateDebut', old('dateDebut'), ['class' => 'form-control input-chic', 'id' => 'dateDebut']) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="filter-label-chic">Date Fin</label>
                                        {{ Form::date('dateFin', old('dateFin'), ['class' => 'form-control input-chic', 'id' => 'dateFin']) }}
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" class="btn-lux-validate w-100">
                                            <i class="feather icon-play-circle"></i> Lancer l'Analyse
                                        </button>
                                    </div>
                                </div>
                                @endif
                            </form>
                        </div>

                        <!-- Analyse Results Body -->
                        <div class="glass-panel-lux animate-fade-in shadow-xl">
                            <div class="section-title-lux">
                                <i class="feather icon-file-text"></i> Rapport de Synthèse
                            </div>

                            @if(isset($idPolice) || isset($idSouscripteur) || isset($dateFin))
                                <div class="alert border-0 shadow-sm mb-4" style="background: rgba(255,255,255,0.05); border-radius: 15px;">
                                    <p class="mb-0 fw-bold text-white" style="font-size: 0.85rem;">
                                        <i class="feather icon-info text-primary me-2"></i> Analyse active pour : 
                                        @isset($PoliceAffs) <span class="text-primary">{{ $PoliceAffs->libellePolice }}</span> @endif
                                        @isset($SouscripteurAffs) <span class="opacity-75"> | </span> <span class="text-white">{{ $SouscripteurAffs->nom }}</span> @endif
                                        <span class="ms-3 small text-muted">Période : {{ $dateDebut ? \Carbon\Carbon::parse($dateDebut)->format('d/m/Y') : "Origine" }} - {{ \Carbon\Carbon::parse($dateFin)->format('d/m/Y') }}</span>
                                    </p>
                                </div>
                                
                                <div class="text-center py-5">
                                    <div class="mb-4" style="opacity: 0.1;">
                                        <i class="feather icon-activity" style="font-size: 5rem; color: #fff;"></i>
                                    </div>
                                    <span class="text-muted fw-800 uppercase" style="font-size: 0.75rem; letter-spacing: 2px;">Rapport de synthèse généré avec succès</span>
                                    <p class="text-muted mt-2" style="font-size: 0.8rem;">Les données ci-dessus reflètent l'état des sinistres sur la période sélectionnée.</p>
                                </div>
                            @else
                                <div class="text-center py-5">
                                    <div class="mb-4" style="opacity: 0.2;">
                                        <i class="feather icon-layers" 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 configuration</span>
                                    <p class="text-muted mt-2" style="font-size: 0.8rem;">Veuillez utiliser les filtres ci-dessus pour charger les données de sinistralité.</p>
                                </div>
                            @endif
                        </div>

                        <!-- Footer Return -->
                        <div class="text-center mt-4 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 à la gestion
                            </a>
                        </div>

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

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

        $("#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="">Choisir un 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 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 (colleges) {
                var result = '<option value="">Choisir 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');
            });
        });
    });

    function showOverlay() { document.getElementById("overlay").style.display = "block"; }
</script>

<style>
/* ══════════════════════════════════════════════
       DESIGN CLOUD-PREMIUM — SUIVI DES SINISTRES
       ══════════════════════════════════════════════ */
    
    .page-header-premium { margin-bottom: 35px; }
    .page-header-premium h2 { font-weight: 800; color: #fff; letter-spacing: -0.5px; margin-bottom: 5px; }

    /* Bento Stats Lux */
    .bento-stats-lux {
        background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 25px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-height: 120px; display: flex; align-items: center; justify-content: space-between;
    }
    .bento-stats-lux:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--vt-primary); transform: translateY(-5px); }
    .stat-label-lux { font-size: 0.7rem; text-transform: uppercase; font-weight: 800; color: var(--vt-muted); letter-spacing: 1px; }
    .stat-val-lux { font-size: 1.5rem; font-weight: 900; color: #fff; display: block; margin-top: 5px; }
    .stat-icon-lux { font-size: 2.2rem; opacity: 0.4; color: var(--vt-primary); }

    /* Space Glass Panels */
    .glass-panel-lux {
        background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px; padding: 30px; margin-bottom: 35px; box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    }
    .section-title-lux { font-size: 0.8rem; text-transform: uppercase; font-weight: 800; color: var(--vt-primary); letter-spacing: 1.5px; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }
    
    /* Elegant Filters */

    /* Custom Buttons */
    .btn-lux-validate {
        background: var(--vt-primary); color: #000 !important; font-weight: 900; border: none; border-radius: 14px; 
        height: 42px; padding: 0 30px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1.2px;
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    }
    .btn-lux-validate:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--vt-primary-rgb), 0.4); }

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

    /* Select2 Custom Premium */
    .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; }
    
    /* Fix Select2 green background arrow bug */
    .select2.select2-container .select2-selection .select2-selection__arrow {
        background: transparent !important;
        border: none !important;
        border-radius: 0 12px 12px 0 !important;
    }

    /* Fix Select2 dropdown white background conflict from select-responsive-fraza.css */
    .select2-container .select2-dropdown .select2-results ul {
        background: transparent !important;
        border: none !important;
    }
    .select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
        background-color: rgba(var(--vt-primary-rgb), 0.2) !important;
        color: var(--vt-primary) !important;
    }
    .select2-container .select2-dropdown .select2-search input {
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 8px !important;
        color: #fff !important;
    }
    body.light-mode .select2-container .select2-dropdown .select2-search input {
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !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; }
</style>

@endsection