@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="fw-800 text-white mb-1">Liste des Polices</h2>
                    <p class="text-muted small mb-0">Recherche et consultation spécifique</p>
                </div>
            </div>

            <!-- Dashboard Stats Row -->
            <div class="kpi-row animate-fade-in">
                <div class="kpi-card">
                    <i class="feather icon-file-text kpi-icon"></i>
                    <span class="kpi-label">Polices Total</span>
                    <span class="kpi-value">{{ $nbre_police ?? 0 }}</span>
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar" style="width: 100%; background: var(--vt-primary);"></div>
                    </div>
                </div>
                <div class="kpi-card">
                    <i class="feather icon-users kpi-icon"></i>
                    <span class="kpi-label">Adhérents</span>
                    <span class="kpi-value">{{ number_format($nbre_adherent ?? 0, 0, ',', ' ') }}</span>
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar" style="width: 100%; background: #f1c40f;"></div>
                    </div>
                </div>
                <div class="kpi-card">
                    <i class="feather icon-user-check kpi-icon"></i>
                    <span class="kpi-label">Bénéficiaires</span>
                    <span class="kpi-value">{{ number_format($nbre_beneficiaire ?? 0, 0, ',', ' ') }}</span>
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar" style="width: 100%; background: #2ecc71;"></div>
                    </div>
                </div>
            </div>

            <!-- Modern Filter Section -->
            <div class="filter-bar-premium animate-fade-in" style="animation-delay: 0.1s;">
                <form id="searchForm">
                    @if(isset($idSouscripteur))
                        <input type="hidden" id="idSouscripteur" value="{{ $idSouscripteur }}">
                    @endif
                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <label class="filter-label-chic">Recherche Libre</label>
                            <input type="text" name="recherche" id="recherche" class="form-control input-chic" placeholder="Nom ou N° de police..." value="{{ old('recherche') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="filter-label-chic">Statut</label>
                            <div class="select2-premium-wrapper">
                                {{ Form::select('codeEtatPolice', isset($etatpolice) ? $etatpolice : [], old('codeEtatPolice'), ['class' => 'select2 js-select2-premium', 'id' => 'codeEtatPolice', 'placeholder' => 'Tous les états']) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="filter-label-chic">Date Effet</label>
                            <input type="date" name="dateEffet" id="dateEffet" class="form-control input-chic" value="{{ old('dateEffet') }}">
                        </div>
                        <div class="col-md-2">
                            <label class="filter-label-chic">Date Échéance</label>
                            <input type="date" name="dateEcheance" id="dateEcheance" class="form-control input-chic" value="{{ old('dateEcheance') }}">
                        </div>
                        {{-- <div class="col-md-2">
                            <button type="submit" id="btnPoliceSearch" class="btn-valider-premium w-100">
                                <i class="feather icon-filter"></i> Filtrer
                            </button>
                        </div> --}}
                    </div>
                </form>
            </div>

            <!-- Results Section (INCLUDE: INITIAL LOGIC items, NOT itemsAll!) -->
            <div id="preview" class="results-container animate-fade-in">
                @include('Garant::admin.police.items', ['polices' => $polices])
            </div>



            <!-- Back Action -->
            <div class="text-center mt-5 mb-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; transition: 0.3s; text-decoration: none;">
                    <i class="feather icon-arrow-left"></i> Retour à l'accueil
                </a>
            </div>

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

<script>
$(document).ready(function() {
    // Initialiser les select2 avec style premium
    $(".js-select2-premium").select2({
        minimumResultsForSearch: Infinity,
        placeholder: "Choisir un état",
        allowClear: true,
        width: '100%',
        dropdownAutoWidth: true
    });

    // Debounce for input search
    let timeout;
    $('#recherche, #codeEtatPolice, #dateEffet, #dateEcheance').on('input change', function() {
        clearTimeout(timeout);
        timeout = setTimeout(updateResults, 300);
    });

    $('#searchForm').on('submit', function(e) {
        e.preventDefault();
        updateResults();
    });

    // Ancien code conservé au cas où une balise #codeGcAssureur serait rajoutée
    $("#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 un souscripteur</option>';
            for (var i = 0; i < souscripteurs.length; i++) {
                result += '<option value="' + souscripteurs[i].souscripteur.id + '">' + souscripteurs[i].souscripteur.nom + ' ' + souscripteurs[i].souscripteur.prenoms + '</option>';
            }
            $("#idSouscripteur").html(result);
        });
    });

    function updateResults() {
        let formData = {
            idSouscripteur: $('#idSouscripteur').length ? $('#idSouscripteur').val() : '',
            recherche: $('#recherche').val(),
            codeEtatPolice: $('#codeEtatPolice').val(),
            dateEffet: $('#dateEffet').val(),
            dateEcheance: $('#dateEcheance').val()
        };

        // Si des filtres sont appliqués (ou si on passe le souscripteur)
        $.ajax({
            url: "{{ route('admin.police.items') }}",
            method: "GET",
            data: formData,
            beforeSend: function() {
                showOverlay();
            },
            success: function(response) {
                hideOverlay();
                $('#preview').hide().html(response).fadeIn(300);
            },
            error: function() {
                hideOverlay();
                $("#preview").html('<div class="text-center py-5 text-danger fw-700">Oups ! Une erreur est survenue lors de la recherche.</div>');
            }
        });
    }

    // Modal Handling (Ajout Adhérent)
    $(document).on('click', '.open-dependant-modal', function(e) {
        e.preventDefault();
        var url = $(this).data('url');
        var idPolice = $(this).data('idpolice');
        
        console.log("Opening modal for police:", idPolice, "URL:", url);

        $.ajax({
            url: url,
            type: 'GET',
            data: { idPolice: idPolice },
            success: function(response) {
                $("#modal-container").html(response);
                let modalElement = document.querySelector("#modal-container .modal");
                if (modalElement) {
                    var myModal = new bootstrap.Modal(modalElement);
                    myModal.show();
                } else {
                    console.error("Modal element not found in response");
                }
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error);
                Toastify({
                    text: "Impossible de charger le formulaire. Veuillez réessayer.",
                    duration: 4000,
                    gravity: "top",
                    position: "right",
                    backgroundColor: "#e74c3c"
                }).showToast();
            }
        });
    });
});
</script>

<style>
/* ══════════════════════════════════════════════
       LISTE DES POLICES — Design Premium (Index)
       ══════════════════════════════════════════════ */

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

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

    .kpi-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }

    .kpi-card {
        background: rgba(255, 255, 255, 0.03) !important;
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 25px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .kpi-card:hover {
        transform: translateY(-5px);
        border-color: rgba(var(--vt-primary-rgb), 0.3);
        background: rgba(var(--vt-primary-rgb), 0.02) !important;
    }

    .kpi-icon {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 1.5rem;
        opacity: 0.15;
        color: var(--vt-primary);
    }

    .kpi-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        color: var(--vt-muted);
        display: block;
        margin-bottom: 5px;
    }

    .kpi-value {
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
    }

    .kpi-progress {
        height: 4px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        margin-top: 15px;
        overflow: hidden;
    }

    .kpi-progress-bar {
        height: 100%;
        border-radius: 10px;
    }

    .results-container {
        min-height: 400px;
    }

    /* Loader */
    .premium-loader {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px;
        color: var(--vt-primary);
    }

    /* ── Light Mode Overrides ── */
    body.light-mode h2.text-white {
        color: #1e293b !important;
    }

    body.light-mode .kpi-card {
        background: #ffffff !important;
        border: 1px solid rgba(var(--vt-primary-rgb), 0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    }
    
    body.light-mode .kpi-card:hover {
        border-color: var(--vt-primary);
        box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    }

    body.light-mode .kpi-value {
        color: #1e293b !important;
    }

    body.light-mode .kpi-icon {
        opacity: 0.4;
        color: var(--vt-primary);
    }

    body.light-mode .kpi-progress {
        background: #f1f5f9;
    }
</style>

@endsection