@extends('admin.layout.master')
<link rel="stylesheet" type="text/css" href="{{asset('plugins/files/assets/css/select-responsive-fraza.css')}}" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .accordion-toggle[aria-expanded="true"] .transition-icon {
        transform: rotate(180deg);
    }
    .transition-icon {
        transition: transform 0.3s ease;
    }
    .img-radius {
        border-radius: 50%;
    }
	.uniform-btn {
        min-height: 20px; /* Hauteur minimale fixe pour uniformité */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem; /* Padding cohérent */
        text-align: center;
    }

    .fixed-badge {
        min-width: 70px; /* Largeur minimale fixe pour tous les badges */
        height: 24px; /* Hauteur fixe */
        display: inline-flex; /* Pour centrer le texte */
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.5rem; /* Padding cohérent */
        text-align: center;
        width: 115px;
    }
</style>
@section('content')
    <div class="pcoded-content">
         <!-- Breadcrumb -->
        <div class="page-header mb-2">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h4 class="m-b-5">Adhérents</h4>
                        </div>
                        <ul class="breadcrumb shadow-sm p-2 bg-light rounded">
                            <li class="breadcrumb-item"><a href="{{ route('home_path') }}"><i class="feather icon-home"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{ route('home_path') }}">Accueil</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.adherent.indexAll') }}" style="font-weight: bold;">Liste des Adhérents</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ breadcrumb ] end -->
        <div class="pcoded-inner-content" style="margin-top:5px">
            <div class="page-wrapper">
                <div class="page-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- Statistiques -->
                            <div class="row mb-3 g-2">
                                <!-- <div class="col-md-4">
                                    <div class="card shadow-sm text-center p-2 bg-dark text-white" style="min-height: 10px;">
                                        <h5><i class="fas fa-file-alt me-1"></i> Polices</h5>
                                        <span class="badge bg-info">{{-- $nbre_police --}}</span>
                                    </div>
                                </div> -->
                                <div class="col-md-4">
                                    <div class="card shadow-sm text-center p-2 bg-dark text-white" style="min-height: 10px;">
                                        <h5><i class="fas fa-users me-1"></i> Adhérents</h5>
                                        <span class="badge bg-warning">{{ $nbre_adherent }}</span>
                                    </div>
                                </div>
                                <!-- <div class="col-md-4">
                                    <div class="card shadow-sm text-center p-2 bg-dark text-white" style="min-height: 10px;">
                                        <h5><i class="fas fa-user-check me-1"></i> Bénéficiaires</h5>
                                        <span class="badge bg-success">{{-- $nbre_beneficiaire --}}</span>
                                    </div>
                                </div> -->
                            </div>

                            <!-- Zone de recherche -->
                            <div class="card shadow-sm border-0" style="margin-top:-30px">
                                <form action="{{ route('admin.adherent.indexAll') }}" method="GET" id="form_search">
                                    <div class="card-header p-2 bg-dark text-white">
                                        <div class="row align-items-center g-2">
                                            @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

                                            <!-- Section conditionnelle pour role_id == 4 -->
                                            @if ($role_id == 4)
                                            <div class="col-md-3">
                                                <div class="form-group mb-0">
                                                    <label for="Garant" class="form-label fw-bold text-white mb-1">Garant</label>
                                                    {{ Form::select('codeGcAssureur', $garants, old('codeGcAssureur'), ['class' => 'js-select2 form-control', 'id' => 'codeGcAssureur']) }}
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group mb-0">
                                                    <label for="recherche" class="form-label fw-bold text-white mb-1">Souscripteur</label>
                                                    {{ Form::select('idSouscripteur', $souscripteurs, old('idSouscripteur'), ['class' => 'form-control js-select2', 'id' => 'idSouscripteur']) }}
                                                </div>
                                            </div>
                                            @endif

                                            <!-- Section conditionnelle pour role_id == 5 ou 6 -->
                                            @if ($role_id == 5 || $role_id == 6)
                                            <div class="col-md-3">
                                                <div class="form-group mb-0">
                                                    <label for="recherche" class="form-label fw-bold text-white mb-1">Police</label>
                                                    {{ Form::select('idPolice', $polices, old('idPolice'), ['class' => 'form-control js-select2', 'id' => 'idPolice']) }}
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group mb-0">
                                                    <label for="recherche" class="form-label fw-bold text-white mb-1">Collège</label>
                                                    {{ Form::select('idCollege', $colleges, old('idCollege'), ['class' => 'form-control js-select2', 'id' => 'idCollege']) }}
                                                </div>
                                            </div>
                                            @endif
                                            <div class="col-md-6">
                                                <div class="form-group mb-0">
                                                    <label for="recherche" class="form-label fw-bold text-white mb-1">Filtre</label>
                                                    <input type="text" name="recherche" id="recherche" class="form-control form-control-sm rounded-pill" placeholder="Numéro adhérent ou Nom Adhérent" value="{{ old('recherche') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group mb-0">
                                                    <label for="recherche" class="form-label fw-bold text-white mb-1">État</label>
                                                    <select name="sorti" id="sorti" class="form-control js-select2">
                                                        <option value="">sélectionner le statut</option>
                                                        <option value="0">Actif</option>
                                                        <option value="1">Retiré / Suspendu</option>
                                                    </select>
                                                </div>
                                            </div>                                      
                                            <div class="col-md-3 mt-3">
                                                <button type="button" id="btnPoliceSearch" class="btn btn-success btn-sm btn-round w-100 uniform-btn fw-bold" style="color: black;">
                                                    <i class="fas fa-check me-1"></i> Valider
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                 </form>
                                <div id="modal-container"></div>
                                <div class="card-body p-2" style="background-color: #f8f9fa;">
                                    <div id="preview" class="dt-responsive table-responsive">
                                            @include('Assure::admin.adherent.itemsAll', ['adherents' => $adherents])
                                    </div>
                                </div>
                            </div>
                           
                            <!-- Bouton Retour -->
                            <div class="text-center mt-4">
                                <a onclick="showOverlay()" href="{{ url()->previous() }}" class="btn btn-outline-dark rounded-pill" style="font-weight: bold;">
                                    <i class="fas fa-arrow-circle-left me-2"></i> Retour
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
        <!-- [ breadcrumb ] end -->
        
</div>
<script>
    $(document).ready(function() {
        $(".js-select2").select2({
            closeOnSelect: false
        });
        $(".js-select2-multi").select2({
            closeOnSelect: false
        });
    });
    $('.beneficiaire-modal-trigger').on('click', function(e) {
        debugger;
        e.preventDefault();
        
        // Récupération de l'URL et extraction de l'idPolice
        var url = $(this).data('url');
        //var idPolice = url.match(/idPolice=(\d+)/)?.[1];
        var idAdherent = url.split('/').pop();

        var $modal = $('#beneficiaireModal');
        var $modalBody = $modal.find('.modal-body');

        
        // Requête AJAX
        $.ajax({
            url: url,
            type: 'GET',
            data: {
                idAdherent: idAdherent,
            },
            beforeSend: function() {
                $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Chargement...');
                $modalBody.html(`
                    <div class="text-center p-4">
                        <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Chargement...</span>
                        </div>
                    </div>
                `);

                //$(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Chargement...');
               
            },
            success: function(response) {
                debugger;
                // Insérer le contenu dans le modal
                $('#myModal .modal-body').html(response);
                
                // Afficher le modal
                $('#myModal').modal('show');

                // ➜ Remplace le message de chargement par la modal
                $("#modal-container").html(response);

                let modalElement = $("#modal-container .modal");

                if (modalElement.length) {
                    console.log("Modal détectée, affichage...");
                    modalElement.modal("show");
                } else {
                    console.error("Erreur : Modal non trouvée !");
                }
            },
            error: function(xhr, status, error) {
                console.error('Erreur AJAX:', status, error);
                alert('Une erreur est survenue lors du chargement du modal');
            }
        });
    });


    $("#codeGcAssureur").on("change", function() {
        //debugger;
        var codeGcAssureur = $(this).val();

        $.ajax({
            method: "GET",
            data: {
                codeGcAssureur: codeGcAssureur
            },
            url: "{{ url('admin/garantSouscripteur') }}",
        }).done(function (souscripteurs) {
            //debugger;
            var result = '<option value="">Veuillez sélectionner un souscripteur</option>';
            for (var i = 0; i < souscripteurs.length; i++) {
                result += '<option value="' + souscripteurs[i].souscripteur.id + '">' + souscripteurs[i].souscripteur.nom +' '+ souscripteurs[i].souscripteur.prenoms + '</option>';
            }
            $("#idSouscripteur").find("option").remove().end().append(result).val("");
            //$("#service_direction_id").find("option").remove().end().append('<option value="">Veuillez sélectionner un Service</option>').val("");
        });
    });

    $("#idPolice").on("change", function() {
        //debugger;
        
        var idPolice = $(this).val();

        $.ajax({
            method: "GET",
            data: {
                idPolice: idPolice,
             
            },
            url: "{{ url('admin/policesColleges') }}",
        }).done(function (colleges) {
            var result = '<option value="">Veuillez sélectionner un college</option>';
            for (var i = 0; i < colleges.length; i++) {
                result += '<option value="' + colleges[i].id + '">' + colleges[i].libelleCollege + '</option>';
            }
            $("#idCollege").find("option").remove().end().append(result).val("");
        });
    });
    $('#btnPoliceSearch').on('click', function() {
        debugger;
        // Activer le spinner sur le bouton
        let $btn = $(this);

        // Récupérer les valeurs des champs manuellement
        let formData = {
            idPolice: $('#idPolice').val() || '',
            idCollege: $('#idCollege').val() || '',
            codeGcAssureur: $('#codeGcAssureur').val() || '',
            idSouscripteur: $('#idSouscripteur').val() || '',
            recherche: $('#recherche').val() || '',
            sorti: $('#sorti').val() || ''
        };

        // Requête AJAX
        $.ajax({
            
            url: '{{ route('admin.adherent.rechercheAll') }}',
            method: 'GET',
            data: formData,
            dataType: 'json', 
            beforeSend: function() {
                $("#btnPoliceSearch")
                    .prop("disabled", true)
                    .html('<i class="fas fa-spinner fa-spin"></i> Chargement...');

                // HTML centré avec animation et couleur
                $('#results-container').html(`
                    <div class="card-body p-4 d-flex justify-content-center align-items-center" style="min-height: 200px;">
                        <div class="text-center">
                            <i class="fas fa-spinner fa-spin fa-3x" style="color: #007bff; animation: spin 1s linear infinite, pulse 1.5s ease-in-out infinite;"></i>
                            <p class="mt-2" style="color: #007bff; font-weight: bold;">Chargement...</p>
                        </div>
                    </div>
                `);
            },
            success: function(response) {
                debugger;
                ///alert(response);
                // Réinitialiser le bouton
                $("#btnPoliceSearch")
                    .prop("disabled", false)
                    .html('<i class="fas fa-check mr-1"></i> Valider');

                    console.log('Réponse complète :', response);
                    // Déterminer les données à utiliser
                    let results = response.adherents || (Array.isArray(response) ? response : []);
                    let hasResults = results && results.length > 0;

                if (response.success && response.adherents) {
                    updateResults(response.adherents);
                  
                    Toastify({
                        text: "Résultats chargés avec succès !",
                        duration: 3000,
                        gravity: "top",
                        position: "right",
                        backgroundColor: "#00b09b"
                    }).showToast();
                } else {
                    $("#results-container").html('<div class="text-center p-4">Aucun résultat trouvé.</div>');
                    Toastify({
                        text: response.message || "Aucun résultat trouvé.",
                        duration: 3000,
                        gravity: "top",
                        position: "right",
                        backgroundColor: "#ff4444"
                    }).showToast();
                }
            },
            error: function(xhr) {
                $('#results-container').html(`
                    <div class="card shadow-lg border-0 rounded-3 overflow-hidden">
                        <div class="card-body p-4 text-center text-danger">
                            <p>Une erreur est survenue. Veuillez réessayer.</p>
                        </div>
                    </div>
                `);
                console.error('Erreur AJAX :', xhr.responseText);
            }
        });
    });

    // Fonction pour mettre à jour les résultats
    function updateResults(adherents) {
        debugger;
        let html = '<div class="card-body p-4"><div class="row g-4">';

      
        if (adherents.length > 0) {
            adherents.forEach(function(adherent,key) {
                // Image par défaut ou spécifique
            let imagePath = adherent.lienPhoto 
                ? '{{ asset("plugins/thumbs/vitalis/") }}' + adherent.lienPhoto 
                : '{{ asset("plugins/thumbs/img_placeholder.png") }}';
            
            // Badge d'état
            let badge = '';
            if (adherent.enVigueur == '1' && adherent.sorti != '1') {
                badge = '<span class="badge bg-success fixed-badge">En vigueur</span>';
            } else if (adherent.codeEtatBeneficiaire == 'R' || adherent.codeEtatBeneficiaire == 'NR') {
                badge = '<span class="badge bg-danger fixed-badge">Rétiré</span>';
            } else if (adherent.codeEtatBeneficiaire == 'SP') {
                badge = '<span class="badge bg-warning text-dark fixed-badge">Suspendu</span>';
            }
            // Collège (simulé ici, ajustez selon vos données)
            let collegeLibelle = adherent.libelleCollege || 'Non défini'; // Suppose que libelleCollege vient du JSON

            html += `
                <div class="col-12 col-md-4">
                    <div class="card h-100 border-light shadow-sm">
                        <!-- En-tête cliquable -->
                        <div class="card-header bg-white p-3 d-flex align-items-center justify-content-between accordion-toggle" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#collapse_${key}" 
                            aria-expanded="false" 
                            aria-controls="collapse_${key}">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <img class="rounded-circle" 
                                        src="${imagePath}" 
                                        alt="Photo adhérent" 
                                        width="40" 
                                        height="40" 
                                        onerror="this.src='{{ asset('plugins/thumbs/img_placeholder.png') }}'">
                                </div>
                                <div>
                                    <h6 class="mb-1 fw-bold">
                                        ${adherent.sexe == 'M' ? 'M.' : 'Mlle / Mme.'} ${adherent.adherent ? adherent.adherent.substring(0, 30) : 'N/A'}
                                    </h6>
                                    <small>${badge}</small>
                                </div>
                            </div>
                            <i class="fas fa-chevron-down text-muted transition-icon"></i>
                        </div>

                        <!-- Contenu de l'accordéon -->
                        <div id="collapse_${key}" class="collapse" aria-labelledby="heading_${key}">
                            <div class="card-body p-3">
                                <ul class="list-unstyled mb-3">
                                    <li>Numéro : <strong>${adherent.numeroAdherent || 'N/A'}</strong></li>
                                    <li>Adhérent : <strong>${adherent.adherent || 'N/A'}</strong></li>
                                    <li>Sexe : <strong>${adherent.sexe || 'N/A'}</strong></li>
                                    <li>Date d'entrée : <strong>${adherent.dateEffetBeneficiaire ? new Date(adherent.dateEffetBeneficiaire).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }) : 'N/A'}</strong></li>
                                    <li>Catégorie : ${adherent.codeProduit || 'N/A'}</li>
                                    <li>Collège : ${collegeLibelle}</li>
                                </ul>
                                <div class="d-flex flex-column" style="gap: 6px;">
                                    <!-- Boutons conditionnels (simulés ici, ajustez selon vos permissions) -->
                                    <a onclick="showOverlay()" 
                                       class="btn btn-warning btn-sm w-100 uniform-btn" 
                                       href="{{ route('admin.beneficiaire.index', ['idAdherent' => ':id']) }}".replace(':id', adherent.idAdherent || '')>
                                        <i class="fas fa-user me-1"></i> Ajout de dépendant
                                    </a>
                                    <a onclick="showOverlay()" 
                                       class="btn btn-warning btn-sm w-100 uniform-btn" 
                                       href="{{ route('admin.beneficiaire.index', ['idAdherent' => ':id']) }}".replace(':id', adherent.idAdherent || '')>
                                        <i class="fas fa-user me-1"></i> Mes Bénéficiaires
                                    </a>
                                    <a onclick="showOverlay()" 
                                       class="btn btn-primary btn-sm w-100 uniform-btn" 
                                       href="{{ route('admin.adherent.show', ['adherent' => ':id']) }}".replace(':id', adherent.idAdherent || '')>
                                        <i class="fas fa-eye me-1"></i> Infos Adhérent
                                    </a>
                                    <a onclick="showOverlay()" 
                                       class="btn btn-dark btn-sm w-100 uniform-btn" 
                                       href="{{ route('admin.reseau.index', ['idAdherent' => ':id', 'idCollege' => ':college']) }}"
                                           .replace(':id', adherent.idAdherent || '')
                                           .replace(':college', adherent.idCollege || '')>
                                        <i class="fas fa-eye me-1"></i> Réseau de soins
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
           
            });
        } else {
            html += '<div class="col-12 text-center py-4"><p class="text-muted fw-bold">Aucun adhérent trouvé.</p></div>';
        }
        html += '</div>';

        // Ajouter la pagination si nécessaire
        if (adherents.total > adherents.per_page) {
            html += `
                <div class="card-footer bg-light p-3 d-flex justify-content-between align-items-center">
                    <span class="text-muted">${adherents.length} Adhérent(s)</span>
                    <nav aria-label="Page navigation">
                        <ul class="pagination mb-0">
                            ${adherents.current_page > 1 ? `
                                <li class="page-item">
                                    <a class="page-link" href="#" data-page="${adherents.current_page - 1}">Précédent</a>
                                </li>
                            ` : '<li class="page-item disabled"><span class="page-link">Précédent</span></li>'}
                            ${Array.from({ length: adherents.last_page }, (_, i) => i + 1).map(page => `
                                <li class="page-item ${page === adherents.current_page ? 'active' : ''}">
                                    <a class="page-link" href="#" data-page="${page}">${page}</a>
                                </li>
                            `).join('')}
                            ${adherents.current_page < adherents.last_page ? `
                                <li class="page-item">
                                    <a class="page-link" href="#" data-page="${adherents.current_page + 1}">Suivant</a>
                                </li>
                            ` : '<li class="page-item disabled"><span class="page-link">Suivant</span></li>'}
                        </ul>
                    </nav>
                </div>
            `;
        }

        html += '</div>';

        $('#results-container').html(html);

        // Gestion des clics sur les liens de pagination
        $(".page-link").off('click').on('click', function(e) {
            e.preventDefault();
            let page = $(this).data('page');
            if (page) {
                formData.page = page;
                $("#btnValider").click();
            }
        });

       

    }
</script> 
@endsection