@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">Polices </h2>
                    <p class="text-muted small mb-0">Gestion et suivi des polices d'assurance</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 </span>
                    <span class="kpi-value" id="kpi-polices">
                        <i class="feather icon-loader rotate-infinite opacity-50" style="font-size: 1.2rem;"></i>
                    </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" id="kpi-adherents">
                        <i class="feather icon-loader rotate-infinite opacity-50" style="font-size: 1.2rem;"></i>
                    </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" id="kpi-beneficiaires">
                        <i class="feather icon-loader rotate-infinite opacity-50" style="font-size: 1.2rem;"></i>
                    </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;">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="filter-label-chic">Recherche </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', $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="button" id="btnPoliceSearch" class="btn-valider-premium w-100">
                            <i class="feather icon-filter"></i> Filtrer
                        </button>
                    </div> --}}
                </div>
            </div>

            <!-- Results Section -->
            <div id="preview" class="results-container">
                @include('Garant::admin.police.itemsAll', ['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>
</section>

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

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

    .rotate-infinite {
        animation: rotate 2s linear infinite;
        display: inline-block;
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
</style>
@endsection

@section('scripts')
<script>
function animateValue(element, start, end, duration) {
    if (!element) return;
    const range = end - start;
    const increment = range / (duration / 16);
    let current = start;
    
    const timer = setInterval(() => {
        current += increment;
        if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
            element.textContent = Math.round(end).toLocaleString();
            clearInterval(timer);
        } else {
            element.textContent = Math.floor(current).toLocaleString();
        }
    }, 16);
}

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

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

    $('#codeEtatPolice').on('change', updateResults);
    $('#btnPoliceSearch').on('click', updateResults);

    // Charger les compteurs de manière asynchrone au chargement
    loadKpiStats();

    function loadKpiStats() {
        $.ajax({
            url: "{{ route('admin.police.kpi_stats') }}",
            method: "GET",
            data: {
                idSouscripteur: "{{ request('idSouscripteur') }}",
                codeGcAssureur: "{{ request('codeGcAssureur') }}",
                idPolice: "{{ request('idPolice') }}",
                idCollege: "{{ request('idCollege') }}"
            },
            success: function(response) {
                const adEl = document.getElementById('kpi-adherents');
                const benEl = document.getElementById('kpi-beneficiaires');
                const polEl = document.getElementById('kpi-polices');

                if(adEl) { adEl.innerHTML = '0'; animateValue(adEl, 0, parseInt(response.nbre_adherent.replace(/\s/g, '')), 1000); }
                if(benEl) { benEl.innerHTML = '0'; animateValue(benEl, 0, parseInt(response.nbre_beneficiaire.replace(/\s/g, '')), 1000); }
                if(polEl) { polEl.innerHTML = '0'; animateValue(polEl, 0, parseInt(response.nbre_police.replace(/\s/g, '')), 1000); }
            },
            error: function() {
                $('#kpi-adherents').html('N/A');
                $('#kpi-beneficiaires').html('N/A');
                $('#kpi-polices').html('N/A');
            }
        });
    }

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

        $.ajax({
            url: "{{ route('admin.police.itemsAll') }}",
            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 $btn = $(this);
        var url = $btn.data('url');
        var idPolice = $btn.data('idpolice');
        var isExpired = $btn.data('expired') === true || $btn.data('expired') === 'true';

        if (isExpired) {
            Toastify({
                text: "On ne peut faire d'incorporation sur une police expirée",
                duration: 4000,
                gravity: "top",
                position: "right",
                backgroundColor: "#e74c3c",
                stopOnFocus: true
            }).showToast();
            return;
        }
        
        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);
                var msg = "Impossible de charger le formulaire. Veuillez réessayer.";
                
                if (xhr.status === 403 && xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }

                Toastify({
                    text: msg,
                    duration: 4000,
                    gravity: "top",
                    position: "right",
                    backgroundColor: "#e74c3c"
                }).showToast();
            }
        });
    });
});
</script>
@endsection