@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <div class="mb-4">
                <h2 class="fw-800 text-white mb-1">Annuaire des Adhérents</h2>
                <p class="text-muted small mb-0">Gestion et suivi de vos assurés</p>
            </div>

           <!--  <div class="kpi-bento animate-fade-in">
                <i class="feather icon-users kpi-bento-icon"></i>
                <div class="d-flex flex-column">
                    <span class="kpi-bento-val">{{ number_format($nbre_adherent, 0, ',', ' ') }}</span>
                    <span class="kpi-bento-label">Effectif Affiché</span>
                </div>
            </div> -->

            <div class="filter-bar-premium animate-fade-in" style="animation-delay: 0.1s;">
                <form id="form_search">
                    <div class="row g-3 align-items-end">
                        @if (isset($role_id) && $role_id == 4)
                             <div class="col-lg 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', 'placeholder' => 'Tous les garants']) }}
                                </div>
                            </div>
                            <div class="col-lg col-md-4">
                                <label class="filter-label-chic">Souscripteur</label>
                                <div class="select2-premium-wrapper">
                                    {{ Form::select('idSouscripteur', isset($souscripteurs) ? $souscripteurs : [], old('idSouscripteur'), ['class' => 'select2 js-select2-premium', 'id' => 'idSouscripteur', 'placeholder' => 'Tous les clients']) }}
                                </div>
                            </div>
                            <div class="col-lg col-md-4">
                                <label class="filter-label-chic">Police</label>
                                <div class="select2-premium-wrapper">
                                    {{ Form::select('idPolice', isset($polices) ? $polices : [], old('idPolice'), ['class' => 'select2 js-select2-premium', 'id' => 'idPolice', 'placeholder' => 'Toutes les polices']) }}
                                </div>
                            </div>
                            <div class="col-lg col-md-4">
                                <label class="filter-label-chic">Collège</label>
                                <div class="select2-premium-wrapper">
                                    {{ Form::select('idCollege', isset($colleges) ? $colleges : [], old('idCollege'), ['class' => 'select2 js-select2-premium', 'id' => 'idCollege', 'placeholder' => 'Tous les collèges']) }}
                                </div>
                            </div>
                            <div class="col-lg col-md-4">
                                <label class="filter-label-chic">Recherche libre</label>
                                <input type="text" name="recherche" id="recherche" class="form-control input-chic" placeholder="N° ou Nom..." value="{{ old('recherche') }}">
                            </div>
                            <div class="col-lg col-md-4">
                                <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 les statuts</option>
                                        <option value="0" selected>Actif</option>
                                        <option value="1">Retiré</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg col-md-4">
                                <button type="submit" class="btn-valider-premium w-100" style="height: 48px;">
                                    <i class="feather icon-filter"></i> Filtrer
                                </button>
                            </div>
                        @else
                            <div class="col-lg-3 col-md-6">
                                <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', 'placeholder' => 'Toutes les polices']) }}
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <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', 'placeholder' => 'Tous les collèges']) }}
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6">
                                <label class="filter-label-chic">Recherche libre</label>
                                <input type="text" name="recherche" id="recherche" class="form-control input-chic" placeholder="N° ou Nom Adhérent..." value="{{ old('recherche') }}">
                            </div>
                            <div class="col-lg-2 col-md-6">
                                <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 les statuts</option>
                                        <option value="0" selected>Actif</option>
                                        <option value="1">Retiré</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6">
                                <button type="submit" class="btn-valider-premium w-100" style="height: 48px;">
                                    <i class="feather icon-filter"></i> Filtrer
                                </button>
                            </div>
                        @endif
                    </div>
                </form>
            </div>

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


            <div class="text-center mt-5 mb-5">
                <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn-premium-secondary" style="height: 45px;">
                    <i class="feather icon-arrow-left"></i> Retour
                </a>
            </div>
        </div>
    </div>
</section>

@endsection

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

    /* Les cascades ont été retirées à la demande de l'utilisateur pour conserver la liste d'origine des filtres */
    
    // Recherche Automatique robuste
    var updateTimer;
    function updateResults() {
        // Feedback visuel immédiat avant même le délai du timer
        $('#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() {
            console.log("Lancement de la recherche Adhérents...");
            
            let formData = $('#form_search').serialize();
            let url = '{{ route('admin.adherent.itemsAll') }}';

            $.ajax({
                url: url,
                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(xhr) {
                    if(typeof hideOverlay === "function") hideOverlay();
                    $("#preview").html('<div class="text-center py-5 text-danger fw-700">Oups ! Une erreur est survenue lors de la recherche.</div>');
                }
            });
        }, 250);
    }

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

        $selects.on("select2:select select2:unselect change", function() {
            updateResults();
        });
    } catch(e) { console.error("Erreur Select2 :", e); }

        // Cascade Garants -> Souscripteurs
        $(document).on("change", "#codeGcAssureur", function() {
            var val = $(this).val();
            var $souscSelect = $("#idSouscripteur");
            $.ajax({
                method: "GET",
                url: "{{ url('admin/garantSouscripteur') }}",
                data: { codeGcAssureur: val }
            }).done(function(data) {
                var res = '<option value="">Tous les souscripteurs</option>';
                if (data) {
                    data.forEach(function(i) {
                        var name = i.nom + (i.prenoms ? ' ' + i.prenoms : '');
                        res += '<option value="' + i.id + '">' + name + '</option>';
                    });
                }
                $souscSelect.html(res).trigger('change');
            });
        });

        // Cascade Souscripteurs -> Polices
        $(document).on("change", "#idSouscripteur", function() {
            var idS = $(this).val();
            var idG = $("#codeGcAssureur").val();
            var $policeSelect = $("#idPolice");
            $.ajax({
                method: "GET",
                url: "{{ url('admin/souscripteurPolice') }}",
                data: { idSouscripteur: idS, codeGcAssureur: idG }
            }).done(function(data) {
                var res = '<option value="">Toutes les polices</option>';
                if (data) {
                    data.forEach(function(i) {
                        var lib = i.libellePolice || i.numeroPolice;
                        res += '<option value="' + i.id + '">' + lib + '</option>';
                    });
                }
                $policeSelect.html(res).trigger('change');
            });
        });

        // Cascade Police -> Collège
        $(document).on("change", "#idPolice", function() {
            var val = $(this).val();
            var $collegeSelect = $("#idCollege");
            if (!val) {
                $collegeSelect.html('<option value="">Tous les collèges</option>').trigger('change');
                return;
            }
            $.ajax({ 
                method: "GET", 
                url: "{{ url('admin/policesColleges') }}", 
                data: { idPolice: val } 
            })
            .done(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 res = '<option value="">Tous les collèges</option>';
                
                if (Array.isArray(colleges)) {
                    for (var i = 0; i < colleges.length; i++) {
                        res += '<option value="' + colleges[i].id + '">' + colleges[i].libelleCollege + '</option>';
                    }
                }
                $collegeSelect.html(res).trigger('change');
            });
        });

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

        $(document).on('submit', '#form_search', function(e) {
            e.preventDefault();
            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);
                    }
                }
            });
        });

        console.log("Système de recherche prêt.");
    });
</script>

<style>
/* ══════════════════════════════════════════════
       ANNUAIRE ADHÉRENTS — Design Premium & Fun
       ══════════════════════════════════════════════ */
    
    /* 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; }

    /* Results */
    #preview { min-height: 400px; }
    .premium-loader { display: flex; justify-content: center; align-items: center; padding: 80px; }

    /* Style Cosy pour les messages d'erreur/validation */
    .invalid-feedback, .validation-error, span[id^="error-"] {
        margin-top: 5px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: #ff4757 !important; /* Un rouge plus doux 'cosy' */
        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:empty, .validation-error:empty, span[id^="error-"]:empty {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    .invalid-feedback::before {
        content: '\e8a2'; /* Icône feather alert-circle */
        font-family: 'feather' !important;
        font-size: 0.9rem !important;
    }

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




</style>

@endsection