@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 ] start -->
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h4 class="m-b-10">Adhérents</h4>
                        </div>
                        <ul class="breadcrumb">
                            <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 onclick="showOverlay()" href="{{ route('admin.adherent.indexAll') }}">Liste des Adhérents {{-- de la Police  @if (($adherents))
                                    " {{ $adherents->first()->police->libellePolice }}"
                                @endif --}} </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ breadcrumb ] end -->
        <div class="pcoded-inner-content">
            <!-- Main-body start -->
            <div class="main-body">
                <div class="page-wrapper">
                    <!-- Page-body start -->
                    <div class="page-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card shadow-lg">
                                    <div class="card-header d-flex justify-content-between align-items-center p-3 rounded-top" style="background-color: #343a40 !important;">
                                        <h5 class="mb-0 text-white">
                                            <i class="bi bi-people-fill me-2"></i><label class="badge badge-lg bg-info">{{ $nbre_adherent }}</label> Adhérent(s)
                                        </h5>
                                        <div style="margin-top: -10px; margin-bottom: -10px;" class="d-flex gap-2">
                                            <a onclick="showOverlay()" style="font-weight: bold; color: white;" href="home_path" class="btn btn-inverse btn-round btn-grd">
                                                <i class="fas fa-arrow-circle-left"></i> Retour
                                            </a>
                                            <button type="button" style="font-weight: bold; color: white;" class="btn btn-primary btn-round btn-grd" id="newAdherentBtn">
                                                <i class="fas fa-user-plus me-2"></i> Nouvel Adhérent
                                            </button>
                                        </div>
                                    </div>

                                    <!-- <div class="card-header d-flex justify-content-between align-items-center p-3 rounded-top" style=" background-color: #343a40 !important;">
                                        <h5 class="mb-0 text-white">
                                            <i class="bi bi-people-fill me-2"></i><label class="badge badge-lg bg-info">{{ $nbre_adherent }}</label> Adhérent(s)
                                        </h5>
                                        <div style="margin-top: -10px;margin-bottom: -10px;">
                                            <a onclick="showOverlay()" style="font-weight: bold; color: white;" href="home_path" class="btn btn-inverse btn-round btn-grd">
                                                <i class="fas fa-arrow-circle-left"></i> Retour
                                            </a>
                                        </div>
                                    </div> -->
                                    <div class="card-body" style="margin-bottom: -40px;">
                                        <form action="{{ route('admin.adherent.indexAll') }}" method="GET" id="form_search">
                                        <!-- <form action="{{ route('admin.adherent.indexAll') }}" onsubmit="showOverlay()" method="GET" id="form_search"> -->
                                            @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

                                            <div class="row g-3">
                                                <!-- Section conditionnelle pour role_id == 4 -->
                                                @if ($role_id == 4)
                                                    <div class="col-12 col-md-4">
                                                        <div class="form-outline">
                                                            <label class="form-label" style="font-weight: bold">Garant</label>
                                                            {{ Form::select('codeGcAssureur', $garants, old('codeGcAssureur'), ['class' => 'js-select2 form-control', 'id' => 'codeGcAssureur']) }}
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-4">
                                                        <div class="form-outline">
                                                            <label class="form-label" style="font-weight: bold">Souscripteur</label>
                                                            {{ Form::select('idSouscripteur', $souscripteurs, old('idSouscripteur'), ['class' => 'form-control js-select2', 'id' => 'idSouscripteur']) }}
                                                        </div>
                                                    </div>
                                                    <!-- Colonne vide pour maintenir 3 colonnes -->
                                                    <div class="col-12 col-md-4"></div>
                                                @endif

                                                <!-- Section conditionnelle pour role_id == 5 ou 6 -->
                                                @if ($role_id == 5 || $role_id == 6)
                                                    <div class="col-12 col-md-4">
                                                        <div class="form-outline">
                                                            <label class="form-label" style="font-weight: bold">Police</label>
                                                            {{ Form::select('idPolice', $polices, old('idPolice'), ['class' => 'form-control js-select2', 'id' => 'idPolice']) }}
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-4">
                                                        <div class="form-outline">
                                                            <label class="form-label" style="font-weight: bold">Collège</label>
                                                            {{ Form::select('idCollege', $colleges, old('idCollege'), ['class' => 'form-control js-select2', 'id' => 'idCollege']) }}
                                                        </div>
                                                    </div>
                                                    <!-- Colonne vide pour maintenir 3 colonnes -->
                                                    <div class="col-12 col-md-4"></div>
                                                @endif

                                                <!-- Section commune : Recherche et Etat sur la même ligne -->
                                                <div class="col-12 col-md-4">
                                                    <div class="form-outline">
                                                        <label class="form-label" style="font-weight: bold">Recherche Adhérent</label>
                                                        {{ Form::text('recherche', old('recherche'), ['class' => 'form-control tagsinput', 'placeholder' => 'Rechercher par Nom ou Prénoms ou Numéro Adhérent...', 'id' => 'recherche']) }}
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-4">
                                                    <div class="form-outline">
                                                        <label class="form-label" style="font-weight: bold">Etat Adhérent</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>
                                                <!-- Colonne vide pour maintenir 3 colonnes -->
                                                <div class="col-12 col-md-4">
                                                    <div class="form-outline">
                                                        <label class="form-label" style="font-weight: bold">&nbsp;</label>
                                                        <button type="submit" class="btn btn-default w-100" id="btnValider" style="background-color: #33db9e; font-weight: bold;">
                                                            <span class="btn-text">Valider</span>
                                                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <!-- Conteneur pour les résultats -->
                                
                                    </div>
                                    <div id="results-container">
                                        <hr>
                                        <div class="card-body p-4">
                                            <div class="row g-4">
                                                @forelse($adherents as $key => $a)
                                                    <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">
                                                                        @php
                                                                            $imagePath = $a->lienPhoto ? asset('plugins/thumbs/vitalis/' . $a->lienPhoto) : asset('plugins/thumbs/img_placeholder.png');
                                                                        @endphp
                                                                        <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">
                                                                            {{ $a->sexe == 'M' ? 'M.' : 'Mlle / Mme.' }} {{ Str::limit(strip_tags($a->adherent), 30) }}
                                                                        </h6>
                                                                        <small >
                                                                            @if ($a->enVigueur == 1 && $a->sorti != 1)
                                                                                <span class="badge bg-success fixed-badge">En vigueur</span>
                                                                            @elseif ($a->codeEtatBeneficiaire == 'R' || $a->codeEtatBeneficiaire == 'NR')
                                                                                <span class="badge bg-danger fixed-badge">Rétiré</span>
                                                                            @elseif ($a->codeEtatBeneficiaire == 'SP')
                                                                                <span class="badge bg-warning text-dark fixed-badge">Suspendu</span>
                                                                            @endif
                                                                        </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>{{ $a->numeroAdherent }}</strong></li>
                                                                        <li>Adhérent : <strong>{{ $a->adherent }}</strong></li>
                                                                        <li>Sexe : <strong>{{ $a->sexe }}</strong></li>
                                                                        <li>Date d'entrée : <strong>{{ \Carbon\Carbon::parse($a->dateEffetBeneficiaire)->format('d/m/Y') }}</strong></li>
                                                                        <li>Catégorie : {{ $a->codeProduit }}</li>
                                                                        <li>Collège :
                                                                            @php
                                                                                $collegeLibelle = 'Non défini';
                                                                                foreach ($colleges as $college) {
                                                                                    if (isset($college['id']) && $college['id'] == $a->idCollege) {
                                                                                        $collegeLibelle = $college['libelleCollege'];
                                                                                        break;
                                                                                    }
                                                                                }
                                                                            @endphp
                                                                        
                                                                            {{ $collegeLibelle }}
                                                                        </li>
                                                                    </ul>
                                                                    <div class="d-flex flex-column" style="gap: 6px;">
                                                                        @if ($currentUser->hasPermission('admin.beneficiaire.index'))
                                                                            <a onclick="showOverlay()" 
                                                                            class="btn btn-warning btn-sm w-100 uniform-btn" 
                                                                            href="{{ route('admin.beneficiaire.index', ['idAdherent' => $a->idAdherent]) }}">
                                                                                <i class="fas fa-user me-1"></i> Ajout de dépendant
                                                                            </a>
                                                                        @endif
                                                                        @if ($currentUser->hasPermission('admin.beneficiaire.index'))
                                                                            <a onclick="showOverlay()" 
                                                                            class="btn btn-warning btn-sm w-100 uniform-btn" 
                                                                            href="{{ route('admin.beneficiaire.index', ['idAdherent' => $a->idAdherent]) }}">
                                                                                <i class="fas fa-user me-1"></i> Mes Bénéficiaires
                                                                            </a>
                                                                        @endif
                                                                        @if ($currentUser->hasPermission('admin.adherent.show'))
                                                                            <a onclick="showOverlay()" 
                                                                            class="btn btn-primary btn-sm w-100 uniform-btn" 
                                                                            href="{{ route('admin.adherent.show', ['adherent' => $a->idAdherent]) }}">
                                                                                <i class="fas fa-eye me-1"></i> Infos Adhérent
                                                                            </a>
                                                                        @endif
                                                                        @if ($currentUser->hasPermission('admin.reseau.index'))
                                                                            <a onclick="showOverlay()" 
                                                                            class="btn btn-dark btn-sm w-100 uniform-btn" 
                                                                            href="{{ route('admin.reseau.index', ['idAdherent' => $a->idAdherent, 'idCollege' => $a->idCollege]) }}">
                                                                                <i class="fas fa-eye me-1"></i> Réseau de soins
                                                                            </a>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @empty
                                                    <div class="col-12 text-center py-4">
                                                        <p class="text-muted fw-bold">Aucun adhérent trouvé.</p>
                                                    </div>
                                                @endforelse
                                            </div>
                                            @if ($adherents->count() > 0)
                                                <div class="card-footer bg-light p-3 d-flex justify-content-between align-items-center">
                                                    <span class="text-muted">{{ $adherents->count() }} Adhérent(s)</span>
                                                    <nav aria-label="Page navigation">
                                                        <ul class="pagination mb-0">
                                                            @if (isset($idPolice))
                                                                {!! $adherents->appends(['idPolice' => $idPolice])->onEachSide(1)->links() !!}
                                                            @elseif (isset($idCollege))
                                                                {!! $adherents->appends(['idCollege' => $idCollege])->onEachSide(1)->links() !!}
                                                            @else
                                                                {!! $adherents->links() !!}
                                                            @endif
                                                        </ul>
                                                    </nav>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Page-body end -->
                </div>
            </div>
        </div>
    </div>
<script>
      $(document).ready(function() {
        $(".js-select2").select2({
            closeOnSelect: false
        });
        $(".js-select2-multi").select2({
            closeOnSelect: false
        });
    });
   
    $("#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("");
        });
    });

    $('#form_search').on('submit', function(e) {
        debugger;
        e.preventDefault(); // Empêche la soumission classique

        // Récupérer les données du formulaire
        let formData = $(this).serialize();

        // Requête AJAX
        $.ajax({
            url: '{{ route('admin.adherent.indexAll') }}',
            method: 'GET',
            data: formData,
            dataType: 'html',
            beforeSend: function() {
                $("#btnValider")
                    .prop("disabled", true)
                    .html('<i class="fas fa-spinner fa-spin"></i> Chargement...');
                $('#results-container').html('<tr><td colspan="18" class="text-center"><i class="fas fa-spinner fa-spin"></i> Chargement...</td></tr>');
            },
            success: function(response) {
                debugger;
                $("#btnValider")
                            .prop("disabled", false)
                            .html('<i class="fas fa-check mr-1"></i> Valider');
                console.log('Réponse complète :', response);
                if (response.success && response.data && response.data.length > 0) {
                    updateResults(response); // Passer response au lieu de response.data
                } else {
                    $("#results-container").html('<div class="text-center p-4">Aucun résultat trouvé.</div>');
                    Toastify({
                        text: "Aucun résultat trouvé.",
                        duration: 3000,
                        gravity: "top",
                        position: "right",
                        backgroundColor: "#ff4444"
                    }).showToast();
                }
                //$('#results-container').html(response);
            },
            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(xhr.responseText);
            }
        });
         // Fonction pour mettre à jour les résultats avec des cartes
         function updateResults(response) {
            debugger;
            let html = '<div class="row g-3">';

            if (response.data && response.data.length > 0) {
                response.data.forEach(function(beneficiaire) {
                    let borderClass = beneficiaire.importe == '1' ? 'border border-success' : 'border border-danger';
                    let iconClass = beneficiaire.importe == '1' ? 'far fa-file-excel text-success fa-4x' : 'far fa-file-excel text-danger fa-4x';
                    let statusIcon = beneficiaire.importe == '1' ? 'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
                    let statusText = beneficiaire.importe == '1' ? 'Importation validée' : 'En cours d\'importation';
                    let btnClass = beneficiaire.importe == '1' ? 'btn-outline-success' : 'btn-outline-danger';
                    let exportUrl = "{{ route('admin.incorporation.exportLocal', ':id') }}".replace(':id', beneficiaire.nomFichier || '');

                    html += `
                            <div class="col-md-4">
                                <div class="card text-center p-3 shadow-sm ${borderClass}">
                                    <a href="#" class="d-block">
                                        <i class="${iconClass}"></i>
                                    </a>
                                    <div>
                                        <i class="${statusIcon}"></i> ${statusText}
                                    </div>
                                    <div class="mt-2">
                                        <a class="fw-bold text-dark d-block">
                                            ${beneficiaire.nomFichier_user || 'N/A'}
                                        </a>
                                        <small class="text-muted d-block">
                                            Type : xlsx , wls
                                            <br> Ajouté par <span style="font-weight:bold">${beneficiaire.nom || ''} ${beneficiaire.prenoms || ''}</span>
                                        </small>
                                    </div>
                                    <a href="${exportUrl}" class="btn ${btnClass} btn-sm mt-2">
                                        <i class="fas fa-download"></i> Télécharger
                                    </a>
                                </div>
                            </div>
                        `;
                    });
                    Toastify({
                        text: "Resultat trouvé avec succès !",
                        duration: 3000,
                        gravity: "top",
                        position: "right",
                        backgroundColor: "#00b09b"
                    }).showToast();
                } else {
                    html += '<div class="col-12 text-center p-4">Aucun résultat trouvé.</div>';
                    Toastify({
                            text: "Aucun résultat trouvé.",
                            duration: 3000,
                            gravity: "top",
                            position: "right",
                            backgroundColor: "#ff4444"
                        }).showToast();
                }

                html += '</div>';

                // Ajouter la pagination si nécessaire
                if (response.total > response.per_page) {
                    html += `
                        <nav aria-label="Page navigation" class="mt-4">
                            <ul class="pagination justify-content-center">
                                ${response.current_page > 1 ? `
                                    <li class="page-item">
                                        <a class="page-link" href="#" data-page="${response.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: response.last_page }, (_, i) => i + 1).map(page => `
                                    <li class="page-item ${page === response.current_page ? 'active' : ''}">
                                        <a class="page-link" href="#" data-page="${page}">${page}</a>
                                    </li>
                                `).join('')}
                                ${response.current_page < response.last_page ? `
                                    <li class="page-item">
                                        <a class="page-link" href="#" data-page="${response.current_page + 1}">Suivant</a>
                                    </li>
                                ` : '<li class="page-item disabled"><span class="page-link">Suivant</span></li>'}
                            </ul>
                        </nav>
                    `;
                }

                console.log('HTML généré :', html);
                $("#searchResults").html(html);

                // Gestion des clics sur les liens de pagination
                $(".page-link").click(function(e) {
                    e.preventDefault();
                    let page = $(this).data('page');
                    if (page) {
                        datas.page = page;
                        $("#btnSearchIncorporation").click();
                    }
                });
            }
    });
    /*  $('#form_search').children().on('change', function() {
        $('#form_search').submit();
    }); */
</script> 
@endsection