@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;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        text-align: center;
    }

    .fixed-badge {
        min-width: 70px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.5rem;
        text-align: center;
        width: 115px;
    }
    .export-card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, #343a40, #212529);
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            z-index: 10;
        }
        .export-card:hover {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
            transform: translateY(-3px);
        }
</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">Etat Bénéficiaire</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="#" style="font-weight: bold;">Mouvement d'éffectif </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> 
                            <div class="col-md-4">
                            </div>
                            <div class="col-md-4">
                                <div class="card text-center p-2">
                                    <a class="btn btn-success" style="color:black;" href="{{ route('admin.etat.pdf', ['codeEtatPolice' => $etatPolice, 'Sorti' => $Sorti, 'idSouscripteur' => $souscripteur, 'idPolice' => $police, 'idCollege' => $college, 'dateDemande' => $dateDemande, 'pdf' => $pdf]) }}" title="Exporter vers Pdf">
                                        <i class="fas fa-file-pdf"></i> Exporter la sélection au format PDF
                                    </a>
                                </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">
                                {{ Form::open(['route' => 'admin.etat.valider', 'method' => 'GET', 'id' => 'form_search']) }}
                                <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-3">
                                    <div class="form-group mb-0">
                                        <label for="recherche" class="form-label fw-bold text-white mb-1">Entrez la date souhaitée</label>
                                        {{ Form::date('dateDemande', old('dateDemande'), ['class' => 'form-control form-txt-sucess datepicker', 'id' => 'dateDemande', 'placeholder' => '< Date d\'enregistrement']) }}
                                    </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' => 'js-select2 form-control', 'id' => 'idSouscripteur']) }}
                                    </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">Police</label>
                                        {{ Form::select('idPolice', $polices, old('idPolice'), ['class' => 'js-select2 form-control', 'id' => 'idPolice']) }}
                                        @if (($errors->has('idPolice')))
                                            <div class="alert alert-danger">
                                                {{ $errors->first('idPolice') }}
                                            </div>
                                        @endif
                                    </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>
                                <div class="col-md-3">
                                    <div class="form-group mb-0">
                                        <label for="recherche" class="form-label fw-bold text-white mb-1">Etat Police</label>
                                        {{ Form::select('codeEtatPolice', $etatpolices, old('codeEtatPolice'), ['class' => 'form-control js-select2', 'id' => 'codeEtatPolice']) }}
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-0">
                                        <label class="form-label "  style="font-weight: bold">Statut</label>
                                        <select name="Sorti" id="Sorti" class="form-control js-select2" >
                                            <option value="">Veuillez sélectionner un statut</option>
                                            <option value="1">Actif</option>
                                            <option value="0">Rétiré</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 mt-3">
                                    <button type="submit" 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>    
                                {{ Form::close() }}
                            </div>
                        </div>  
                        <div id="modal-container"></div>
                        <div class="card-body p-2" style="background-color: #f8f9fa;">
                            <div class="dt-responsive table-responsive">
                                @if(isset($beneficiaires))
                                    @include('admin.etat.items', ['beneficiaire' => $beneficiaires])
                                @endif
                            </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>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $(".js-select2").select2({
            closeOnSelect: false
        });
        $(".js-select2-multi").select2({
            closeOnSelect: false
        });

        $('#form_search').on('submit', function(e) {
            showOverlay(); // Afficher le spinner lors de la soumission
        });

        /*$('#form_search').children().on('change', function() {
            $('#form_search').submit();
        });*/

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

            $.ajax({
                method: "GET",
                data: {
                    idSouscripteur: idSouscripteur
                },
                url: "{{ url('admin/sousPolice') }}",
            }).done(function (polices) {
                var result = '<option value="">Veuillez sélectionner une police</option>';
                for (var i = 0; i < polices.length; i++) {
                    result += '<option value="' + polices[i].id + '">' + polices[i].libellePolice + '</option>';
                }
                $("#idPolice").find("option").remove().end().append(result).val("");
            });
        });

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

            $.ajax({
                method: "GET",
                data: {
                    idPolice: idPolice,
                    idSouscripteur: idSouscripteur
                },
                url: "{{ url('admin/policeCollege') }}",
            }).done(function (colleges) {
                var result = '<option value="">Veuillez sélectionner un collège</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("");
            });
        });
    });
</script>
@endsection