@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 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.index',['idPolice' => $idPolice]) }}"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">
                                <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
                                    <div class="col-md-9">
                                        <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="Nom de la police" value="{{ old('recherche') }}">
                                        </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>  
                            <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.items', ['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>

           
<script>
    $('#form_search').on('submit', function(e) {
        //debugger;
        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.adherent.items') }}",
        }).done(function (response) {

            $('#preview').html(response);
            $('.page-loader-wrapper').fadeOut();
        });
    });

    $('#form_search').children().on('change', function() {
        $('#form_search').submit();
    });
</script>
@endsection