@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">Adhérents enregistrés</span>
                </div>
            </div>

            <!-- Filter Bar Premium (Logique Index Originale) -->
            <div class="filter-bar-premium animate-fade-in" style="animation-delay: 0.1s;">
                <form id="searchForm">
                    @if(isset($idPolice)) <input type="hidden" name="idPolice" id="idPolice" value="{{ $idPolice }}"> @endif
                    @if(isset($idCollege)) <input type="hidden" name="idCollege" id="idCollege" value="{{ $idCollege }}"> @endif

                    <div class="row g-4 align-items-end">
                        <div class="col-md-7">
                            <label class="filter-label-chic">Recherche libre / Filtre</label>
                            <input type="text" name="recherche" id="recherche" class="form-control input-chic" placeholder="Nom ou N° Adhérent..." value="{{ old('recherche') }}">
                        </div>
                        <div class="col-md-5">
                            <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-md-2">
                            <button type="submit" class="btn-valider-premium w-100" style="height: 48px;">
                                <i class="feather icon-filter"></i> Filtrer
                            </button>
                        </div> -->
                    </div>
                </form>
            </div>

            <div id="preview" class="animate-fade-in">
                @include('Assure::admin.adherent.items', ['adherents' => $adherents])
            </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>
    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() {
            console.log("Lancement de la recherche Adhérents (index)...");
            
            let formData = $('#searchForm').serialize();
            let url = "{{ route('admin.adherent.items') }}";

            $.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>');
                }
            });
        }, 200);
    }

    $(document).ready(function() {
        console.log("Initialisation JS Adhérents (index)...");
        try {
            $(".js-select2-premium").select2({ minimumResultsForSearch: Infinity, placeholder: "Sélectionner", allowClear: true, width: '100%', dropdownAutoWidth: false });
        } catch(e) { console.error("Erreur Select2 index :", e); }
        
        // Bien que cachés, ces champs peuvent changer via d'autres interactions
        $('#idPolice, #idCollege, #sorti').on('change', function() {
            updateResults();
        });

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

        $(document).on('click', '.beneficiaire-modal-trigger', function(e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            
            let url = $(this).data('url');
            if(!url) return;

            if(typeof showOverlay === "function") showOverlay();

            $.get(url, function(data) {
                if(typeof hideOverlay === "function") hideOverlay();
                $('#modal-container').html(data);
                
                let modalEl = document.getElementById('multiStepModal');
                if (window.bootstrap && bootstrap.Modal) {
                    try {
                        let modalInstance;
                        if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
                            modalInstance = bootstrap.Modal.getOrCreateInstance(modalEl);
                        } else {
                            modalInstance = new bootstrap.Modal(modalEl);
                        }
                        modalInstance.show();
                        console.log("✅ Modale BS5 ouverte pour l'adhérent " + $(this).data('id-adherent'));
                    } catch (bsErr) {
                        console.warn("⚠️ Échec BS5, tentative BS4/jQuery...", bsErr);
                        $(modalEl).modal('show');
                    }
                } else if ($.fn.modal) {
                    $(modalEl).modal('show');
                    console.log("✅ Modale BS4/jQuery ouverte pour l'adhérent " + $(this).data('id-adherent'));
                } else {
                    console.error("❌ Ni Bootstrap 5 ni Bootstrap 4 n'ont été détectés.");
                    alert("Erreur système : Bootstrap n'est pas chargé.");
                }
            }.bind(this)).fail(function() {
                if(typeof hideOverlay === "function") hideOverlay();
                console.error("❌ Échec de la requête AJAX pour la modale.");
                if(typeof Toastify === "function") {
                    Toastify({
                        text: "❌ Erreur lors du chargement de la modale",
                        duration: 3000,
                        backgroundColor: "#ff4757"
                    }).showToast();
                } else {
                    alert("Erreur lors du chargement de la modale");
                }
            });
        });

        $('#searchForm').on('submit', 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);
                    }
                }
            });
        });
    });
</script>

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

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

@endsection