@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 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">Polices</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.police.indexAll') }}" style="font-weight: bold;">Liste des polices</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="pcoded-inner-content" >
            <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">
                                        <div class="col-md-3">
                                            <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">
                                            <div class="form-group mb-0">
                                                <label for="codeEtatPolice" class="form-label fw-bold text-white mb-1">État</label>
                                                {{ Form::select('codeEtatPolice', $etatpolice, old('codeEtatPolice'), ['class' => 'js-select2 form-control-sm rounded-pill', 'id' => 'codeEtatPolice', 'placeholder' => 'Tous', 'style' =>"text-color:black"]) }}
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group mb-0">
                                                <label for="dateEffet" class="form-label fw-bold text-white mb-1">Date effet</label>
                                                <input type="date" name="dateEffet" id="dateEffet" class="form-control form-control-sm rounded-pill" value="{{ old('dateEffet') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group mb-0">
                                                <label for="dateEcheance" class="form-label fw-bold text-white mb-1">Date échéance</label>
                                                <input type="date" name="dateEcheance" id="dateEcheance" class="form-control form-control-sm rounded-pill" value="{{ old('dateEcheance') }}">
                                            </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 class="card-body p-2" style="background-color: #f8f9fa;">
                                    <div id="preview" class="dt-responsive table-responsive">
                                        @include('Garant::admin.police.itemsAll', ['polices' => $polices])
                                    </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,
        placeholder: "État police",
        allowClear: true
    });

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

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

    $("#codeGcAssureur").on("change", function() {
        var codeGcAssureur = $(this).val();
        $.ajax({
            method: "GET",
            data: { codeGcAssureur: codeGcAssureur },
            url: "{{ url('admin/garantSouscripteur') }}",
        }).done(function(souscripteurs) {
            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").html(result);
        });
    });

    function updateResults() {
        let formData = {
            idSouscripteur: $('#idSouscripteur').val(),
            recherche: $('#recherche').val(),
            codeEtatPolice: $('#codeEtatPolice').val(),
            dateEffet: $('#dateEffet').val(),
            dateEcheance: $('#dateEcheance').val()
        };
        if (Object.values(formData).some(value => value !== '' && value !== null)) {
            $.ajax({
                url: "{{ route('admin.police.items') }}",
                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>');
                }
            });
        }
    }

    $('.open-dependant-modal').on('click', function(e) {
        e.preventDefault();
        var url = $(this).data('url');
        var idPolice = url.split('/').pop();
        $.ajax({
            url: url,
            type: 'GET',
            data: { idPolice: idPolice },
            beforeSend: function() {
                $("#preview").html('<div class="text-center py-3"><i class="fas fa-spinner fa-spin"></i> Chargement...</div>');
            },
            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);
                $("#preview").html('<div class="text-center py-3 text-danger">Erreur lors du chargement.</div>');
            }
        });
    });
});
</script>
@endsection