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

@section('content')
<div class="container-fluid">


    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <h1 id="titre-page" class="text-3xl font-bold text-slate-900">
                Gestion de projets
            </h1>
            <p id="sous-titre-page" class="text-slate-600 mtw-1">
                Suivez tous vos projets
            </p>
        </div>

        <div class="ms-md-1 ms-0">
            <nav>
                <div id="btn-projet-block">
                    <button class="btn btn-primary" id="btn-new-projet" data-bs-toggle="modal" data-bs-target="#projetModal">
                        <i class="bi bi-plus-circle btn-icon-size"></i>
                        Nouveau projet
                    </button>
                </div>

                <div id="btn-ilot-block" style="display:none">
                    <button class="btn btn-primary ajouter-ilot" id="btn-new-ilot">
                        <i class="bi bi-plus-circle btn-icon-size"></i>
                        Nouveau ilot
                    </button>
                </div>

                <div id="btn-lot-block" style="display:none">
                    <button class="btn btn-primary ajouter-lot" id="btn-new-lot">
                        <i class="bi bi-plus-circle btn-icon-size"></i>
                        Nouveau lot
                    </button>
                </div>

            </nav>
        </div>
    </div>


    <div class="input-group rounded mb-2" style="max-width: 500px;">
        <span class="input-group-text bg-white border-end-0 rounded-start">
            <i class="bi bi-search text-muted"></i>
        </span>
        <input type="text" id="recherche-input" class="form-control border-start-0 rounded-end" placeholder="Recherche...">
    </div>

    <input type="hidden" id="verif_tab" value="1" />

    <div id="block-projet">
        <h4>Vue d’ensemble des projets</h4>
        <div class="row g-3" id="container-projet">
        </div>
    </div>

    <div id="block-ilot" style="display:none">

        <div class="d-flex" style="margin-bottom:10px">

            <button class="btn btn-primary" id="btn-retour" style="border-radius:50px">
                <i class="bi bi-arrow-left"></i>
            </button>
            <h5 class="ms-2 mt-2"> Vue d'ensemble des projets >> Vue d'ensemble des ilots</h5>
        </div>
        <div class="row g-3" id="container-ilot">

        </div>
    </div>


    <div id="block-lot" style="display:none">
        <div class="d-flex" style="margin-bottom:10px">
            <button class="btn btn-primary" id="btn-retour2" style="border-radius:50px">
                <i class="bi bi-arrow-left"></i>
            </button>
            <h5 class="ms-2 mt-2">Vue d'ensemble des ilots >> Vue d'ensemble des lots</h5>
        </div>
        <div class="row g-3" id="container-lot">
            <!-- Les lots et la pagination s'afficheront ici -->
        </div>
    </div>

    <div id="recherche-container-block" style="display:none">
        <h4>Résultat de recherche</h4>
        <div class="row g-3" id="recherche-container">
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="projetModal" tabindex="-1" aria-labelledby="projetModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="projetModalLabel">Nouveau Projet</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="card custom-card">
                            <div class="card-header">
                                <div class="card-title">Plan du projet</div>
                            </div>
                            <div class="card-body">
                                <form
                                    action="{{ route('projet.upload') }}"
                                    method="POST"
                                   
                                    class="dropzone"
                                    id="dropzonex">
                                    @csrf
                                    <input type="hidden" name="projet_id" id="dz_projet_id">
                                </form>
                            </div>
                        </div>

                    <form id="projet_form">
                        @csrf
                        <input type="hidden" name="id_hidden" id="id_hidden" />
                        <input type="hidden" name="dz_image_path" id="dz_image_path" />
                        <div class="row">
                            <div class="col-xl-4 mb-1">
                                <div class="lib">Nom* :</div>
                                <input type="text" class="form-control" name="nom_projet" id="nom_projet" placeholder="Nom du projet" />
                            </div>

                            <div class="col-xl-4 mb-1">
                                <div class="lib">Superficie* :</div>
                                <input type="text" class="form-control" name="superficie_projet" id="superficie_projet" placeholder="Superficie du projet" />
                            </div>

                            <div class="col-xl-4 mb-1">
                                <div class="lib">Adresse* :</div>
                                <input type="text" class="form-control" name="adresse_projet" id="adresse_projet" placeholder="Adresse du projet" />
                            </div>

                            <div class="col-xl-6 mb-1">
                                <div class="lib">Longitude :</div>
                                <input type="text" class="form-control" name="longitude_projet" id="longitude_projet" placeholder="Longitude du projet" />
                            </div>

                            <div class="col-xl-6 mb-1">
                                <div class="lib">Latitude :</div>
                                <input type="text" class="form-control" name="latitude_projet" id="latitude_projet" placeholder="Latitude du projet" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Prix de revient* :</div>
                                <input type="number" class="form-control" name="prix_revient_projet" id="prix_revient_projet" placeholder="Prix de revient du projet" />
                            </div>

                            <div class="col-xl-12 mb-1" style="display:none" id="statut-block">
                                <div class="lib">Statut* :</div>

                                <select class="form-select" name="statut_projet" id="statut_projet">
                                    <option value="1">En cours</option>
                                    <option value="2">Terminer</option>
                                    <option value="3">Annuler</option>
                                </select>
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Description :</div>
                                <textarea class="form-control" name="description_projet" id="description_projet" placeholder="Description du projet"></textarea>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_projet">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="ilotModal" tabindex="-1" aria-labelledby="ilotModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="ilotModalLabel">Nouveau ilot</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="ilot_form">
                        @csrf
                        <input type="hidden" name="id_hidden_ilot" value="0" id="id_hidden_ilot" />
                        <input type="hidden" name="id_projet_ilot" id="id_projet_ilot" />
                        <div class="row">
                            <div class="col-xl-12 mb-1">
                                <div class="lib">Projet* :</div>
                                <input type="text" class="form-control nom_projet" name="nom_projet_" id="nom_projet_" readonly />
                            </div>
                            <div class="col-xl-12 mb-1">
                                <div class="lib">Numéro ilot* :</div>
                                <input type="text" class="form-control" name="numero_ilot" id="numero_ilot" placeholder="Numero ilot" readonly />
                            </div>
                            <div class="col-xl-12 mb-1">
                                <div class="lib">Description :</div>
                                <textarea class="form-control" name="description_ilot" id="description_ilot" placeholder="Description ilot"></textarea>
                            </div>
                        </div>

                        <div class="col-xl-12 mb-1" id="block-multiple-insertion-ilot">
                            <div class="card card-border mt-2">
                                <div class="card-body">
                                    <div class="row g-2">

                                        <div class="col-xl-4">
                                            <div class="form-check form-switch form-check-reverse">
                                                <input class="form-check-input" type="checkbox" id="checkMultipleILot">
                                                <label class="form-check-label" for="checkMultipleILot">Ajout multiple</label>
                                            </div>
                                        </div>

                                        <div class="col-xl-8">
                                            <input type="number" style="display:none" class="form-control text-center inputMultipleIlot" name="multiple_insertion_ilot" value="0" id="inputMultipleIlot" placeholder="Nombre" />
                                        </div>

                                    </div>
                                    <p class="inputMultipleIlot" style="display:none;font-size:12px;color:#6c757d;margin-top:10px;">
                                        <i class="bi bi-info-circle-fill"></i>
                                        En cochant cette case, vous ajouter plusieurs Ilots avec les mêmes informations en une seule fois en spécifiant le nombre de ilots à créer.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_ilot">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="lotModal" tabindex="-1" aria-labelledby="lotModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="lotModalLabel">Nouveau lot</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form id="lot_form">
                        @csrf
                        <input type="hidden" name="id_hidden_lot" value="0" id="id_hidden_lot" />
                        <input type="hidden" name="id_hidden_ilot_lot" id="id_hidden_ilot_lot" />
                        <div class="row">
                            <div class="col-xl-12 mb-1">
                                <div class="lib">ilot* :</div>
                                <input type="text" class="form-control" name="ilot_lot" id="ilot_lot" readonly />
                            </div>
                            <div class="col-xl-6 mb-1">
                                <div class="lib">Reférence lot* :</div>
                                <input type="text" class="form-control" name="numero_lot" id="numero_lot" placeholder="Numero lot" readonly />
                            </div>
                            <div class="col-xl-6 mb-1">
                                <div class="lib">Numéro lot* :</div>
                                <input type="text" class="form-control" name="num_lot_custom_no_multiple" id="num_lot_custom_no_multiple" placeholder="Numéro lot" />
                            </div>
                            <div class="col-xl-12 mb-1">
                                <div class="lib">Superficie lot :</div>
                                <input type="text" class="form-control" name="superficie_lot" id="superficie_lot" placeholder="Superficie lot" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Prix de vente* :</div>
                                <input type="number" class="form-control" name="prix_vente_lot" id="prix_vente_lot" placeholder="Prix de vente" />
                            </div>

                            <div class="col-xl-6 mb-1">
                                <div class="lib">Longitude lot :</div>
                                <input type="text" class="form-control" name="longitude_lot" id="longitude_lot" placeholder="Longitude lot" />
                            </div>

                            <div class="col-xl-6 mb-1">
                                <div class="lib">Latitude lot :</div>
                                <input type="text" class="form-control" name="latitude_lot" id="latitude_lot" placeholder="Latitude lot" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Description :</div>
                                <textarea class="form-control" name="description_lot" id="description_lot" placeholder="Description lot"></textarea>
                            </div>

                            <div class="col-xl-12 mb-1" id="block-multiple-insertion">
                                <div class="card card-border mt-2">
                                    <div class="card-body">
                                        <div class="row g-2">

                                            <div class="col-xl-4">
                                                <div class="form-check form-switch form-check-reverse">
                                                    <input class="form-check-input" type="checkbox" id="checkMultipleLot">
                                                    <label class="form-check-label" for="checkMultipleLot">Ajout multiple</label>
                                                </div>
                                            </div>

                                            <div class="col-xl-5">
                                                <input type="number" style="display:none" class="form-control text-center inputMultiple" name="multiple_insertion" value="0" id="inputMultiple" placeholder="Nombre" />
                                            </div>
                                            <div class="col-xl-3">
                                                <input type="number" style="display:none" class="form-control text-center inputMultiple" name="multiple_insertion_numero_lot" value="0" id="inputMultipleNumerolot" placeholder="Nombre" />
                                            </div>
                                        </div>
                                        <p class="inputMultiple" style="display:none;font-size:12px;color:#6c757d;margin-top:10px;">
                                            <i class="bi bi-info-circle-fill"></i>
                                            En cochant cette case, vous ajouter plusieurs lots avec les mêmes informations en une seule fois en spécifiant le nombre de lots à créer.
                                        </p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_lot">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('script')

<script>
    $(document).ready(function() {

        recuperation_projet();
        $('#save_projet').on('click', function() {
            $('#projet_form').submit();
        })
        $('#projet_form').on('submit', function(e) {
            $('#recherche-input').val("").trigger('change')
            e.preventDefault()
            $.ajax({
                type: "POST",
                url: "{{ route('projet.store') }}",
                data: new FormData(this),
                dataType: "JSON",
                beforeSend: function() {

                    if($('#dz_image_path').val().length == 0){
                        notify_error('Veuillez ajouter une image pour le projet')
                        return false
                    }
                    if ($('#nom_projet').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#nom_projet').focus()
                        return false
                    }

                    if ($('#superficie_projet').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#superficie_projet').focus()
                        return false
                    }

                    if ($('#adresse_projet').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#adresse_projet').focus()
                        return false
                    }

                    if ($('#prix_revient_projet').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#prix_revient_projet').focus()
                        return false
                    }
                },
                contentType: false,
                processData: false,
                success: function(resp) {
                    notif('success', 'Succès', resp.msg)
                    recuperation_projet()
                    $('#projetModal').modal('hide')
                    $('#projet_form')[0].reset();
                }
            });
        })

        $(document).on('click', '#modifie-projet', function() {
            $id = $(this).data('id')
            $('#statut-block').css('display', 'block')
            $.ajax({
                type: "GET",
                url: "{{ route('projet.get') }}",
                data: {
                    id: $id
                },
                dataType: "JSON",
                success: function(resp) {

                    //projetDropzone.removeAllFiles(true); 
                    if(resp.data[0].url_image_projet != null){
                        var mockFile = { name: "Plan du projet", size: 12345 }; // Taille fictive
                        projetDropzone.emit("addedfile", mockFile);
                        projetDropzone.emit("thumbnail", mockFile, resp.data[0].url_image_projet);
                        projetDropzone.emit("complete", mockFile);
                        $('#dz_image_path').val(resp.data[0].url_image_projet)
                    }
                    $('#nom_projet').val(resp.data[0].nom_projet)
                    $('#superficie_projet').val(resp.data[0].superficie)
                    $('#adresse_projet').val(resp.data[0].adresse_projet)
                    $('#latitude_projet').val(resp.data[0].latitude_projet)
                    $('#longitude_projet').val(resp.data[0].longitude_projet)
                    $('#prix_revient_projet').val(resp.data[0].prix_revient_projet)
                    $('#statut_projet').val(resp.data[0].statut_projet)
                    $('#id_hidden').val(resp.data[0].id_projet)
                    $('#description_projet').val(resp.data[0].description_projet)
                    $('#projetModal').modal('show')
                }
            });
        })

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

            var id = $(this).data('id')
            sweet_alert(callback = function() {
                useAjaxPromise('DELETE', "{{ route('projet.delete') }}", {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    })
                    .then(resp => {
                        notif('success', 'Succès', resp.msg);
                        recuperation_projet()
                    })
                    .catch(err => {
                        console.error("Erreur :", err);
                    });
            })
        })

        $(document).on('click', '.ajouter-ilot', function() {
            var id = $(this).data('id')
            var nom_projet = $(this).data('nom')
            $('#id_projet_ilot').val(id)
            $.ajax({
                type: "GET",
                url: "{{ route('numero_ilot.get') }}",
                dataType: "JSON",
                success: function(resp) {
                    $('#numero_ilot').val(resp.data)
                    $('#nom_projet_').val(nom_projet)
                    $('#ilotModal').modal('show')
                },
                error: function(error) {
                    //error
                }
            });
        })

        $('#ilot_form').on('submit', function(e) {
            $('#recherche-input').val("").trigger('change')
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "{{ route('ilot.store') }}",
                data: new FormData(this),
                dataType: "JSON",
                contentType: false,
                processData: false,
                success: function(resp) {
                    notif('success', 'Succès', resp.msg)

                    $('#ilotModal').modal('hide')
                    ilot_content($('#id_projet_ilot').val())
                },
                error: function(error) {
                    //error
                }
            });
        })

        $('#save_ilot').on('click', function() {
            $('#ilot_form').submit();
        })

        $('#btn-new-projet').on('click', function() {
            $('#statut-block').css('display', 'none')
            $('#projet_form')[0].reset()
        })

        $(document).on('click', '#card-projet', function() {
            $('#recherche-input').val("").trigger('change')
            var id_projet = $(this).data('idprojet')
            var nom_projet = $(this).data('nom_projet')
            $('#btn-new-ilot').attr('data-nom', nom_projet);
            $('#btn-new-ilot').attr('data-id', id_projet);
            $('#verif_tab').val(2)
            ilot_content(id_projet)
        })

        $('#btn-new-ilot').on('click',function(){
            $('#block-multiple-insertion-ilot').css('display','block')
        })

        $('#btn-retour').on('click', function() {

            $('#block-projet').css('display', 'block')
            $('#btn-projet-block').css('display', 'block')

            $('#block-ilot').css('display', 'none')
            $('#btn-ilot-block').css('display', 'none')

            $('#titre-page').text('Gestion de projets')
            $('#sous-titre-page').text('Suivez tous vos projets')
            $('#verif_tab').val(1)
        })

        $(document).on('click', '#modifie-ilot', function() {
            var id = $(this).data('id')
            $.ajax({
                type: "GET",
                url: "{{ route('ilot.get') }}",
                data: {
                    id: id
                },
                dataType: "JSON",
                success: function(resp) {

                    $('#id_hidden_ilot').val(resp.data[0].id_ilot)
                    $('#nom_projet_').val(resp.data[0].nom_projet)
                    $('#numero_ilot').val(resp.data[0].numero_ilot)
                    $('#description_ilot').val(resp.data[0].description_ilot)

                    $('#block-multiple-insertion-ilot').css('display','none')
                    $('#ilotModal').modal('show')
                },
                error: function(error) {
                    //error
                }
            });
        })

        $(document).on('click', '#supprimer-ilot', function() {
            var id = $(this).data('id')
            var id_projet = $(this).data('idprojet')

            sweet_alert(callback = function() {
                useAjaxPromise('DELETE', "{{ route('ilot.delete') }}", {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    })
                    .then(resp => {
                        notif('success', 'Succès', resp.msg);
                        ilot_content(id_projet)
                    })
                    .catch(err => {
                        console.error("Erreur :", err);
                    });
            })
        })

        $('#recherche-input').on('change', function() {
            var val = $(this).val();
            if (val == "") {

                if ($('#verif_tab').val() == 1) {
                    $('#block-projet').css('display', 'block')
                    $('#recherche-container-block').css('display', 'none')
                    return false
                }
                if ($('#verif_tab').val() == 2) {
                    $('#block-ilot').css('display', 'block')
                    $('#recherche-container-block').css('display', 'none')
                    return false
                }

                if ($('#verif_tab').val() == 3) {
                    $('#block-lot').css('display', 'block')
                    $('#recherche-container-block').css('display', 'none')
                    return false
                }
            }
            $.ajax({
                type: "GET",
                url: "{{ route('global_projet.search') }}",
                data: {
                    searchItem: $(this).val()
                },
                dataType: "JSON",
                success: function(resp) {

                    $('#block-projet').css('display', 'none')
                    $('#block-ilot').css('display', 'none')
                    $('#block-lot').css('display', 'none')

                    $('#recherche-container').html('')

                    $.each(resp.projet, function(key, value) {

                        var statut = '';
                        if (value.statut_projet == 1) {
                            statut = '<span class="badge bg-success" style="height:18px;margin-left:15px;">Disponible</span>'
                        } else if (value.statut_projet == 2) {
                            statut = '<span class="badge bg-warning" style="height:18px;margin-left:15px;">Terminé</span>'
                        } else {
                            statut = '<span class="badge bg-danger" style="height:18px;margin-left:15px;">Annulé</span>'
                        }

                        $('#recherche-container').append(`
                            <div class="col-md-4">
                                <div class="card card-border" id="card-projet" data-nom_projet="${value.nom_projet}" data-idprojet="${value.id_projet}">
                                    <div class="card-body">

                                        <div class="row">
                                            <div class="col-xl-8">
                                                <div class="d-flex" style="width:100%;">
                                                    <h6 class="fw-bold">${value.nom_projet}</h6>
                                                    ${statut}
                                                </div>
                                            </div>
                                            <div class="col-xl-4 text-end">

                                                    <div class="dropdown">
                                                        <button class="btn btn-sm btn-icon btn-primary-light btn-wave waves-light" 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" data-id="${value.id_projet}" id="modifie-projet" href="javascript:void(0);">Modifier</a></li>
                                                            <li><a class="dropdown-item" data-id="${value.id_projet}" id="supprimer-projet" href="javascript:void(0);">Supprimer</a></li>
                                                                <li><a class="dropdown-item ajouter-ilot" data-id="${value.id_projet}" data-nom="${value.nom_projet}"  id="ajouter-ilot" href="javascript:void(0);">Ajouter un ilot</a></li>
                                                        </ul>
                                                    </div>

                                            </div>
                                        </div>
                                        <p class="mb-2 text-muted">Total ilots : ${value.nbreIlot} / ${value.nbreIlot}</p>

                                        <div class="progress rounded-pill mb-2" style="height: 6px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width:${value.nbreIlot/100}%;"></div>
                                        </div>

                                       
                                    </div>
                                </div>
                            </div>
                        `)
                    })


                    $.each(resp.ilot, function(key, value) {

                        $('#recherche-container').append(`
                            <div class="col-md-4">
                                <div class="card card-border" id="card-ilot" data-idprojet="${value.id_ilot}">
                                    <div class="card-body">

                                        <div class="row">
                                            <div class="col-xl-8">
                                                <div class="d-flex" style="width:100%;">
                                                    <h6 class="fw-bold">${value.numero_ilot}</h6>
                                                    le 20-10-2025
                                                </div>
                                            </div>
                                            <div class="col-xl-4 text-end">

                                                   <div class="dropdown">
                                                        <button class="btn btn-sm btn-icon btn-primary-light btn-wave waves-light" 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" data-id="${value.id_ilot}" id="modifie-ilot" href="javascript:void(0);">Modifier</a></li>
                                                            <li><a class="dropdown-item" data-id="${value.id_ilot}" data-idprojet="${value.id_projet}" id="supprimer-ilot" href="javascript:void(0);">Supprimer</a></li>

                                                        </ul>
                                                    </div>

                                            </div>
                                        </div>
                                             <p class="mb-2 text-muted">Description : ${value.description_ilot}</p>
                                    </div>
                                </div>
                            </div>
                        `)
                    })

                    // $.each(resp.lot,function(key,value){

                    // })
                }
            });

            $('#recherche-container-block').css('display', 'block')
        })

        // ::::::::::::::::::::::::::::::::: ajout de lot ::::::::::::::::::::::::::::

        $(document).on('click', '#ajout-lot', function() {

            var numIlot = $(this).data('num_ilot')
            var IdIlot = $(this).data('id')

            $.ajax({
                type: "GET",
                url: "{{ route('numero_lot.get') }}",
                dataType: "JSON",
                success: function(resp) {

                    $('#ilot_lot').val(numIlot)
                    $('#numero_lot').val(resp.data)
                    $('#id_hidden_ilot_lot').val(IdIlot)
                    $('#lotModal').modal('show')
                },
                error: function(error) {
                    //error
                }
            });

        })

        $('#save_lot').on('click', function() {
            $('#lot_form').submit()
        })

        $('#lot_form').on('submit', function(e) {

            e.preventDefault();

            $.ajax({
                type: "POST",
                url: "{{ route('lot.store') }}",
                data: new FormData(this),
                dataType: "JSON",
                contentType: false,
                processData: false,
                beforeSend: function() {



                    if ($('#checkMultipleLot').is(':checked') == false) {
                        if ($('#num_lot_custom_no_multiple').val().length == 0) {
                            notify_error('Champ obligatoire')
                            $('#num_lot_custom_no_multiple').focus()
                            return false
                        }

                    }

                    if ($('#prix_vente_lot').val().length == 0) {
                        notify_error('Champ obligatoire')
                        $('#prix_vente_lot').focus()
                        return false
                    }

                },
                success: function(resp) {

                    notif('success', 'Succès', resp.msg)
                    recuperation_lot($('#id_hidden_ilot_lot').val())
                    $('#lotModal').modal('hide')
                },
                error: function(error) {
                    //error
                }
            });
        })

        $(document).on('click', '#card-ilot', function(e) {
            e.preventDefault();
            $('#titre-page').text('Gestion des lots')
            $('#sous-titre-page').text('Suivez tous vos lots')
            $('#block-ilot').css('display', 'none')
            $('#block-lot').css('display', 'block')

            $('#btn-ilot-block').css('display', 'none')
            $('#btn-lot-block').css('display', 'block')

            var id_ilot = $(this).data('idlot')
            var num_ilot = $(this).data('num_ilot')
            recuperation_lot(id_ilot)
            $('#verif_tab').val(3)
            $('#id_hidden_ilot_lot').val(id_ilot)
            $('#ilot_lot').val(num_ilot)
        })

        $('#btn-retour2').on('click', function() {

            $('#block-ilot').css('display', 'block')
            $('#block-lot').css('display', 'none')

            $('#btn-ilot-block').css('display', 'block')
            $('#btn-lot-block').css('display', 'none')

            $('#titre-page').text('Gestion de ilot')
            $('#sous-titre-page').text('Suivez tous vos ilots')
            $('#verif_tab').val(2)
        })

        $(document).on('click', '#modifie-lot', function() {

            var id = $(this).data('id')
            $.ajax({
                type: "GET",
                url: "{{ route('lot.get') }}",
                data: {
                    idlot: id
                },
                dataType: "JSON",
                success: function(resp) {
                    // activerOptions()
                    $('#ilot_lot').val(resp.data[0].num_ilot)
                    $('#id_hidden_lot').val(resp.data[0].id_lot)
                    $('#numero_lot').val(resp.data[0].numero_lot)
                    $('#superficie_lot').val(resp.data[0].superficie)
                    $('#latitude_lot').val(resp.data[0].latitude_lot)
                    $('#longitude_lot').val(resp.data[0].longitude_lot)
                    $('#prix_vente_lot').val(resp.data[0].prix_vente_lot)
                    $('#statut_lot').val(resp.data[0].statut_lot).trigger('change')
                    $('#description_lot').val(resp.data[0].description_lot)
                    $('#num_lot_custom_no_multiple').val(resp.data[0].numero_lot_custom)

                    $('#block-multiple-insertion').css('display', 'none')
                    $('#lotModal').modal('show')
                },
                error: function(error) {
                    //error
                }
            });

        })

        $(document).on('click', '#supprimer-lot', function() {
            var id = $(this).data('id')
            var id_ilot = $(this).data('ilot')
            sweet_alert(callback = function() {
                useAjaxPromise('DELETE', "{{ route('lot.delete') }}", {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    })
                    .then(resp => {
                        notif('success', 'Succès', resp.msg);
                        recuperation_lot(id_ilot)
                    })
                    .catch(err => {
                        console.error("Erreur :", err);
                    });
            })
        })

        $('#btn-new-lot').on('click', function() {
            $('#block-multiple-insertion').css('display', 'block')
            $.ajax({
                type: "GET",
                url: "{{ route('numero_lot.get') }}",
                dataType: "JSON",
                success: function(resp) {
                    $('#numero_lot').val(resp.data)
                    $('#lotModal').modal('show')
                },
                error: function(error) {
                    //error
                }
            });

        })

        $(document).on('click', '.dropdown-btn', function(e) {
            e.stopPropagation();
        });

        $('#checkMultipleLot').on('change', function() {
            if ($(this).is(':checked')) {
                // Si la case est cochée, afficher le champ nombre
                $('.inputMultiple').css('display', 'block');
            } else {
                // Si la case n'est pas cochée, masquer le champ nombre
                $('.inputMultiple').css('display', 'none');
            }
        });

        $('#checkMultipleILot').on('change', function() {
            if ($(this).is(':checked')) {
                // Si la case est cochée, afficher le champ nombre
                $('.inputMultipleIlot').css('display', 'block');
            } else {
                // Si la case n'est pas cochée, masquer le champ nombre
                $('.inputMultipleIlot').css('display', 'none');
            }
        });

    })


    function ilot_content(id, page = 1) {
        const ilotsPerPage = 9;

        $.ajax({
            type: "GET",
            url: "{{ route('ilot.get') }}",
            data: {
                id_projet: id,
                page: page,
                per_page: ilotsPerPage
            },
            dataType: "JSON",
            success: function(resp) {
                if (!resp.succes) {
                    console.error('Erreur:', resp.message);
                    return;
                }

                $('#block-projet').css('display', 'none')
                $('#btn-projet-block').css('display', 'none')

                $('#block-ilot').css('display', 'block')
                $('#btn-ilot-block').css('display', 'block')

                $('#titre-page').text('Gestion des ilots')
                $('#sous-titre-page').text('Suivez tous vos ilots')

                $('#container-ilot').html('')

                if (resp.data.length === 0) {
                    $('#container-ilot').append(`
                    <div class="col-12 text-center">
                        <p class="text-muted">Aucun îlot disponible</p>
                    </div>
                `);
                    return;
                }

                $.each(resp.data, function(key, value) {
                    var statut = '';
                    if (value.statut_ilot == 1) {
                        statut = ' <span class="badge bg-success" style="height:18px;margin-left:15px;">En cours..</span>'
                    } else if (value.statut_ilot == 2) {
                        statut = ' <span class="badge bg-warning" style="height:18px;margin-left:15px;">Terminé</span>'
                    } else {
                        statut = ' <span class="badge bg-danger" style="height:18px;margin-left:15px;">Annulé</span>'
                    }
                    $('#container-ilot').append(`
                    <div class="col-md-4">
                        <div class="card card-border" id="card-ilot" data-num_ilot="${value.numero_ilot}" data-idlot="${value.id_ilot}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-xl-8">
                                        <div class="d-flex" style="width:100%;">
                                            <h6 class="fw-bold">${value.numero_ilot}</h6>
                                           
                                        </div>
                                    </div>
                                    <div class="col-xl-4 text-end">
                                        <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" data-id="${value.id_ilot}" id="modifie-ilot" href="javascript:void(0);">Modifier</a></li>
                                                <li><a class="dropdown-item dropdown-btn" data-id="${value.id_ilot}" data-idprojet="${value.id_projet}" id="supprimer-ilot" href="javascript:void(0);">Supprimer</a></li>
                                                <li><a class="dropdown-item dropdown-btn" data-id="${value.id_ilot}" data-num_ilot="${value.numero_ilot}" id="ajout-lot" href="javascript:void(0);">Ajouter lot</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                              
                                <div class="mt-2">
                                      <span class="badge bg-info">${value.nbreIlot} lot(s)</span>
                                </div>

                                <p class="mb-2 text-muted mt-2" style="font-size:12px;">${value.description_ilot ? value.description_ilot : ''}</p>
                               
                            </div>
                        </div>
                    </div>
                `)
                })

                // Générer la pagination
                genererPaginationIlot(resp.total, resp.current_page, resp.last_page, id);
            },
            error: function(error) {
                console.error('Erreur:', error);
                $('#container-ilot').html(`
                <div class="col-12 text-center">
                    <p class="text-danger">Une erreur est survenue lors du chargement des îlots</p>
                </div>
            `);
            }
        });
    }

    function genererPaginationIlot(total, currentPage, lastPage, idProjet) {
        let paginationHtml = `
            <div class="col-12">
                <nav aria-label="Pagination des îlots">
                    <ul class="pagination justify-content-center">
        `;

        // Bouton Précédent
        if (currentPage > 1) {
            paginationHtml += `
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" onclick="ilot_content(${idProjet}, ${currentPage - 1})">
                    <i class="bi bi-chevron-left"></i> Précédent
                </a>
            </li>
        `;
        }

        // Numéros de page
        let startPage = Math.max(1, currentPage - 2);
        let endPage = Math.min(lastPage, currentPage + 2);

        if (startPage > 1) {
            paginationHtml += `
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" onclick="ilot_content(${idProjet}, 1)">1</a>
            </li>
        `;
            if (startPage > 2) {
                paginationHtml += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
        }

        for (let i = startPage; i <= endPage; i++) {
            paginationHtml += `
            <li class="page-item ${i === currentPage ? 'active' : ''}">
                <a class="page-link" href="javascript:void(0);" onclick="ilot_content(${idProjet}, ${i})">${i}</a>
            </li>
        `;
        }

        if (endPage < lastPage) {
            if (endPage < lastPage - 1) {
                paginationHtml += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
            paginationHtml += `
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" onclick="ilot_content(${idProjet}, ${lastPage})">${lastPage}</a>
            </li>
        `;
        }

        // Bouton Suivant
        if (currentPage < lastPage) {
            paginationHtml += `
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" onclick="ilot_content(${idProjet}, ${currentPage + 1})">
                    Suivant <i class="bi bi-chevron-right"></i>
                </a>
            </li>
        `;
        }

        paginationHtml += `
                </ul>
            </nav>
            <p class="text-center text-muted">
                Page ${currentPage} sur ${lastPage} (${total} îlots au total)
            </p>
        </div>
    `;

        $('#container-ilot').append(paginationHtml);
    }

    function recuperation_projet($id) {

        $.ajax({
            type: "GET",
            url: "{{ route('projet.get') }}",
            data: {
                id: $id
            },
            dataType: "json",
            success: function(resp) {

                $('#container-projet').html('')

                $.each(resp.data, function(key, value) {

                    var statut = '';
                    if (value.statut_projet == 1) {
                        statut = ' <span class="badge bg-success" style="height:18px;margin-left:15px;">En cours..</span>'
                    } else if (value.statut_projet == 2) {
                        statut = ' <span class="badge bg-warning" style="height:18px;margin-left:15px;">Terminé</span>'
                    } else {
                        statut = ' <span class="badge bg-danger" style="height:18px;margin-left:15px;">Annulé</span>'
                    }
                    $('#container-projet').append(`

                            <div class="col-md-4">
                                <div class="card card-border" id="card-projet" data-nom_projet="${value.nom_projet}" data-idprojet="${value.id_projet}">
                                    <div class="card-body">

                                        <div class="row">
                                            <div class="col-xl-8">
                                                <div class="d-flex" style="width:100%;">
                                                    <h6 class="fw-bold">${value.nom_projet}</h6>
                                                    ${statut} 
                                                </div>
                                            </div>
                                            <div class="col-xl-4 text-end">

                                                   <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" data-id="${value.id_projet}" id="modifie-projet" href="javascript:void(0);">Modifier</a></li>
                                                            <li><a class="dropdown-item dropdown-btn" data-id="${value.id_projet}" id="supprimer-projet" href="javascript:void(0);">Supprimer</a></li>
                                                             <li><a class="dropdown-item dropdown-btn ajouter-ilot" data-id="${value.id_projet}" data-nom="${value.nom_projet}"  id="ajouter-ilot" href="javascript:void(0);">Ajouter un ilot</a></li>
                                                        </ul>
                                                    </div>
                                            </div>
                                        </div>
                                      
                                            <div class="mt-2">
                                                <span class="badge bg-info">${value.nbreIlot}  ilot(s)</span>
                                            </div>

                                    </div>
                                </div>
                            </div>

                        `)
                })
            },
            error: function(error) {
                //error
            }
        });
    }


    function recuperation_lot($id, page = 1) {
        const lotsPerPage = 9; // Nombre de lots par page

        $.ajax({
            type: "GET",
            url: "{{ route('lot.get') }}",
            data: {
                id: $id,
                page: page,
                per_page: lotsPerPage
            },
            dataType: "JSON",
            success: function(resp) {
                $('#container-lot').html('');

                // Afficher les lots
                $.each(resp.data, function(key, value) {
                    var statut = '';
                    if (value.statut_lot == 1) {
                        statut = ' <span class="badge bg-success" style="height:18px;margin-left:15px;">Disponible</span>';
                    } else {
                        statut = ' <span class="badge bg-danger" style="height:18px;margin-left:15px;">Non disponible</span>';
                    }

                    $('#container-lot').append(`
                    <div class="col-md-4">
                        <div class="card card-border">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-xl-8">
                                        <div class="d-flex" style="width:100%;">
                                            <h6 class="fw-bold">${value.numero_lot}</h6>
                                            ${statut}
                                        </div>
                                    </div>
                                    <div class="col-xl-4 text-end">
                                        <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" data-id="${value.id_lot}" id="modifie-lot" href="javascript:void(0);">Modifier</a></li>
                                                <li><a class="dropdown-item dropdown-btn" data-ilot="${value.id_ilot}" data-id="${value.id_lot}" id="supprimer-lot" href="javascript:void(0);">Supprimer</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2 d-flex gap-2">
                                    <div style="width:20px;height:20px;border-radius:10px;padding:4px;background:#6FD9B4" class="d-flex justify-content-center align-items-center">${value.numero_lot_custom}</div>
                                    <div>${value.superficie ? value.superficie+ ' m²' : ''} - </div>
                                    <div class="ms-1">PV : ${formatNumber(value.prix_vente_lot)} </div>
                                </div>
                                <small class="text-muted">${value.description_lot ? value.description_lot : ''}</small>
                            </div>
                        </div>
                    </div>
                `);
                });

                // Générer la pagination
                genererPaginationLot(resp.total, resp.current_page, resp.last_page, $id);
            }
        });
    }

    function genererPaginationLot(total, currentPage, lastPage, idIlot) {
        let paginationHtml = `
            <div class="col-12 mt-4">
                <nav aria-label="Pagination des lots">
                    <ul class="pagination justify-content-center mb-3">
        `;

        // Bouton Précédent
        if (currentPage > 1) {
            paginationHtml += `
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" onclick="recuperation_lot(${idIlot}, ${currentPage - 1})">
                    <i class="bi bi-chevron-left"></i> Précédent
                </a>
            </li>
        `;
        } else {
            paginationHtml += `
            <li class="page-item disabled">
                <span class="page-link">
                    <i class="bi bi-chevron-left"></i> Précédent
                </span>
            </li>
        `;
        }

        // Numéros de page
        let startPage = Math.max(1, currentPage - 2);
        let endPage = Math.min(lastPage, currentPage + 2);

        if (startPage > 1) {
            paginationHtml += `
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" onclick="recuperation_lot(${idIlot}, 1)">1</a>
            </li>
        `;
            if (startPage > 2) {
                paginationHtml += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
        }

        for (let i = startPage; i <= endPage; i++) {
            paginationHtml += `
            <li class="page-item ${i === currentPage ? 'active' : ''}">
                <a class="page-link" href="javascript:void(0);" onclick="recuperation_lot(${idIlot}, ${i})">${i}</a>
            </li>
        `;
        }

        if (endPage < lastPage) {
            if (endPage < lastPage - 1) {
                paginationHtml += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
            paginationHtml += `
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" onclick="recuperation_lot(${idIlot}, ${lastPage})">${lastPage}</a>
            </li>
        `;
        }

        // Bouton Suivant
        if (currentPage < lastPage) {
            paginationHtml += `
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" onclick="recuperation_lot(${idIlot}, ${currentPage + 1})">
                    Suivant <i class="bi bi-chevron-right"></i>
                </a>
            </li>
        `;
        } else {
            paginationHtml += `
            <li class="page-item disabled">
                <span class="page-link">
                    Suivant <i class="bi bi-chevron-right"></i>
                </span>
            </li>
        `;
        }

        paginationHtml += `
                </ul>
            </nav>
            <div class="text-center">
                <p class="text-muted mb-0">
                    Page ${currentPage} sur ${lastPage} (${total} lots au total)
                </p>
            </div>
        </div>
    `;

        $('#container-lot').append(paginationHtml);
    }


    function activerOptions() {
        const select = document.getElementById('statut_lot');
        for (let i = 1; i < select.options.length; i++) {
            select.options[i].disabled = false;
        }
    }
</script>


<script>
 let projetDropzone;



    projetDropzone = new Dropzone("#dropzonex", {
        url: "{{ route('projet.upload') }}",
        paramName: "image",
        maxFiles: 1,
        maxFilesize: 15, // MB
        acceptedFiles: "image/*",
        addRemoveLinks: true,
        dictDefaultMessage: "Glissez l'image ici ou cliquez",
        headers: {
            'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
        },

        init: function () {

            this.on("sending", function (file, xhr, formData) {
                formData.append(
                    "projet_id",
                    document.getElementById('id_hidden').value
                );
            });

            this.on("success", function (file, response) {
                console.log("Image uploadée :", response);
                // document.getElementById('id_hidden').value = response.projet_id ?? '';
                 file.upload.filename = response.path;
                 $('#dz_image_path').val(response.path);
             
            });

         

            this.on("removedfile", function (file) {

                if (!file.upload || !file.upload.filename) return;

                fetch("{{ route('projet.deleteImage') }}", {
                    method: "DELETE",
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('input[name=_token]').value,
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        path: file.upload.filename
                    })
                })
                .then(res => res.json())
                .then(data => {
                    console.log("Image supprimée", data);
                })
                .catch(err => {
                    console.error("Erreur suppression image", err);
                });
            });


            this.on("maxfilesexceeded", function (file) {
                this.removeAllFiles();
                this.addFile(file);
            });
        }
    });


</script>


@endsection