@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.0/dist/js/bootstrap.bundle.min.js"></script>
@section('content')
<section>
    <div class="pcoded-content">
        <!-- Breadcrumb -->
        <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">Bénéficiaires</h4>
                        </div>
                        <ul class="breadcrumb shadow-sm p-3 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 onclick="showOverlay()" href="{{ route('admin.souscripteur.index') }}" style="font-weight: bold;">Liste des bénéficiaires</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-user-check me-1"></i> Bénéficiaires</h5>
                                        <span class="badge bg-success">{{ $nbre_beneficiaires }}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- Zone de recherche -->
                            <div class="card shadow-sm border-0" style="margin-top:-30px">
                                <div class="card-header p-2 bg-dark text-white">
                                    @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
                                    <div class="row align-items-center g-2">
                                        @if ($role_id == 4 )
                                        <div class="col-md-6">
                                            <div class="form-group mb-0">
                                                <label for="codeEtatPolice" 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-6">
                                            <div class="form-group mb-0">
                                                <label for="idSouscripteur" 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

                                        @if ($role_id == 5 ||  $role_id == 6)
                                        <div class="col-md-6">
                                            <div class="form-group mb-0">
                                                <label for="idPolice" 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-6">
                                            <div class="form-group mb-0">
                                                <label for="codeEtatPolice" 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>
                                        <div class="row align-items-center g-2">
                                            <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="Rechercher par Nom ou Prénoms ou Numéro Bénéficiaire..." value="{{ old('recherche') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group mb-0">
                                                    <label for="codeEtatPolice" class="form-label fw-bold text-white mb-1">État Bénéficiaire</label>
                                                    <select name="sorti" id="sorti" class="form-control js-select2">
                                                            <option value="">Selectionnez l'etat </option>
                                                            <option value="0">En vigueur</option>
                                                            <option value="1">Rétiré / Suspendu </option>
                                                        </select>    
                                                </div>
                                            </div>
                                            <div class="col-md-3 mt-3">
                                                <button type="button" id="btnBeneficiaireSearch" 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>
                                <div class="card-body p-2" style="background-color: #f8f9fa;">
                                    <div id="preview" class="dt-responsive table-responsive">
                                        @include('Assure::admin.beneficiaire.itemsAll', ['beneficiaires' => $beneficiaires])
                                    </div>
                                </div>
                            </div>
                            <div id="modal-container"></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>
<style>
    
    /* Style pour le bouton compact */
    .btn-compact {
        height: 30px; /* Même hauteur que uniform-btn pour cohérence */
        padding: 0 0.75rem; /* Padding réduit pour compacité */
        font-size: 0.85rem; /* Taille de police cohérente */
        display: inline-flex; /* S'adapte à la taille du contenu */
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        line-height: 1; /* Réduit l'espacement vertical interne */
    }

    /* Assurer que le bouton ne prend pas trop de largeur */
    .btn-compact:not(.uniform-btn) {
        min-width: auto; /* Supprime la largeur minimale */
    }

    /* Maintenir les styles de transition et hover */
    .btn-compact:hover {
        opacity: 0.9;
        transform: scale(1.05);
        transition: all 0.3s ease;
    }

    /* Style spécifique pour btn-outline-dark */
    .btn-outline-dark.btn-compact:hover {
        background-color: #343a40;
        color: white;
    }

    /* Uniformiser la taille des colonnes et des cartes */
    .col-lg-3.col-md-4 {
        display: flex; /* Assure que la carte prend tout l'espace de la colonne */
    }

    .card {
        width: 100%; /* La carte prend toute la largeur de la colonne */
        min-height: 450px; /* Hauteur minimale pour uniformité */
        display: flex;
        flex-direction: column; /* Permet à la carte de s'étendre verticalement */
    }

    .card-body {
        flex-grow: 1; /* Permet au corps de la carte de s'étendre pour occuper l'espace restant */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Espace le contenu du corps */
    }

    .card-footer {
        flex-shrink: 0; /* Empêche le footer de rétrécir */
    }

    /* Espacement entre les boutons dans le footer */
    .custom-gap {
        gap: 0.5rem; /* Espace de 8px entre les boutons */
    }

    /* Style des boutons uniformes */
    .uniform-btn {
        height: 30px;
        min-width: 160px; /* Largeur minimale pour uniformité */
        padding: 0 1rem;
        text-align: center;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
    }

    /* Transitions et hover */
    .transition-all {
        transition: all 0.3s ease;
    }

    .btn:hover {
        opacity: 0.9;
        transform: scale(1.05);
    }

    /* Styles spécifiques pour les boutons */
    .btn-outline-primary:hover {
        background-color: #33db9e;
        color: white;
    }

    .btn-outline-info:hover {
        background-color: #17a2b8;
        color: white;
    }

    .btn-outline-dark:hover {
        background-color: #343a40;
        color: white;
    }

    .btn-outline-warning:hover {
        background-color: #ffc107;
        color: #212529;
    }

    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: white;
    }

    /* Autres styles existants */
    .card:hover {
        transform: translateY(-5px);
        transition: all 0.3s;
    }

    .form-control:focus {
        border-color: #33db9e;
        box-shadow: 0 0 5px rgba(51, 219, 158, 0.5);
    }

    .form-control-sm {
        height: 28px;
        font-size: 0.85rem;
    }

    .btn-round {
        border-radius: 50px;
    }

    #preview {
        min-height: 150px;
    }

    .hover\:shadow-lg:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .badge {
        font-size: 0.9em;
        font-weight: 500;
    }
</style>
<script>
     $(document).ready(function() {
        $(".js-select2").select2({
            closeOnSelect: false
        });
        $(".js-select2-multi").select2({
            closeOnSelect: false
        });
    });
    /* $('#form_search').on('submit', function(e) {
        var form = $(this);
        var action = $(form).attr('action');
        var datas = $(form).serialize();

        e.preventDefault();

        $('.page-loader-wrapper').fadeIn();

        $.ajax({
            method: "GET",
            data: datas,
            url: "{{ route('admin.beneficiaire.itemsAll') }}",
        }).done(function (response) {
            $('#preview').html(response);
            $('.page-loader-wrapper').fadeOut();
        });
    }); */
    $("#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').children().on('change', function() {
        $('#form_search').submit();
    }); */

    let timeout;
    $('#recherche, #codeEtatPolice, #sorti, #dateEcheance').on('input change', function() {
        clearTimeout(timeout);
        timeout = setTimeout(updateResults, 300);
    });

    $('#btnBeneficiaireSearch').on('click', updateResults);

    
    function updateResults() {
        let formData = {
            idSouscripteur: $('#idSouscripteur').val(),
            recherche: $('#recherche').val(),
            codeEtatPolice: $('#codeEtatPolice').val(),
            sorti: $('#sorti').val(),
            dateEcheance: $('#dateEcheance').val()
        };
        if (Object.values(formData).some(value => value !== '' && value !== null)) {
            $.ajax({
                url: "{{ route('admin.beneficiaire.itemsAll') }}",
                method: "GET",
                data: formData,
                beforeSend: function() {
                    $("#preview").html('<div class="text-center py-3"><i class="fas fa-spinner fa-spin"></i> Chargement...</div>');
                },
                success: function(response) {
                    $('#preview').html(response);
                },
                error: function() {
                    $("#preview").html('<div class="text-center py-3 text-danger">Erreur lors du chargement.</div>');
                }
            });
        }
    }

</script>
@endsection