@extends('admin.layout.master')



@section('content')
<section class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-wrapper">
            
            <div class="page-header-lux animate-fade-in">
                <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">Gestion et consultation des contrats</p>
                </div>
            </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_beneficiaires, 0, ',', ' ') }}</span>
                    <span class="kpi-bento-label">Bénéficiaires enregistrés</span>
                </div>
            </div>

            <!-- Global Chic Filter Bar -->
            <div class="filter-bar-premium animate-fade-in" style="animation-delay: 0.1s;">
                <form id="searchForm">
                        @if (isset($idPolice)) <input id="idPolice" name="idPolice" type="hidden" value="{{$idPolice}}"> @endif
                        @if (isset($idCollege)) <input id="idCollege" name="idCollege" type="hidden" value="{{$idCollege}}"> @endif
                        @if (isset($idAdherent)) <input id="idAdherent" name="idAdherent" type="hidden" value="{{$idAdherent}}"> @endif
                        <input type="hidden" id="idSouscripteur" name="idSouscripteur" value="{{ old('idSouscripteur') }}">
                        <input type="hidden" id="codeEtatPolice" name="codeEtatPolice" value="{{ old('codeEtatPolice') }}">
                        <input type="hidden" id="sorti" name="sorti" value="{{ old('sorti') }}">

                        <div class="row g-4 align-items-end">
                            <div class="col-md-9">
                                <label class="filter-label-chic">Recherche nominative ou identifiant</label>
                                {{ Form::text('recherche', old('recherche'), [
                                    'class' => 'form-control input-chic', 
                                    'placeholder' => 'Commencez à saisir un nom, un prénom ou un numéro de bénéficiaire...', 
                                    'id' => 'recherche'
                                ]) }}
                            </div>
                            <div class="col-md-3">
                                <button type="submit" id="btnBeneficiaireSearch" class="btn-valider-premium">
                                    <i class="feather icon-filter"></i>recherche
                                </button>
                            </div>
                            
                        </div>
                    </div>
                </form>
            </div>

                <!-- Previews Area -->
                <div class="animate-fade-in" style="animation-delay: 0.2s;">
                    <div id="preview" class="dt-responsive table-responsive">
                        @include('Assure::admin.beneficiaire.items', ['beneficiaires' => $beneficiaires])
                    </div>
                </div>

                <!-- Footer Return -->
                <div class="text-center mt-4">
                    <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn" style="color: var(--vt-muted); font-weight: 700; gap: 10px; display: inline-flex; align-items: center; text-decoration: none; transition: 0.3s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='var(--vt-muted)'">
                        <i class="feather icon-arrow-left text-primary"></i> Retour à la gestion
                    </a>
                </div>

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

        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 = $('#searchForm').serialize();
                $.ajax({
                    url: "{{ route('admin.beneficiaire.items') }}",
                    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);
        }

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

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

        $('#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,
                            gravity: "top",
                            position: "right",
                            backgroundColor: "#ff5f6d",
                        }).showToast();
                    } else {
                        alert(msg);
                    }
                }
            });
        });
    });
</script>

<style>
/* ══════════════════════════════════════════════
       ANNUAIRE BÉNÉFICIAIRES — Design IndexAll Style
       ══════════════════════════════════════════════ */
    .pcoded-content, .pcoded-inner-content, .page-wrapper { background: transparent !important; }

    .page-header-lux { margin-bottom: 30px; }
    .page-header-lux 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; }


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

    /* ── Light Mode Overrides ── */
    body.light-mode .page-header-lux h2 {
        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;
    }

</style>

@endsection