@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <div class="page-header animate-fade-in">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h2 class="text-white fw-800">Bénéficiaires</h2>
                        <div class="d-flex align-items-center gap-2">
                            <p class="text-muted small mb-0">Exploration de votre base d'assurés</p>
                        </div>
                    </div>
                    <div class="col-md-4 d-flex justify-content-end align-items-center">
                        <div class="kpi-bento animate-fade-in mb-0">
                            <i class="feather icon-users kpi-bento-icon"></i>
                            <div class="d-flex flex-column">
                                <span class="kpi-bento-val">{{ number_format($nbre_beneficiaires, 0, ',', ' ') }}</span>
                                <span class="kpi-bento-label">Effectif Actuel</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Filter Bar -->
            <div class="filter-bar-premium animate-fade-in">
                <form action="{{ route('admin.beneficiaire.itemsAll') }}" method="GET" id="form_search">
                    <div class="row g-3 align-items-end">
                        @if ($role_id == 4)
                            <div class="col-md-2">
                                <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-2">
                                <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-2">
                                <label class="filter-label-chic">Police</label>
                                <div class="select2-premium-wrapper">
                                    {{ Form::select('idPolice', [], old('idPolice'), ['class' => 'select2 js-select2-premium', 'id' => 'idPolice']) }}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label class="filter-label-chic">Collège</label>
                                <div class="select2-premium-wrapper">
                                    {{ Form::select('idCollege', [], old('idCollege'), ['class' => 'select2 js-select2-premium', 'id' => 'idCollege']) }}
                                </div>
                            </div>
                        @else
                            <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>
                        @endif

                        <div class="col-md-2">
                            <label class="filter-label-chic">Recherche</label>
                            <input type="text" name="recherche" id="recherche" class="form-control input-chic" placeholder="Nom ou N°..." value="{{ old('recherche') }}">
                        </div>
                        <div class="col-md-1">
                            <label class="filter-label-chic">Statut</label>
                            <div class="select2-premium-wrapper">
                                <select name="sorti" id="sorti" class="select2 js-select2-premium">
                                    <option value="">Tous</option>
                                    <option value="0">En vigueur</option>
                                    <option value="1">Retirés</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <button type="submit" class="btn-valider-premium w-100" style="height: 48px;">
                                <i class="feather icon-filter"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="preview" class="animate-fade-in">
                @include('Assure::admin.beneficiaire.itemsAll', ['beneficiaires' => $beneficiaires])
            </div>

            <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> Espace Précédent
                </a>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
    var updateTimer;
    function updateResults() {
        // Feedback visuel immédiat
        $('#preview').html(`
            <div class="text-center py-5 animate-fade-in">
                <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;"></div>
                <p class="text-muted fw-800 small text-uppercase letter-spacing-1">Mise à jour des résultats...</p>
            </div>
        `).show();

        clearTimeout(updateTimer);
        updateTimer = setTimeout(function() {
            let formData = $('#form_search').serialize();
            $.ajax({
                url: '{{ route("admin.beneficiaire.itemsAll") }}',
                method: 'GET',
                data: formData,
                beforeSend: function() {
                    if(typeof showOverlay === "function") showOverlay();
                },
                success: function(response) {
                    if(typeof hideOverlay === "function") hideOverlay();
                    $("#preview").hide().html(response).fadeIn(300);
                },
                error: function() {
                    if(typeof hideOverlay === "function") hideOverlay();
                    $("#preview").html('<div class="text-center py-5 text-danger fw-700">Erreur lors de la recherche.</div>');
                }
            });
        }, 250);
    }

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

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

        $('#recherche').on('input', function() {
            updateResults();
        });

        $('#codeGcAssureur, #idSouscripteur, #idPolice, #idCollege, #sorti').on('change', function() {
            updateResults();
        });

        // Gestion de la mise à jour des photos
        $(document).on('click', '.photo-update-trigger', function(e) {
            let id = $(this).data('id');
            let type = $(this).data('type');
            $(`#file-${type}-${id}`).click();
        });

        $(document).on('click', '.photo-file-input', function(e) {
            e.stopPropagation();
        });

        $(document).on('change', '.photo-file-input', function(e) {
            let file = e.target.files[0];
            if (!file) return;

            let container = $(this).closest('.photo-update-trigger');
            let id = container.data('id');
            let type = container.data('type');
            let formData = new FormData();
            formData.append('photo', file);
            formData.append('id', id);
            formData.append('_token', '{{ csrf_token() }}');

            let url = type === 'adherent' ? '{{ route("admin.adherent.updatePhoto") }}' : '{{ route("admin.beneficiaire.updatePhoto") }}';

            $.ajax({
                url: url,
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    if(typeof showOverlay === "function") showOverlay();
                },
                success: function(response) {
                    if(typeof hideOverlay === "function") hideOverlay();
                    if (response.success) {
                        $(`#avatar-${type}-${id}`).attr('src', response.photo_url);
                        if (typeof Toastify !== "undefined") {
                            Toastify({
                                text: response.message,
                                duration: 3000,
                                close: true,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
                            }).showToast();
                        } else {
                            alert(response.message);
                        }
                    }
                },
                error: function(xhr) {
                    if(typeof hideOverlay === "function") hideOverlay();
                    let msg = "Erreur lors de la mise à jour de la photo.";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                        msg = Object.values(xhr.responseJSON.errors).join("\n");
                    }
                    if (typeof Toastify !== "undefined") {
                        Toastify({
                            text: msg,
                            duration: 5000,
                            close: true,
                            gravity: "top",
                            position: "right",
                            backgroundColor: "linear-gradient(to right, #ff5f6d, #ffc371)",
                        }).showToast();
                    } else {
                        alert(msg);
                    }
                }
            });
        });

    // Cascade Garants -> Souscripteurs
    $("#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="">Tous les souscripteurs</option>';
            for (var i = 0; i < souscripteurs.length; i++) {
                var full_name = souscripteurs[i].nom + (souscripteurs[i].prenoms ? ' ' + souscripteurs[i].prenoms : '');
                result += '<option value="' + souscripteurs[i].id + '">' + full_name + '</option>';
            }
            $("#idSouscripteur").find("option").remove().end().append(result).val("").trigger('change');
        });
    });

    // Cascade Souscripteurs -> Polices
    $("#idSouscripteur").on("change", function() {
        var idSouscripteur = $(this).val();
        var codeGcAssureur = $("#codeGcAssureur").val();
        if (!idSouscripteur) {
            $("#idPolice").find("option").remove().end().append('<option value="">Toutes les polices</option>').val("").trigger('change');
            return;
        }
        $.ajax({
            method: "GET",
            data: { idSouscripteur: idSouscripteur, codeGcAssureur: codeGcAssureur },
            url: "{{ url('admin/souscripteurPolice') }}",
        }).done(function (polices) {
            var result = '<option value="">Toutes les polices</option>';
            for (var i = 0; i < polices.length; i++) {
                var libelle = polices[i].libellePolice || polices[i].numeroPolice;
                result += '<option value="' + polices[i].id + '">' + libelle + '</option>';
            }
            $("#idPolice").find("option").remove().end().append(result).val("").trigger('change');
        });
    });

    // Cascade Polices -> Collèges
    $(document).on("change", "#idPolice", function() {
        var idPolice = $(this).val();
        var $collegeSelect = $("#idCollege");
        if (!idPolice) {
            $collegeSelect.html('<option value="">Tous les collèges</option>').trigger('change');
            return;
        }

        $.ajax({
            method: "GET",
            data: { idPolice: idPolice },
            url: "{{ url('admin/policesColleges') }}",
            success: function (response) {
                // On gère le cas où la réponse est un objet {colleges: [...]} ou directement le tableau
                var colleges = response.colleges || response;
                var result = '<option value="">Tous les collèges</option>';
                
                if (Array.isArray(colleges)) {
                    for (var i = 0; i < colleges.length; i++) {
                        result += '<option value="' + colleges[i].id + '">' + colleges[i].libelleCollege + '</option>';
                    }
                }
                $collegeSelect.html(result).trigger('change');
            }
        });
    });
});
</script>

<style>
/* ══════════════════════════════════════════════
       BÉNÉFICIAIRES — Design Mosaic Premium (Fix)
       ══════════════════════════════════════════════ */

    .page-title-area { margin-bottom: 30px; }
    .page-title-area h2 { font-weight: 800; color: #fff; letter-spacing: -0.5px; }

    /* Bento KPI */
    .kpi-bento {
        background: rgba(var(--vt-primary-rgb), 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(var(--vt-primary-rgb), 0.2);
        border-radius: 20px;
        padding: 15px 25px;
        display: inline-flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }
    .kpi-bento-icon { font-size: 1.5rem; color: var(--vt-primary); }
    .kpi-bento-val { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1; }
    .kpi-bento-label { font-size: 0.65rem; text-transform: uppercase; font-weight: 700; color: var(--vt-muted); letter-spacing: 1px; }

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



    /* Style Cosy pour les messages d'erreur/validation Select2 */
    .invalid-feedback, .text-danger, .validation-error {
        margin-top: 10px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: #ff4757 !important;
        background: rgba(255, 71, 87, 0.08) !important;
        border: 1px solid rgba(255, 71, 87, 0.2) !important;
        padding: 6px 15px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: fit-content !important; 
        max-width: fit-content !important;
        white-space: nowrap !important;
    }
    .invalid-feedback::before {
        content: '\e8a2'; 
        font-family: 'feather' !important;
        font-size: 0.9rem !important;
    }

    #preview { min-height: 500px; padding-bottom: 100px; }

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

    body.light-mode .kpi-bento {
        background: #ffffff !important;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    }

    body.light-mode .kpi-bento-val {
        color: #1e293b !important;
    }
    body.light-mode .kpi-bento-label {
        color: #64748b;
    }

    body.light-mode .kpi-bento-label {
        color: #64748b;
    }
</style>

@endsection