@extends('../partials.model')

@section('content')
    <style>
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .animate-fade-in {
            animation: fadeIn 1s ease-out;
        }

        .property-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: 15px;
            overflow: hidden;
        }

        .property-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
        }

        .property-image {
            transition: transform 0.5s ease;
        }

        .property-card:hover .property-image {
            transform: scale(1.1);
        }

        .property-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .property-card:hover .property-overlay {
            opacity: 1;
        }

        .page-link {
            border-radius: 10px !important;
            padding: 0.5rem 1rem;
            transition: all 0.3s ease;
        }

        .page-link:hover:not(.disabled) {
            transform: translateY(-2px);
        }

        .page-item.active .page-link {
            transform: scale(1.1);
        }

        .badge {
            font-size: 0.75rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
        }

        .slide-item-0 {
            animation: slideUp 0.6s ease-out 0s both;
        }

        .slide-item-1 {
            animation: slideUp 0.6s ease-out 0.1s both;
        }

        .slide-item-2 {
            animation: slideUp 0.6s ease-out 0.2s both;
        }

        .slide-item-3 {
            animation: slideUp 0.6s ease-out 0.3s both;
        }

        .slide-item-4 {
            animation: slideUp 0.6s ease-out 0.4s both;
        }

        .slide-item-5 {
            animation: slideUp 0.6s ease-out 0.5s both;
        }


        .offre-card {
            transition: all 0.3s ease;
            border: 1px solid #e5e7eb;
            background: #fff;
            border-radius: 12px;
        }
        .offre-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            border-color: #10b981; /* Couleur Emerald de Hereditas */
        }
        .folder-icon-wrapper {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f9fafb;
            border-radius: 8px 8px 0 0;
        }
        .dropdown-btn-custom {
            background: white;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
    </style>
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center my-4 justify-content-between page-header-breadcrumb">
            <div>
                <h1 class="text-3xl font-bold text-slate-900">
                    Gestion des offres
                </h1>
                <p class="text-slate-600 mtw-1">
                    Gérer tous vos offres lots en toute simplicité
                </p>
            </div>
            <div class="ms-md-1 ms-0">
                <nav>
                    <!-- <button class="btn btn-primary" id="Ajout-nouveau-lot" data-bs-toggle="modal"
                        data-bs-target="#offreProprieteModal">
                        <i class="bi bi-plus-circle btn-icon-size"></i>
                        Nouvelle offre
                    </button> -->

                    <button class="btn btn-primary" data-bs-toggle="modal"
                        data-bs-target="#offreModal" id="addOffreModal">
                        <i class="bi bi-plus-circle btn-icon-size"></i>
                        Nouvelle offre
                    </button>

                    
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <div class="row g-3">
            <!-- En attente -->
            <div class="col-md-4">
                <div class="card card-border">
                    <div class="card-body d-flex">
                        <i class="bi bi-clock text-warning fs-30 mt-2"></i>
                        <div>
                            <p class="stat-value mb-0 fw-bold ms-2 fs-20" id="stat-disponible">0</p>
                            <p class="stat-label mb-0 ms-2">DISPONIBLE</p>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Rejetées -->
            <div class="col-md-4">
                <div class="card card-border">
                    <div class="card-body d-flex">
                        <i class="bi bi-x-circle text-danger fs-30 mt-2"></i>
                        <div>
                            <p class="stat-value mb-0 fw-bold ms-2 fs-20" id="stat-vendu">0</p>
                            <p class="stat-label mb-0 ms-2">VENDU</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Approuvées -->
            <div class="col-md-4">
                <div class="card card-border">
                    <div class="card-body d-flex">
                        <i class="bi bi-check-circle text-success fs-30 mt-2"></i>
                        <div>
                            <p class="stat-value mb-0 fw-bold ms-2 fs-20" id="stat-attente">0</p>
                            <p class="stat-label mb-0 ms-2">EN ATTENTE</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row mb-4">
            <div class="col-md-8 mx-auto">
                <div class="input-group shadow-sm">
                    <span class="input-group-text bg-white border-end-0">
                        <i class="bi bi-search text-primary"></i>
                    </span>
                    <input type="text" id="searchInput" class="form-control border-start-0 ps-0"
                        placeholder="Rechercher par titre, ville ou type (ex: Villa, Paris...)" aria-label="Recherche" >
                    <!-- <button class="btn btn-primary px-4" id="searchBtn">Rechercher</button> -->
                </div>
            </div>
        </div>
        <!-- Start::row-1 -->
        <div class="card card-border">
            <div class="card-body">
                <div class="row g-2 mb-5" id="OffreDossierGrid"></div>
            </div>
        </div>
        <!--End::row-1 -->

         <!-- Modal -->
        <div class="modal fade" id="offreModal" tabindex="-1" aria-labelledby="offreModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="offreModalLabel">Nouvelle offres</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="form_new_offre">

                            @csrf
                             <input type="hidden" class="form-control" id="id_offre_hidden" name="id_offre_hidden" value="0">
                            <div class="mb-3">
                                <label for="title" class="form-label fw-bold">
                                    <i class="bi bi-pencil-fill text-primary me-2"></i>
                                    Titre*
                                </label>
                                <input type="text" class="form-control" id="titre_offre" name="titre_offre" required>
                                <div class="invalid-feedback"></div>
                            </div>

                            <!-- <div class="col-xl-12 mb-1">
                                <div class="lib">Client* :</div>
                                <select class="form-select" id="client" name="id_client">
                                </select>
                            </div> -->

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i
                                class="bi bi-x-circle me-2"></i> Fermer</button>
                        <button type="button" class="btn btn-primary" id="save_offre"> <i class="bi bi-save me-2"></i>
                            <span id="button_text">Enregistrer</span></button>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="offreClientAssocieModal" tabindex="-1" aria-labelledby="ClientAssocieModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="ClientAssocieModalLabel">Gestion des Clients</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <ul class="nav nav-tabs mb-4" id="clientTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="add-client-tab" data-bs-toggle="tab" data-bs-target="#add-client-pane" type="button" role="tab" aria-controls="add-client-pane" aria-selected="true">
                                    <i class="bi bi-person-plus me-2"></i>Associer un client
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="list-client-tab" data-bs-toggle="tab" data-bs-target="#list-client-pane" type="button" role="tab" aria-controls="list-client-pane" aria-selected="false">
                                    <i class="bi bi-table me-2"></i>Liste des clients associés
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content" id="clientTabContent">
                            <div class="tab-pane fade show active" id="add-client-pane" role="tabpanel" aria-labelledby="add-client-tab" tabindex="0">
                                <input type="hidden" id="id_offre_client_hidden" name="id_offre_client_hidden" value="0">
                                
                        
                                
                                    <div class="col-xl-12 mb-2">
                                        <div class="lib">Client* :</div>
                                        <select class="form-select" id="association-offre-client-select" name="id_client">
                                        </select>
                                    </div>

                                    <ol id="ListClientAssocieZone" class="list-group list-group-numbered">
                                    
                                    </ol>
                            </div>

                            <div class="tab-pane fade" id="list-client-pane" role="tabpanel" aria-labelledby="list-client-tab" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle border"  id="client-offre-table">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Nom</th>
                                                <th>prenom</th>
                                                <th>Numéro</th>
                                                <th>Adresse</th>
                                                <th>Civilité</th>
                                                <th class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        
                                    </table>
                                    <div id="empty-state" class="text-center py-4 text-gray-400 d-none">
                                        <i class="bi bi-people fs-1 d-block mb-2"></i>
                                        Aucun client associé pour le moment.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                        <button type="button" class="btn btn-success" id="ajout-client-associe-btn">
                            <i class="bi bi-check2-circle me-2"></i> <span id="button_text">Enregistrer l'association</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="offreProprieteModal" tabindex="-1" aria-labelledby="offreProprieteModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="offreProprieteModalLabel">Nouvelle offres</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="offre_propriete_form">
                            @csrf

                            <input type="hidden" class="form-control" id="idOffreHidden" name="idOffreHidden">
                            {{-- Titre --}}
                            <div class="mb-3">
                                <label for="title" class="form-label fw-bold">
                                    <i class="bi bi-pencil-fill text-primary me-2"></i>
                                    Titre du bien *
                                </label>
                                <input type="text" class="form-control" id="title" name="title" required>
                                <div class="invalid-feedback"></div>
                            </div>

                            {{-- Type de bien --}}
                            <div class="mb-3">
                                <label for="type" class="form-label fw-bold">
                                    <i class="bi bi-building text-primary me-2"></i>
                                    Type de bien *
                                </label>
                                <select class="form-select" id="type" name="type" required>
                                    <option value="">Sélectionnez un type</option>
                                    <option value="Appartement">Appartement</option>
                                    <option value="Maison">Maison</option>
                                    <option value="Villa">Villa</option>
                                    <option value="Studio">Studio</option>
                                    <option value="Duplex">Duplex</option>
                                    <option value="Penthouse">Penthouse</option>
                                    <option value="Loft">Loft</option>
                                    <option value="Château">Château</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>

                            {{-- Prix --}}
                            <div class="mb-3">
                                <label for="price" class="form-label fw-bold">
                                    <i class="bi bi-wallet-fill text-primary me-2"></i>
                                    Prix *
                                </label>
                                <input type="number" class="form-control" id="price" name="price" min="0"
                                    step="1000" required>
                                <div class="invalid-feedback"></div>
                            </div>

                            {{-- Localisation --}}
                            <div class="mb-3">
                                <label for="location" class="form-label fw-bold">
                                    <i class="bi bi-geo-alt-fill text-primary me-2"></i>
                                    Localisation *
                                </label>
                                <input type="text" class="form-control" id="location" name="location"
                                    placeholder="Ex: Paris 8ème, Île-de-France" required>
                                <div class="invalid-feedback"></div>
                            </div>

                            {{-- Caractéristiques en ligne --}}
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="bedrooms" class="form-label fw-bold">
                                        <i class="bi bi-door-closed text-primary me-2"></i>
                                        Chambres *
                                    </label>
                                    <input type="number" class="form-control" id="bedrooms" name="bedrooms"
                                        min="0" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label for="bathrooms" class="form-label fw-bold">
                                        <i class="bi bi-droplet text-primary me-2"></i>
                                        Salles de bain *
                                    </label>
                                    <input type="number" class="form-control" id="bathrooms" name="bathrooms"
                                        min="0" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label for="surface" class="form-label fw-bold">
                                        <i class="bi bi-bounding-box text-primary me-2"></i>
                                        Surface (m²) *
                                    </label>
                                    <input type="number" class="form-control" id="surface" name="surface"
                                        min="0" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>

                            {{-- Image(s) --}}
                            <div class="mb-3">
                                <label for="image" class="form-label fw-bold">
                                    <i class="bi bi-image text-primary me-2"></i>
                                    Images du bien * (plusieurs possibles)
                                </label>
                                <input type="file" class="form-control" id="image" name="images[]"
                                    accept="image/*" multiple required>
                                <div class="invalid-feedback"></div>

                                {{-- Conteneur pour l'aperçu de plusieurs images --}}
                                <div id="imagePreviewContainer" class="mt-3 d-flex flex-wrap gap-2">
                                    {{-- Les images s'afficheront ici dynamiquement --}}
                                </div>
                            </div>
                            {{-- Description --}}
                            <div class="mb-3">
                                <label for="description" class="form-label fw-bold">
                                    <i class="bi bi-card-text text-primary me-2"></i>
                                    Description
                                </label>
                                <textarea class="form-control" id="description" name="description" rows="4"
                                    placeholder="Décrivez le bien..."></textarea>
                                <div class="invalid-feedback"></div>
                            </div>

                            {{-- Boutons --}}
                            <!-- <div class="d-flex gap-2 justify-content-end">
                                        <a href="#" class="btn btn-secondary">
                                            <i class="bi bi-x-circle me-2"></i>
                                            Annuler
                                        </a>
                                        <button type="submit" class="btn btn-primary" id="submitBtn">
                                            <i class="bi bi-save me-2"></i>
                                            <span id="submitText">Enregistrer</span>
                                            <span id="submitSpinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
                                        </button>
                                    </div> -->

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i
                                class="bi bi-x-circle me-2"></i> Fermer</button>
                        <button type="button" class="btn btn-primary" id="save_offre_property"> <i class="bi bi-save me-2"></i>
                            Enregistrer</button>
                    </div>
                </div>
            </div>
        </div>

         <!-- Modal -->
        <div class="modal fade" id="offreProprieteItemModal" tabindex="-1" aria-labelledby="offreProprieteItemModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header" style="background:#F5F5F5">
                        <h1 class="modal-title fs-5" id="offreProprieteItemTitre"></h1>
                        <div>
                             <button type="button" class="btn btn-primary" id="CallModal_AddProprieteOffre" style="border-radius:30px"> <i class="bi bi-plus-circle me-1"></i>
                                Ajouter</button>
                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                    </div>
                    <div class="modal-body">
                            <div class="row g-4 mb-5" id="propertiesGrid"></div>

                            
                                <div class="Pagination_" style="display:none">
                                        <!-- Pagination -->
                                        <nav aria-label="Pagination des propriétés">
                                            <ul class="pagination justify-content-center gap-2" id="pagination"></ul>
                                        </nav>

                                        <!-- Info pagination -->
                                        <div class="text-center">
                                            <p class="text-white-50" id="paginationInfo"></p>
                                        </div>
                                </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i
                                class="bi bi-x-circle me-2"></i> Fermer</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            // Données des propriétés (Inchangées)
            const properties = [];
            const OffreArray = [];
            let currentPage = 1;
            const itemsPerPage = 6;

            remplirSelect2('{{ route("client.get") }}', null, '#association-offre-client-select', 'id_client', 'nom_client', '#offreClientAssocieModal', 'SELECTIONNEZ UN CLIENT')
            // Initialisation
             renderOffre()
            // Clic sur le bouton de sauvegarde
            $('#save_offre_property').on('click', function() {
                $('#offre_propriete_form').submit();
            });

            // Soumission du formulaire
            $('#offre_propriete_form').on('submit', function(e) {
                e.preventDefault();

                $('#submitSpinner').show();
                $('#submitText').text('Enregistrement...');
                var formData = new FormData(this);

                $.ajax({
                    url: '{{ route("propriete.store") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend:function(){

                        if($('#title').val().length == 0){
                            notif('danger','Erreur','Le titre est obligatoire')
                             $('#title').focus();
                            return false
                        }

                        if($('#type').val().length == 0){
                            notif('danger','Erreur','Le type est obligatoire')
                            $('#type').focus();
                            return false
                        }

                        if($('#price').val().length == 0){
                            notif('danger','Erreur','Le prix est obligatoire')
                            $('#price').focus();
                            return false
                        }

                        if($('#location').val().length == 0){
                            notif('danger','Erreur','La localisation est obligatoire')
                            $('#location').focus();
                            return false
                        }

                        if($('#bedrooms').val().length == 0){
                            notif('danger','Erreur','Champs obligatoire')
                            $('#bedrooms').focus();
                            return false
                        }

                        if($('#bathrooms').val().length == 0){
                            notif('danger','Erreur','Champs obligatoire')
                            $('#bathrooms').focus();
                            return false
                        }

                        if($('#surface').val().length == 0){
                            notif('danger','Erreur','Champs obligatoire')
                            $('#surface').focus();
                            return false
                        }

                    },
                    success: function(response) {
                        $('#submitSpinner').hide();
                        $('#submitText').text('Enregistrer');
                        $('#offreProprieteModal').modal('hide');
                        $('#offre_propriete_form')[0].reset();
                        $('#imagePreviewContainer').empty();

                        notif('success', 'Succès', response.msg);
                        var idOffre = $("#idOffreHidden").val()
                        renderProperties(idOffre);
                        renderOffre();
                        $('#offreProprieteItemModal').modal('show')
                        $('#offreProprieteModal').modal('hide')

                    },
                    error: function(xhr) {
                       
                        $('#submitSpinner').hide();
                        $('#submitText').text('Enregistrer');
                    }
                });
            });

            $('#save_offre').on('click', function() {
                $('#form_new_offre').submit();
            });
            // Soumission du formulaire
            $('#form_new_offre').on('submit', function(e) {
                e.preventDefault();

                //$('#submitSpinner').show();
                //$('#submitText').text('Enregistrement...');
                var formData = new FormData(this);

                $.ajax({
                    url: '{{ route("offre.store") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend:function(){

                        if($('#titre_offre').val().length == 0){
                            notif('danger','Erreur','Le titre est obligatoire')
                            $('#titre_offre').focus();
                            return false
                        }
                    },
                    success: function(response) {
                       // $('#submitSpinner').hide();
                       // $('#submitText').text('Enregistrer');
                        $('#offreModal').modal('hide');
                         renderOffre()
                         notif('success', 'Succès', response.msg);
                        $('#form_new_offre')[0].reset(); 
                    },
                    error: function(xhr) {
                        $('#submitSpinner').hide();
                        //$('#submitText').text('Enregistrer');
                    }
                });
            });

            $(document).on('click','#CallAddOffre',function(){
                
                let idOffre = $(this).data('id')
                let titre = $(this).data('titre')
                renderProperties(idOffre)
                $('#idOffreHidden').val(idOffre)
                $('#offreProprieteItemTitre').text(titre)
                $('#offreProprieteItemModal').modal('show')
            })

            $(document).on('click','#CallModal_AddProprieteOffre',function(){
                
                let idOffre = $(this).data('id')
                $('#offreProprieteItemModal').modal('hide')
                $('#offreProprieteModal').modal('show')
            })

            $(document).on('click','#modifier-offre',function(){

                let id_offre = $(this).data('id')
                $('#id_offre_hidden').val(id_offre)
                $.ajax({
                    type: "GET",
                    url: "{{route('offre.get')}}",
                    data: {
                        id:id_offre
                    },
                    dataType: "JSON",
                    success: function (resp) {
                       $('#titre_offre').val(resp.data[0].titre_offre)
                       $('#offreModalLabel').text("Modification")
                       $('#button_text').text("Modifier")
                       $('#offreModal').modal('show')
                    },
                    error:function(xhr){

                    }
                });
            })

            $(document).on('click','#supprimer-offre',function(){
                var id = $(this).data("id")

                   sweet_alert(callback = function() {
                    $.ajax({
                        type: "DELETE",
                        url: "{{route('offre.delete')}}",
                        data: {id:id,
                          _token: '{{ csrf_token() }}'
                        },
                        dataType: "JSON",
                        success: function (resp) {
                            notif('success','Succès',resp.msg)
                            renderOffre()
                        },
                        error:function(xhr){

                        }
                    });
                })
            })

           
            $('#addOffreModal').on('click',function(){
                $('#offreModalLabel').text("Nouvelle offre")
                $("#titre_offre").val('')
                $('#id_offre_hidden').val(0)
                $('#button_text').text("Enregistrer")
            })

            // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ASSOCIATION DE CLIENT A UN PROJET ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
             
                var clientArray = [];

                $(document).on('click','#associe-client-offre',function(){
                    var id= $(this).data('id')
                    recuperationListeClientAssocie(id)
                    $('#id_offre_client_hidden').val(id)
                    $('#offreClientAssocieModal').modal('show')
                })

                // Fonction pour rafraîchir l'affichage de la liste
                function renderClientList() {
                    $('#ListClientAssocieZone').empty();
                    $.each(clientArray, function(key, value) {
                        $('#ListClientAssocieZone').append(`
                            <li class="list-group-item d-flex justify-content-between align-items-start shadow-sm mb-2 rounded border-emerald-100">
                                <div class="ms-2 me-auto">
                                    <span class="fw-bold text-gray-700">${value.nom}</span>
                                </div>
                                <i class="bi bi-trash3 btn-delete-client" 
                                data-key="${key}" 
                                style="color:red; cursor:pointer; font-size: 1.2rem;"></i>
                            </li>
                        `);
                    });
                }

                $('#association-offre-client-select').on('change', function() {
                    var idClient = $(this).val();
                    var nomClient = $(this).find(':selected').text();

                    // Vérifier si le client existe déjà
                    var exists = clientArray.some(client => client.id === idClient);

                    if (!exists && idClient) {
                        clientArray.push({ id: idClient, nom: nomClient });
                        renderClientList(); // On utilise la fonction de rendu
                        $(this).val(''); // Optionnel : réinitialise le select après ajout
                    } else if (idClient) {
                        alert("Ce client est déjà dans la liste.");
                    }
                });

                // Suppression d'un client
                $(document).on('click', '.btn-delete-client', function() {
                    var key = $(this).data('key');
                    // Supprimer l'élément du tableau
                    clientArray.splice(key, 1);
                    // Rafraîchir la liste pour mettre à jour les index data-key
                    renderClientList();
                });

                $(document).on('click','.btn-delete-client-base',function(){
                    var id= $(this).data('id')
                    sweet_alert(callback = function() {
                        $.ajax({
                            type: "DELETE",
                            url: "{{route('client_associe_offre.delete')}}",
                            data: {id_offre_client:id,
                            _token: '{{ csrf_token() }}'
                            },
                            dataType: "JSON",
                            success: function (resp) {
                                notif('success','Succès',resp.msg)
                                recuperationListeClientAssocie($('#id_offre_client_hidden').val())
                            },
                            error:function(xhr){

                            }
                        });
                    })

                })

                $('#ajout-client-associe-btn').on('click',function(){
                        
                        var idOffre = $('#id_offre_client_hidden').val()

                        if(clientArray.length == 0){
                            notif('danger','Erreur','Veuillez selectionner des clients')
                            return false;
                        }
                        $.ajax({
                            type:"POST",
                            url: "{{route('client_associe_offre.store')}}",
                            data:{
                                 tab:clientArray,
                                 id_offre: idOffre,
                                _token:"{{csrf_token()}}"
                            },
                            dataType: "JSON",
                            success: function (resp) {
                                if(resp.succes){
                                    clientArray.length=0
                                    renderClientList()
                                    notif('success','succès',resp.msg)
                                    recuperationListeClientAssocie(idOffre)
                                }
                            }
                        });
                })

                function recuperationListeClientAssocie(id) {

                        $.ajax({
                            type:"GET",
                            url: "{{route('client_associe_offre.get')}}",
                            data:{
                                 id_offre: id
                            },
                            dataType: "JSON",
                            success: function (resp) {
                                if(resp.succes){
                                    var table = $('#client-offre-table').DataTable();
                                    table.clear();

                                    $.each(resp.data,function(key,value){
                                        table.row.add([
                                              value.nom_client,
                                              value.prenom_client,
                                              value.telephone_client,
                                              value.adresse_client,
                                              value.civilite_client,
                                             ` <i class="bi bi-trash3 btn-delete-client-base" 
                                                data-id="${value.id_offre_client}" 
                                                style="color:red; cursor:pointer; font-size: 1.2rem;"></i>`
                                        ])
                                    })

                                    table.draw()
                                }
                            },
                            error:function(xhr){

                            }
                        });
                }
            
        
            // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: FIN ASSOCIATION DE CLIENT A UN PROJET :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

            // Aperçu des images (Conversion du Change Listener)
            $('#image').on('change', function() {
                const $container = $('#imagePreviewContainer');
                $container.empty();

                if (this.files) {
                    $.each(this.files, function(i, file) {
                        const reader = new FileReader();
                        reader.onload = function(event) {
                            const imgWrapper = $('<div></div>').html(`
                        <img src="${event.target.result}" 
                             class="img-fluid rounded border" 
                             style="max-height: 150px; width: 150px; object-fit: cover;">
                    `);
                            $container.append(imgWrapper);
                        };
                        reader.readAsDataURL(file);
                    });
                }
            });

            // Clic sur "Voir détails"
            $(document).on('click', '#voirDetaitOffre', function() {
                const propertyId = $(this).data('id');

                $.ajax({
                    url: '{{ route("propriete.get") }}',
                    data: {
                        id: propertyId
                    },
                    type: 'GET',
                    success: function(response) {
                        const property = response.data[0];

                        // 1. Remplissage des textes simples
                        $('#detailTitle').text(property.titre_propriete);
                        $('#detailMainTitle').text(property.titre_propriete);
                        $('#detailType').text(property.type_propriete);
                        $('#detailLocation').text(property.localisation_propriete);
                        $('#detailDescription').text(property.description_propriete || 'Aucune description disponible.');
                        $('#detailBedrooms').text(property.nombre_chambres);
                        $('#detailBathrooms').text(property.nombre_salles_bain);
                        $('#detailSurface').text(property.surface_propriete + ' m²');
                        $('#detailPrice').text(formatPrice(property.prix_propriete));

                        // 2. Gestion du Carrousel et des Miniatures
                        const $carouselInner = $('#carouselInner');
                        const $thumbnailContainer = $('#thumbnailContainer');

                        $carouselInner.empty();
                        $thumbnailContainer.empty();

                        // On vérifie si image_url existe et est un tableau
                        const images = property.image_url || [];

                        if (images.length > 0) {
                            $.each(images, function(i, url) {
                                // Ajout au Carr ousel
                                const activeClass = i === 0 ? 'active' : '';
                                $carouselInner.append(`
                            <div class="carousel-item ${activeClass}">
                                <img src="${url}" class="d-block w-100 h-100" style="object-fit: cover;">
                            </div>
                        `);

                            // Ajout aux miniatures
                            const $thumb = $(`
                                <img src="${url}" 
                                    class="img-thumbnail cursor-pointer ${i === 0 ? 'border-primary' : ''}" 
                                    style="width: 80px; height: 60px; object-fit: cover; cursor: pointer;" 
                                    data-bs-target="#propertyCarousel" 
                                    data-bs-slide-to="${i}">
                            `);
                            $thumbnailContainer.append($thumb);
                            });
                        } else {
                            // Image par défaut si aucune n'est présente
                            $carouselInner.append('<div class="carousel-item active"><img src="/path/to/default.jpg" class="d-block w-100 h-100" style="object-fit: cover;"></div>');
                        }

                        // 3. Affichage de la modale
                        $('#propertyDetailModal').modal('show');
                    },
                    error: function(xhr) {
                        notif('danger','Erreur',"Une erreur est survenue lors du chargement des détails du bien.")
                    }
                });
            });

            // Petit bonus : Mettre à jour la bordure bleue de la miniature lors du défilement auto du carrousel
            $(document).on('slid.bs.carousel', '#propertyCarousel', function() {
                const activeIndex = $(this).find('.carousel-item.active').index();
                $('#thumbnailContainer img').removeClass('border-primary').addClass('border-light');
                $('#thumbnailContainer img').eq(activeIndex).addClass('border-primary').removeClass('border-light');
            });

            // Événement : Recherche en temps réel (frappe au clavier)
            $('#searchInput').on('keyup', function() {
               // filterProperties();
               filterOffre()
            });

            $(document).on('click','.changeStatut',function(){
                var id_prop = $(this).data('id')
                var value = $(this).data('value')
                var idOffre = $('#idOffreHidden').val()
                $.ajax({
                    type: "GET",
                    url: "{{route('statut.update')}}",
                    data: {
                        id:id_prop,
                        statut:value
                    },
                    dataType: "JSON",
                    success: function (resp) {
                        notif('success','Succès',resp.msg)
                        renderProperties(idOffre)
                    },
                    error:function(xhr){

                    }
                });
            })

            $(document).on('click','.supprimer-propriete',function(){

                var id_prop = $(this).data('id')
                  var idOffre = $('#idOffreHidden').val()
                sweet_alert(callback = function() {
                    $.ajax({
                        type: "DELETE",
                        url: "{{route('propriete.delete')}}",
                        data: {id:id_prop,
                          _token: '{{ csrf_token() }}'
                        },
                        dataType: "JSON",
                        success: function (resp) {
                            notif('success','Succès',resp.msg)
                            renderProperties(idOffre)
                        },
                        error:function(xhr){

                        }
                    });
                })
            })

            function formatPrice(price) {
                return new Intl.NumberFormat('fr-FR').format(price) + ' CFA';
            }

            function renderProperties(id) {
                const start = (currentPage - 1) * itemsPerPage;
                const end = start + itemsPerPage;
                const currentProperties = properties.slice(start, end);

                const $grid = $('#propertiesGrid');
                $grid.empty();

                $.ajax({
                    url: '{{ route("propriete.get") }}',
                    data:{id_offre:id},
                    type: 'GET',
                    success: function(response) {

                        if(response.data.length > 0){
                                $(".Pagination_").css("display","block")
                        }else{
                                $(".Pagination_").css("display","none")    
                        }

                        properties.length = 0;
                        properties.push(...response.data);

                        var stat_dispo = 0;
                        var stat_vendu = 0;
                        var stat_attente = 0;
                        $.each(response.data, function(index, property) {

                                statutcolor = '';
                                libelle = ''
                                if(property.statut == 2){
                                    statutcolor = 'bg-danger';
                                    libelle='Vendu'
                                    stat_vendu++;
                                }else if(property.statut == 3){
                                    statutcolor = 'bg-warning';
                                     libelle='En attente';
                                     stat_attente++;
                                }else{
                                    statutcolor = 'bg-primary';
                                    libelle = 'Disponible';
                                    stat_dispo++;
                                }

                            const col = $('<div></div>')
                                .addClass(`col-md-6 col-lg-4 slide-item-${index}`)
                                .html(`
                                    <div class="card h-100 border-0 shadow-lg property-card">
                                        <div class="position-relative overflow-hidden" style="height: 250px;">
                                            <img src="${property.image_url[0]}" class="card-img-top property-image" alt="${property.titre_propriete}" style="height: 100%; object-fit: cover;">
                                            <span class="badge bg-primary position-absolute top-0 start-0 m-3">${property.type_propriete}</span>
                                            <div class="property-overlay">
                                                <button class="btn btn-light btn-sm" id="voirDetaitOffre" data-id="${property.id_propriete_offre}">Voir détails</button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <span class="badge ${statutcolor} d-flex justify-content-between align-items-start w-25 mb-2">${libelle}
                                                <div class="dropdown ">
                                                            <i class="ri-more-2-fill" role="button" data-bs-toggle="dropdown"  aria-expanded="false"></i>
                                                        <ul class="dropdown-menu">
                                                            <li><a class="dropdown-item dropdown-btn changeStatut" data-id="${property.id_propriete_offre}" data-value="1" href="javascript:void(0);">Disponible</a></li>
                                                            <li><a class="dropdown-item dropdown-btn changeStatut" data-id="${property.id_propriete_offre}" data-value="2" href="javascript:void(0);">Vendu</a></li>
                                                            <li><a class="dropdown-item dropdown-btn changeStatut" data-id="${property.id_propriete_offre}" data-value="3" href="javascript:void(0);">En attente</a></li>
                                                            
                                                        </ul>
                                                    </div>
                                                </span>
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            
                                            <h5 class="card-title fw-bold mb-3">${property.titre_propriete}</h5>
                                            <div class="dropdown">
                                                <button  class="btn btn-sm btn-icon btn-primary-light btn-wave waves-light dropdown-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ri-more-2-fill"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    
                                                    <li><a class="dropdown-item dropdown-btn supprimer-propriete" data-id="${property.id_propriete_offre}" href="javascript:void(0);">Supprimer</a></li>
                                                    
                                                </ul>
                                            </div>

                                            </div>
                                            <div class="d-flex align-items-center text-muted mb-3">
                                                <i class="bi bi-geo-alt-fill me-2"></i>
                                                <small>${property.localisation_propriete}</small>
                                            </div>
                                            <div class="row g-2 mb-3">
                                                <div class="col-4 text-center">
                                                    <i class="bi bi-door-closed text-primary fs-5 mb-1"></i>
                                                    <div class="small">${property.nombre_chambres} ch.</div>
                                                </div>
                                                <div class="col-4 text-center">
                                                    <i class="bi bi-droplet text-primary fs-5 mb-1"></i>
                                                    <div class="small">${property.nombre_salles_bain} sdb</div>
                                                </div>
                                                <div class="col-4 text-center">
                                                    <i class="bi bi-bounding-box text-primary fs-5 mb-1"></i>
                                                    <div class="small">${property.surface_propriete} m²</div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h4 class="text-primary fw-bold mb-0">${formatPrice(property.prix_propriete)}</h4>
                                            </div>
                                        </div>
                                    </div>
                                `);
                            $grid.append(col);

                            $('#stat-disponible').text(stat_dispo)
                            $('#stat-vendu').text(stat_vendu)
                            $('#stat-attente').text(stat_attente)
                            renderPagination();
                        })
                    },
                    error: function(xhr) {
                         notif('danger','Erreur',"Une erreur est survenue lors du chargement des propriétés.")
                    }
                });

            }

            // function renderOffre() {
            //     // const start = (currentPage - 1) * itemsPerPage;
            //     // const end = start + itemsPerPage;
            //     // const currentProperties = properties.slice(start, end);

            //     // const start = (currentPage - 1) * itemsPerPage;
            //     // const end = start + itemsPerPage;
            //     // const currentProperties = OffreArray.slice(start, end);

            //     // const $grid = $('#propertiesGrid');
            //     // $grid.empty();

            //     $.ajax({
            //         url: '{{ route("offre.get") }}',
            //         type: 'GET',
            //         success: function(response) {

            //             OffreArray.length = 0;
            //             OffreArray.push(...response.data);
          
            //              $('#OffreDossierGrid').html("")

            //              if(response.data.length > 0){

            //                  $.each(response.data, function(index, offre) {
     
            //                          if(offre.countItem > 0){
     
            //                                    $('#OffreDossierGrid').append(`
            //                                         <div class="col-xl-2 col-md-6">
            //                                             <div style="background:#F5F5F5" >
            //                                                 <span class="badge bg-danger" style="position: absolute;text-align:right">${offre.countItem}</span>
            //                                                 <div class="dropdown"  style="position: relative;float:right">
            //                                                    <button class="btn btn-sm btn-icon btn-primary-light btn-wave waves-light dropdown-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            //                                                         <i class="ri-more-2-fill"></i>
            //                                                     </button>
                                                                
            //                                                     <ul class="dropdown-menu">
            //                                                         <li><a class="dropdown-item dropdown-btn" data-id="${offre.id_offre}" id="modifier-offre" href="javascript:void(0);">Modifier</a></li>
            //                                                         <li><a class="dropdown-item dropdown-btn" data-id="${offre.id_offre}" id="supprimer-offre" href="javascript:void(0);">Supprimer</a></li>
            //                                                         <li><a class="dropdown-item dropdown-btn" data-id="${offre.id_offre}" id="associe-client-offre" href="javascript:void(0);">Associer client</a></li> 
            //                                                     </ul>
            //                                                 </div>
            //                                                 <div class="d-flex justify-content-center align-items-center ">
            //                                                     <img src="assets/images/doc_offre.png" style="width: 150px;height:100px;cursor:pointer;" id="CallAddOffre" data-titre="${offre.titre_offre}"  data-id="${offre.id_offre}"/>
            //                                                 </div>
            //                                             </div>
            //                                              <p class="text-center"> ${offre.titre_offre}</p>
            //                                         </div>
            //                                    `)
            //                          }else{
            //                                 $('#OffreDossierGrid').append(`
            //                                         <div class="col-xl-2 col-md-6">
            //                                         <div style="background:#F5F5F5" >
            //                                             <span class="badge bg-danger" style="position: absolute;text-align:right">${offre.countItem}</span>
            //                                             <div class="dropdown"  style="position: relative;float:right">
            //                                                 <button class="btn btn-sm btn-icon btn-primary-light btn-wave waves-light dropdown-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            //                                                     <i class="ri-more-2-fill"></i>
            //                                                 </button>
                                                            
            //                                                 <ul class="dropdown-menu">
            //                                                     <li><a class="dropdown-item dropdown-btn" data-id="${offre.id_offre}"  id="modifier-offre" href="javascript:void(0);">Modifier</a></li>
            //                                                     <li><a class="dropdown-item dropdown-btn" data-id="${offre.id_offre}" id="supprimer-offre" href="javascript:void(0);">Supprimer</a></li> 
            //                                                 </ul>
            //                                             </div>
            //                                             <div class="d-flex justify-content-center align-items-center ">
            //                                                 <img src="assets/images/doc_offre_empty.png" style="width: 150px;height:100px;cursor:pointer;" id="CallAddOffre" data-titre="${offre.titre_offre}"  data-id="${offre.id_offre}"/>
            //                                             </div>
            //                                         </div>

            //                                             <p class="text-center"> ${offre.titre_offre}</p>
            //                                         </div>
            //                                 `)
            //                          }
     
            //                      renderPagination();
            //                  })
            //              }else{
            //                 $('#OffreDossierGrid').append(`
            //                     <div style="display:flex;justify-content:center;align-item:center;color:gray">
            //                         <i class="bx bx-file" style="font-size:100px;margin-top:44px"></i>
            //                         </div>
            //                     <p class="text-center" style="color:gray">Aucune données</p>
            //                 `)
            //              }
            //         },
            //         error: function(xhr) {
            //             notif('danger','Erreur',"Une erreur est survenue lors du chargement des propriétés.")
            //         }
            //     });

            // }

            function renderOffre() {
    $.ajax({
        url: '{{ route("offre.get") }}',
        type: 'GET',
        success: function(response) {
            OffreArray.length = 0;
            OffreArray.push(...response.data);
            
            const grid = $('#OffreDossierGrid');
            grid.empty();

            if (response.data.length > 0) {
                $.each(response.data, function(index, offre) {
                    // Choix de l'image selon si le dossier est vide ou non
                    const imageSrc = offre.countItem > 0 ? 'assets/images/doc_offre.png' : 'assets/images/doc_offre_empty.png';
                    
                    // On génère la carte
                    grid.append(`
                        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                            <div class="offre-card h-100 position-relative">
                                ${offre.countItem > 0 ? `<span class="badge bg-emerald-500 text-danger position-absolute top-0 start-0 m-2 shadow-sm">${offre.countItem} éléments</span>` : ''}
                                
                                <div class="dropdown position-absolute top-0 end-0 m-2 z-index-10">
                                    <button class="btn dropdown-btn-custom p-0 border-0" type="button" data-bs-toggle="dropdown">
                                        <i class="ri-more-2-fill text-muted"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-lg border-0">
                                        <li><a class="dropdown-item py-2" data-id="${offre.id_offre}" id="modifier-offre" href="javascript:void(0);"><i class="ri-edit-line me-2"></i>Modifier</a></li>
                                        ${offre.countItem > 0 ? `<li><a class="dropdown-item py-2 text-primary" data-id="${offre.id_offre}" id="associe-client-offre" href="javascript:void(0);"><i class="ri-user-add-line me-2"></i>Associer client</a></li>` : ''}
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item py-2 text-danger" data-id="${offre.id_offre}" id="supprimer-offre" href="javascript:void(0);"><i class="ri-delete-bin-line me-2"></i>Supprimer</a></li>
                                    </ul>
                                </div>

                                <div class="folder-icon-wrapper p-3" id="CallAddOffre" data-titre="${offre.titre_offre}" data-id="${offre.id_offre}" style="cursor:pointer;border-radius: 12px 12px 0 0;">
                                    <img src="${imageSrc}" class="img-fluid" style="max-height: 80px; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));" />
                                </div>

                                <div class="p-3 text-center border-top">
                                    <h6 class="mb-1 text-truncate font-bold text-gray-800" title="${offre.titre_offre}">${offre.titre_offre}</h6>
                                    <p class="text-muted small mb-0">Créé le ${offre.created_at || 'N/A'}</p>
                                </div>
                            </div>
                        </div>
                    `);
                });
                renderPagination();
            } else {
                grid.html(`
                    <div class="col-12 text-center py-5">
                        <div class="mb-3">
                            <i class="ri-folder-info-line text-gray-300" style="font-size: 80px;"></i>
                        </div>
                        <h5 class="text-gray-500">Aucun dossier d'offre disponible</h5>
                        <p class="text-muted">Commencez par créer votre première offre immobilière.</p>
                    </div>
                `);
            }
        },
        error: function(xhr) {
            notif('danger', 'Erreur', "Une erreur est survenue lors du chargement.");
        }
    });
}

            function renderPagination() {
                const totalPages = Math.ceil(properties.length / itemsPerPage);
                const $pagination = $('#pagination');
                $pagination.empty();

                // Précédent
                const $prevLi = $('<li></li>')
                    .addClass(`page-item ${currentPage === 1 ? 'disabled' : ''}`)
                    .html(
                        `<a class="page-link border-0 bg-white shadow-sm" href="#"><i class="bi bi-chevron-left"></i></a>`
                        );

                if (currentPage > 1) {
                    $prevLi.find('a').on('click', function(e) {
                        e.preventDefault();
                        goToPage(currentPage - 1);
                    });
                }
                $pagination.append($prevLi);

                // Pages
                for (let i = 1; i <= totalPages; i++) {
                    const $li = $('<li></li>')
                        .addClass(`page-item ${i === currentPage ? 'active' : ''}`)
                        .html(
                            `<a class="page-link border-0 shadow-sm ${i === currentPage ? 'bg-primary text-white' : 'bg-white text-dark'}" href="#">${i}</a>`
                            );

                    $li.find('a').on('click', function(e) {
                        e.preventDefault();
                        if (i !== currentPage) goToPage(i);
                    });
                    $pagination.append($li);
                }

                // Suivant
                const $nextLi = $('<li></li>')
                    .addClass(`page-item ${currentPage === totalPages ? 'disabled' : ''}`)
                    .html(
                        `<a class="page-link border-0 bg-white shadow-sm" href="#"><i class="bi bi-chevron-right"></i></a>`
                        );

                if (currentPage < totalPages) {
                    $nextLi.find('a').on('click', function(e) {
                        e.preventDefault();
                        goToPage(currentPage + 1);
                    });
                }
                $pagination.append($nextLi);

                $('#paginationInfo').text(
                    `Page ${currentPage} sur ${totalPages} - ${properties.length} propriétés au total`);
            }

            function goToPage(page) {
                currentPage = page;
                renderProperties();
                renderPagination();
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }

            // Fonction de filtrage
            function filterProperties() {
                const searchTerm = $('#searchInput').val().toLowerCase();
                
                // On filtre le tableau original
                const filtered = properties.filter(p => {
                    return p.titre_propriete.toLowerCase().includes(searchTerm) || 
                        p.localisation_propriete.toLowerCase().includes(searchTerm) || 
                        p.type_propriete.toLowerCase().includes(searchTerm);
                });

                // Mise à jour de la pagination et affichage
                currentPage = 1; 
                renderFilteredResults(filtered);
            }

            // Nouvelle fonction de rendu pour les résultats filtrés
            function renderFilteredResults(data) {
                const $grid = $('#propertiesGrid');
                $grid.empty();

                if (data.length === 0) {
                   $grid.html(`
                        <div class="col-12 text-center my-5">
                            <div class="card p-4 mx-auto" style="max-width: 400px; border: none; background-color: #f8f9fa;">
                                <div class="text-center mb-3">
                                    <i class="bi bi-house-door-fill text-muted" style="font-size: 4rem;"></i> 
                                    <i class="bi bi-question-circle-fill text-muted position-absolute" style="font-size: 1.5rem; top: 10px; right: 10px;"></i>
                                </div>
                                <h5 class="text-muted fw-bold mb-3">Oups ! Rien trouvé...</h5>
                                <p class="text-muted">Aucun bien ne correspond à votre recherche. Essayez d'ajuster vos critères.</p>
                            
                            </div>
                        </div>
                    `);
                    $('#pagination').hide();
                    return;
                }

                // Si vous utilisez la pagination, il faudrait réadapter renderProperties
                // Pour simplifier ici, on affiche les résultats trouvés
                $.each(data, function(index, property) {

                                var statutcolor = 'bg-primary';
                                var libelle = 'Disponible'
                                if(property.statut == 2){
                                    statutcolor = 'bg-danger';
                                    libelle='Vendu'
                                }

                                if(property.statut == 3){
                                    statutcolor = 'bg-warning';
                                     libelle='En attente'
                                }
                                        const col = $('<div></div>')
                                    .addClass(`col-md-6 col-lg-4 slide-item-${index}`)
                                    .html(`
                            <div class="card h-100 border-0 shadow-lg property-card">
                                <div class="position-relative overflow-hidden" style="height: 250px;">
                                    <img src="${property.image_url[0]}" class="card-img-top property-image" alt="${property.titre_propriete}" style="height: 100%; object-fit: cover;">
                                    <span class="badge bg-primary position-absolute top-0 start-0 m-3">${property.type_propriete}</span>
                                    <div class="property-overlay">
                                        <button class="btn btn-light btn-sm" id="voirDetaitOffre" data-id="${property.id_propriete_offre}">Voir détails</button>
                                    </div>
                                </div>
                                <div class="card-body">

                                <span class="badge ${statutcolor} d-flex justify-content-between align-items-start w-25 mb-2">${libelle}
                                    <div class="dropdown ">
                                                <i class="ri-more-2-fill" role="button" data-bs-toggle="dropdown"  aria-expanded="false"></i>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item dropdown-btn changeStatut" data-id="${property.id_propriete_offre}" data-value="1" href="javascript:void(0);">Disponible</a></li>
                                                <li><a class="dropdown-item dropdown-btn changeStatut" data-id="${property.id_propriete_offre}" data-value="2" href="javascript:void(0);">Vendu</a></li>
                                                <li><a class="dropdown-item dropdown-btn changeStatut" data-id="${property.id_propriete_offre}" data-value="3" href="javascript:void(0);">En attente</a></li>
                                                
                                            </ul>
                                        </div>
                                    </span>

                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    
                                    <h5 class="card-title fw-bold mb-3">${property.titre_propriete}</h5>
                                    <div class="dropdown">
                                        <button  class="btn btn-sm btn-icon btn-primary-light btn-wave waves-light dropdown-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            
                                            <li><a class="dropdown-item dropdown-btn supprimer-propriete" data-id="${property.id_propriete_offre}" href="javascript:void(0);">Supprimer</a></li>
                                            
                                        </ul>
                                    </div>

                                    </div>
                                    <div class="d-flex align-items-center text-muted mb-3">
                                        <i class="bi bi-geo-alt-fill me-2"></i>
                                        <small>${property.localisation_propriete}</small>
                                    </div>
                                    <div class="row g-2 mb-3">
                                        <div class="col-4 text-center">
                                            <i class="bi bi-door-closed text-primary fs-5 mb-1"></i>
                                            <div class="small">${property.nombre_chambres} ch.</div>
                                        </div>
                                        <div class="col-4 text-center">
                                            <i class="bi bi-droplet text-primary fs-5 mb-1"></i>
                                            <div class="small">${property.nombre_salles_bain} sdb</div>
                                        </div>
                                        <div class="col-4 text-center">
                                            <i class="bi bi-bounding-box text-primary fs-5 mb-1"></i>
                                            <div class="small">${property.surface_propriete} m²</div>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h4 class="text-primary fw-bold mb-0">${formatPrice(property.prix_propriete)}</h4>
                                    </div>
                                </div>
                            </div>
                        `);
                        $grid.append(col);
                });
                
                $('#pagination').show();
            }

            // FONCTION FILTRE POUR LES OFFRES
            function filterOffre() {
                const searchTerm = $('#searchInput').val().toLowerCase();
                
                // On filtre le tableau original
                const filtered = OffreArray.filter(p => {
                    return p.titre_offre.toLowerCase().includes(searchTerm)
                        // p.localisation_propriete.toLowerCase().includes(searchTerm) || 
                        // p.type_propriete.toLowerCase().includes(searchTerm);
                });

                // Mise à jour de la pagination et affichage
                //currentPage = 1; 
                renderFilteredResultsOffre(filtered);
            }

            function renderFilteredResultsOffre(data) {
                const $grid = $('#OffreDossierGrid');
                $grid.empty();

                // Cas : Aucun résultat trouvé
                if (data.length === 0) {
                    $grid.html(`
                        <div class="col-12 text-center my-5 animate__animated animate__fadeIn">
                            <div class="card p-5 mx-auto border-0 shadow-sm" style="max-width: 500px; background: #fdfdfd; border-radius: 30px;">
                                <div class="position-relative mb-4">
                                    <i class="bi bi-search text-gray-200" style="font-size: 5rem;"></i>
                                    <i class="bi bi-exclamation-circle-fill text-emerald-500 position-absolute" style="font-size: 1.5rem; bottom: 0; right: 35%;"></i>
                                </div>
                                <h4 class="fw-bold text-gray-800">Aucun résultat</h4>
                                <p class="text-muted">Nous n'avons trouvé aucune offre correspondant à votre recherche "<strong>${$('#searchInput').val() || ''}</strong>".</p>
                                <button class="btn btn-emerald-soft btn-sm mx-auto" onclick="location.reload()" style="width: fit-content;">Effacer les filtres</button>
                            </div>
                        </div>
                    `);
                    return;
                }

                // Cas : Résultats trouvés
                $.each(data, function(index, offre) {
                    const hasItems = offre.countItem > 0;
                    const imageSrc = hasItems ? 'assets/images/doc_offre.png' : 'assets/images/doc_offre_empty.png';
                    
                    $grid.append(`
                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                                        <div class="offre-card h-100 position-relative">
                                            ${offre.countItem > 0 ? `<span class="badge bg-emerald-500 text-danger position-absolute top-0 start-0 m-2 shadow-sm">${offre.countItem} éléments</span>` : ''}
                                            
                                            <div class="dropdown position-absolute top-0 end-0 m-2 z-index-10">
                                                <button class="btn dropdown-btn-custom p-0 border-0" type="button" data-bs-toggle="dropdown">
                                                    <i class="ri-more-2-fill text-muted"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end shadow-lg border-0">
                                                    <li><a class="dropdown-item py-2" data-id="${offre.id_offre}" id="modifier-offre" href="javascript:void(0);"><i class="ri-edit-line me-2"></i>Modifier</a></li>
                                                    ${offre.countItem > 0 ? `<li><a class="dropdown-item py-2 text-primary" data-id="${offre.id_offre}" id="associe-client-offre" href="javascript:void(0);"><i class="ri-user-add-line me-2"></i>Associer client</a></li>` : ''}
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li><a class="dropdown-item py-2 text-danger" data-id="${offre.id_offre}" id="supprimer-offre" href="javascript:void(0);"><i class="ri-delete-bin-line me-2"></i>Supprimer</a></li>
                                                </ul>
                                            </div>

                                            <div class="folder-icon-wrapper p-3" id="CallAddOffre" data-titre="${offre.titre_offre}" data-id="${offre.id_offre}" style="cursor:pointer;border-radius: 12px 12px 0 0;">
                                                <img src="${imageSrc}" class="img-fluid" style="max-height: 80px; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));" />
                                            </div>

                                            <div class="p-3 text-center border-top">
                                                <h6 class="mb-1 text-truncate font-bold text-gray-800" title="${offre.titre_offre}">${offre.titre_offre}</h6>
                                                <p class="text-muted small mb-0">Créé le ${offre.created_at || 'N/A'}</p>
                                            </div>
                                        </div>
                                    </div>
                    `);
                });
            }

            
     });
    </script>
@endsection