@extends('model')

@section('content')
    <!-- Start::page-header -->
    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0);">
                            Produit
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Offre spéciale</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-text bg-white border"> <i class="ri-calendar-line"></i> </div>
                    <input type="text" class="form-control breadcrumb-input flatpickr-input" id="filtrePeriode"
                        placeholder="Rechercher par plage de dates">
                </div>
                <!-- filtrePeriode -->
            </div>
            <div class="btn-list">
                <button class="btn btn-white btn-wave" id="btnFiltreMenu">
                    <i class="ri-filter-3-line align-middle me-1 lh-1"></i> Filter
                </button>
                <button class="btn btn-primary btn-wave me-0" id="btnModalOffreSpeciale">
                    <i class="bx bx-plus-circle me-1"></i> Nouvelle Offre
                </button>
            </div>
        </div>
    </div>
    <!-- End::page-header -->


    <!-- Start::row-2 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card overflow-hidden">
                <div class="card-body p-2 px-3">
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap w-100" id="tableListeOffreSpeciale">
                            <thead>
                                <tr>
                                    <th data-column="action" class="text-center">Actions</th>
                                    <th data-column="libelle" data-class="text-start text-uppercase" class="text-center">
                                        Titre</th>
                                    <th data-column="periodeOffreSpeciale" class="text-start">Période</th>
                                    <th data-column="nbreLigneFormat" class="text-center" title="Nombre de ligne">Nbre l.
                                    </th>
                                    <th data-column="montantFormat" class="text-end">Montant</th>
                                    <th data-column="montant_initialFormat" class="text-end">Montant initial</th>
                                    <th data-column="creeLeFormat" class="text-center">Créé le</th>
                                    <th data-column="creePar" data-class="text-start" class="text-center">Créé par</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End::row-2 -->

    {{-- - Section des modals - --}}
    <!-- Modal Offre spéciale -->
    <div id="modalOffreSpeciale" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary-light">
                    <i class='bx bx-gift fs-22 iconeHeader me-2'></i>
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close bg-light text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body iconFond">
                    <i class='bx bx-gift iconFondBody'></i>
                    <form id="formOffreSpeciale" class="mb-2">
                        <input type="number" name="idoffre_speciale" value="0" style="display : none;">
                        <div class="card py-0 border">
                            <div class="card-body">
                                <div class="d-flex justify-content-center w-100 align-items-center">
                                    <!-- Le champ de sélection d'images caché -->
                                    <input type="file" id="image-principale-input" accept=".jpg, .jpeg, .png"
                                        style="display: none;" />
                                    <div id="image-principale-container"
                                        class="rounded h-100 w-100 d-flex justify-content-center align-items-center position-relative mb-3"
                                        style="border: 1px dashed;">

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <p class="text-muted mb-0">Titre</p>
                                        <input type="text" class="form-control text-uppercase" id="inplibelle"
                                            name="libelle">
                                    </div>
                                    <div class="col-md-4">
                                        <p class="text-muted mb-0 ellipsis" title="Période de l'offre">Période de l'offre
                                        </p>
                                        <input type="text"
                                            class="form-control text-center breadcrumb-input flatpickr-input"
                                            name="periodeOffreSpeciale">
                                    </div>
                                    <div class="col-md-2">
                                        <p class="text-muted mb-0 ellipsis" title="Montant initial">Montant initial</p>
                                        <input type="text" class="form-control text-end numberInput"
                                            name="montant_initial" id="inpmontant_initial" value="0" readonly>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <p class="text-muted m-0 ellipsis" title="Montant">Prix</p>
                                        <input type="text" class="numberInput form-control text-end pe-2"
                                            id="inpmontant" name="montant" value="0">
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <p class="text-muted m-0 ellipsis" title="Montant">Quantité</p>
                                        <input type="text" class="numberInput form-control text-end pe-2"
                                            id="inpquantite_offre" name="quantite_offre" value="0">
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <p class="text-muted m-0 ellipsis" title="Montant">Quantité cdée</p>
                                        <input type="text" class="numberInput form-control text-end pe-2"
                                            id="inpquantite_totale_cmde" name="quantite_totale_cmde" value="0"
                                            disabled>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <p class="text-muted mb-0">Point à gagner</p>
                                        <input type="text" class="form-control text-end ps-3 numberInput"
                                            value="0" id="inpnbre_point_gagne_offre" name="nbre_point_gagne_offre">
                                    </div>
                                    <div class="col-md-2 mb-2">
                                        <p class="text-muted m-0 ellipsis" title="Afficher le menu sur mobile">Offre
                                            active</p>
                                        <div
                                            class="d-flex align-items-center justify-content-center flex-wrap rounded py-0 mt-1 w-100">
                                            <div class="toggle toggle-primary on mb-0" id="checkOffreActive">
                                                <span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="card py-0 border rounded-0">
                        <div class="card-body">
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <p class="text-muted mb-0">Produit</p>
                                    <select class="form-select form-control" name="idproduit" id="selIdproduit"
                                        value="0"></select>
                                </div>
                                <div class="col-md-4">
                                    <p class="text-muted mb-0">Prix unitaire</p>
                                    <input type="text" class="form-control numberInput text-end" name="prixUnitaire"
                                        id="inpPrixUnitaire" value="0" readonly>
                                </div>
                                <div class="col-md-4">
                                    <p class="text-muted mb-0">Quantité</p>
                                    <input class="form-control numberInput text-center" name="quantiteCmde"
                                        id="inpQuantiteCmde" value="0">
                                </div>
                                <div class="col-md-11">
                                    <p class="text-muted mb-0">Accompagnement</p>
                                    <select class="form-select form-control" name="accompagnement" id="accompagnement"
                                        value="0"></select>
                                </div>
                                <div class="col-md-1 pt-3">
                                    <button class="btn btn-primary d-flex align-items-center justify-content-center h-100"
                                        id="btnNewOffreSpecialeProduit">
                                        <i class="bx bx-plus-circle fs-18"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover text-nowrap w-100" id="tableOffreSpecialeProduit">
                                    <thead>
                                        <tr>
                                            <th data-column="action" class="text-center">#</th>
                                            <th data-column="libelleProduit" data-class="text-start" class="text-center">
                                                Produit</th>
                                            <th data-column="libPrixUnitaire" data-class="text-end pe-3"
                                                class="text-center" title="Prix unitaire">P. unitaire</th>
                                            <th data-column="inpQuantiteCmde" class="text-center">Quantité</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer pt-4 pb-2 mb-0">
                    <button type="button" class="btn btn-warning" id="btnEditOffreSpeciale">
                        <i class="bx bx-edit me-1"></i>
                        Modifier
                    </button>
                    <button type="button" class="btn btn-primary" id="btnNewOffreSpeciale">
                        <i class="bx bx-plus-circle me-1"></i>
                        Ajouter
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
@endsection

@section('script')
    <!-- Script excécuté au chargement de la page -->
    <script>
        // Initialisation de Flatpickr
        function initFlatpickr() {

            flatpickr("input[name='periodeOffreSpeciale']", {
                locale: "fr", // Mettre en français
                mode: "range",
                dateFormat: "d/m/Y",
                defaultDate: ["{{ date('d/m/Y') }}",
                    "{{ date('d/m/Y') }}"
                ] // Assurez-vous que ces valeurs sont dynamiques et correctes
            });
        }

        var tableListeOffreSpeciale

        function recuperationDeOffreSpeciale(data = {}) {

            return new Promise((resolve, reject) => {

                let form = new FormData()

                for (let key in data) {
                    if (data.hasOwnProperty(key)) {
                        form.append(key, data[key]);
                    }
                }

                form.append('_token', '{{ csrf_token() }}')

                $.ajax({

                    url: "{{ route('recuperationDeOffreSpeciale') }}",
                    type: 'POST',
                    data: form,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    // beforeSend : progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            notifDanger(response.msg || 'Échec de l\'opération.')
                            resolve(response)
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error: function(error) {

                        reject()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

        function chargerTableListeOffreSpeciale() {

            return new Promise((resolve, reject) => {

                let Periode = convertirFormatDate(_('#filtrePeriode').value);

                let dateDebut = Periode[0]
                let dateFin = Periode[1]

                recuperationDeOffreSpeciale({
                        dateDebut: dateDebut,
                        dateFin: dateFin
                    })
                    .then((response) => {

                        let data = []

                        if (response.success == 1) {

                            data = response.data
                        }

                        tableListeOffreSpeciale = remplissageDataTable({
                            IdentifiantDuTableau: '#tableListeOffreSpeciale',
                            obj: data,
                            lengthChange: true
                        })

                        resolve()
                    }).catch(() => reject())
            })
        }

        chargerTableListeOffreSpeciale()

        $("#selIdproduit").select2({
            // placeholder: "Select a state",
            // dir: "ltr",
            dropdownParent: $('#modalOffreSpeciale'),
            language: {
                noResults: function() {
                    return "Aucun produit disponible"; // Message personnalisé
                }
            },
            escapeMarkup: function(markup) {
                return markup; // Permet de rendre le texte en HTML (si besoin)
            }
        });

        $("#accompagnement").select2({
            // placeholder: "Select a state",
            // dir: "ltr",
            dropdownParent: $('#modalOffreSpeciale'),
            language: {
                noResults: function() {
                    return "Aucun produit disponible"; // Message personnalisé
                }
            },
            escapeMarkup: function(markup) {
                return markup; // Permet de rendre le texte en HTML (si besoin)
            }
        });
    </script>

    <!-- Script filtrer le tableau -->
    <script>
        _('#btnFiltreMenu').addEventListener('click', function() {

            let elmt = this
            loaderIcon(elmt, 'ri-filter-3-line')
            chargerTableListeOffreSpeciale()
                .then(() => loaderIcon(elmt, 'ri-filter-3-line'))
                .catch(() => loaderIcon(elmt, 'ri-filter-3-line'))
        })
    </script>

    <!-- Script modal Offre spéciale -->
    <script>
        var tableOffreSpecialeProduit
        var imageOffreSpeciale

        function newEditOffreSpeciale() {

            return new Promise((resolve, reject) => {

                let formOffreSpeciale = new FormData(_('#formOffreSpeciale'))

                let offreActive = $('#checkOffreActive').hasClass('on') ? 1 : 0
                formOffreSpeciale.append('offreActive', offreActive)

                formOffreSpeciale.append('tableOffreSpecialeProduit', JSON.stringify(tableOffreSpecialeProduit
                    .rows().data().toArray()));
                formOffreSpeciale.append('imageOffreSpeciale', imageOffreSpeciale)
                formOffreSpeciale.append('_token', '{{ csrf_token() }}')

                $.ajax({

                    url: "{{ route('newEditOffreSpeciale') }}",
                    type: 'POST',
                    data: formOffreSpeciale,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    // beforeSend : progressHandler(),
                    success: function(response) {

                        if (response.success != 2) {
                            notifDanger(response.msg || 'Échec de l\'opération.')
                            resolve(response)
                        }

                        resolve(response)
                    },
                    error: function(error) {

                        reject()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

        function calculerTotalOffreSpecialeProduit() {
            let total = 0;

            // Parcours des lignes existantes dans le DataTable
            tableOffreSpecialeProduit.rows().every(function(rowIdx, tableLoop, rowLoop) {
                let rowData = this.data(); // Récupère les données de la ligne actuelle

                // Vérifie si les champs nécessaires existent et sont des nombres
                let prixUnitaire = parseFloat(rowData.prixUnitaire) || 0; // Par défaut, 0 si invalide
                let quantiteCmde = parseFloat(rowData.quantiteCmde) || 0; // Par défaut, 0 si invalide

                // Ajoute le produit au total
                total += prixUnitaire * quantiteCmde;
            });

            return total;
        }

        listeProduitSimple()
            .then((response) => {

                if (response.success == 1) {

                    let data = response.data

                    additionalAttributes = {
                        'data-prixunitaire': function(option) {
                            return option.prixUnitaire;
                        },
                    }

                    data.unshift({
                        idproduit: 0,
                        libelleProduit: 'AUCUNE SELECTION',
                        prixUnitaire: 0
                    })

                    populateSelect('#selIdproduit', {
                        data: data,
                        valueKey: 'idproduit',
                        textKey: 'libelleProduit',
                        additionalAttributes: additionalAttributes
                    })

                    populateSelect('#accompagnement', {
                        data: data,
                        valueKey: 'idproduit',
                        textKey: 'libelleProduit',
                        additionalAttributes: additionalAttributes
                    })
                }
            })

        // Ouverture de la modal en ajout
        _('#btnModalOffreSpeciale').addEventListener('click', function() {

            imageOffreSpeciale = null

            _('#image-principale-container').innerHTML = '<i class="bx bx-image" style="font-size: 120px;"></i>\
                                                                <button id="changeImageOffreSpeciale" \
                                                                        style="width:20px; height : 20px; border-radius : 50%;line-height : 16px; font-size : 16px; text-align : center; cursor : pointer;"\
                                                                        class="btn btn-warning position-absolute top-0 end-0 m-1 p-0"\
                                                                        onclick="document.getElementById(\'image-principale-input\').click();">\
                                                                    <i class=\'bx bx-transfer\'></i>\
                                                                </button>'

            // Réinitialiser le formulaire et configurer la modale
            _('#formOffreSpeciale').reset();

            _('#inpPrixUnitaire').value = 0

            _('#btnNewOffreSpeciale').style.display = ''
            _('#btnEditOffreSpeciale').style.display = 'none'

            typerModal("#modalOffreSpeciale", 'Nouvelle offre spéciale', 'primary', true);
            $('#modalOffreSpeciale').modal('show');

            if ($('#checkOffreActive').hasClass('on') == true) {

            } else {

                $('#checkOffreActive').addClass('on')
            }

            initFlatpickr()

            // Attendre que la modale soit complètement visible pour initialiser le DataTable
            $('#modalOffreSpeciale').on('shown.bs.modal', function() {

                // Charger le tableau et attendre qu'il soit rempli
                tableOffreSpecialeProduit = remplissageDataTable({
                    IdentifiantDuTableau: '#tableOffreSpecialeProduit',
                    obj: [],
                    lengthChange: false
                });
            });
        });

        // Ouverture en modif
        $(document).on('click', '#editOffreSpeciale', function() {

            let idoffre_speciale = $(this).attr('data-id')
            let elmt = this

            loaderIcon(elmt, 'bx bx-edit')

            recuperationDeOffreSpeciale({
                    idoffre_speciale: idoffre_speciale
                })
                .then((response) => {

                    if (response.success == 1) {

                        let data = response.data

                        imageOffreSpeciale = null

                        if (data.imageOffreSpeciale != null) {

                            let imageContainer = document.getElementById('image-principale-container');
                            imageContainer.innerHTML = ''; // Vider l'ancien contenu

                            let imageDiv = document.createElement('div');
                            imageDiv.style.margin = '10px';
                            imageDiv.style.width = '100%';
                            imageDiv.style.height = '100%';
                            imageDiv.style.overflow = 'hidden';
                            imageDiv.classList.add('position-relative', 'd-flex', 'justify-content-center',
                                'align-items-center');
                            imageDiv.innerHTML = `
                            <img src="{{ config('app.logi_base_host') }}/${data.imageOffreSpeciale}" class="img-fluid" alt="Image produit" style="max-width: 100%; height: 120px;objectFit : cover; cursor : pointer; " onclick="openModal('{{ config('app.logi_base_host') }}/${data.imagePrincipale}')">
                            <button style="width:20px; height : 20px; border-radius : 50%;line-height : 16px; font-size : 16px; text-align : center; cursor : pointer;z-index : 1000;" class="btn btn-warning position-absolute top-0 end-0 m-1 p-0" onclick="document.getElementById('image-principale-input').click();">
                                <i class="bx bx-transfer"></i>
                            </button> `;
                            imageContainer.appendChild(imageDiv);
                        } else {

                            _('#image-principale-container').innerHTML = '<i class="bx bx-image" style="font-size: 55px;"></i>\
                                                                <button id="changeImageOffreSpeciale" \
                                                                        style="width:20px; height : 20px; border-radius : 50%;line-height : 16px; font-size : 16px; text-align : center; cursor : pointer;"\
                                                                        class="btn btn-warning position-absolute top-0 end-0 m-1 p-0"\
                                                                        onclick="document.getElementById(\'image-principale-input\').click();">\
                                                                    <i class=\'bx bx-transfer\'></i>\
                                                                </button>'
                        }

                        remplirLeForm('#formOffreSpeciale', data)

                        let defaultDate = data.periodeOffreSpeciale.split(' au ')

                        flatpickr("input[name='periodeOffreSpeciale']", {
                            locale: "fr", // Mettre en français
                            mode: "range",
                            dateFormat: "d/m/Y",
                            defaultDate: defaultDate // Assurez-vous que ces valeurs sont dynamiques et correctes
                        });

                        if (data.offreActive == true) {

                            if ($('#checkOffreActive').hasClass('on') == true) {

                            } else {

                                $('#checkOffreActive').addClass('on')
                            }
                        } else {

                            $('#checkOffreActive').removeClass('on')
                        }

                        _('#btnNewOffreSpeciale').style.display = 'none'
                        _('#btnEditOffreSpeciale').style.display = ''

                        typerModal("#modalOffreSpeciale", 'Modifier => ' + data.libelle, 'warning', true);
                        $('#modalOffreSpeciale').modal('show');

                        // Attendre que la modale soit complètement visible pour initialiser le DataTable
                        $('#modalOffreSpeciale').on('shown.bs.modal', function() {

                            tableOffreSpecialeProduit = remplissageDataTable({
                                IdentifiantDuTableau: '#tableOffreSpecialeProduit',
                                obj: data.offre_speciale_produits,
                                lengthChange: false
                            });
                        });

                        _('#inpPrixUnitaire').value = 0

                        $('.numberInput').trigger('input')
                    }

                    loaderIcon(elmt, 'bx bx-edit')
                }).catch(() => loaderIcon(elmt, 'bx bx-edit'))
        })

        // Script de sélection d'un produit
        $('#selIdproduit').on('change', function() {

            let prixUnitaire = $(this).find('option:selected').attr('data-prixunitaire') ?? 0
            _('#inpPrixUnitaire').value = prixUnitaire

            $('.numberInput').trigger('input')
        })

        _('#btnNewOffreSpecialeProduit').addEventListener('click', function() {

            let elmt = this

            if (_('#selIdproduit').value == 0) {
                notifDanger('Veuillez électionner un produit.')
                return 0
            }

            if (_('#inpQuantiteCmde').value.replace(/\s/g, '') == '' || _('#inpQuantiteCmde').value == 0) {
                notifDanger('Veuillez saisir une quantité valide.')
                return 0
            }

            loaderIcon(elmt, 'bx bx-plus-circle')

            let index = tableOffreSpecialeProduit.rows().count()
            let idproduit = _('#selIdproduit').value
            let libelleProduit = afficherOptionSelectionnee('selIdproduit')
            let quantiteCmde = parseInt(_('#inpQuantiteCmde').value.replace(/\s/g, ''))
            let prixUnitaire = _('#inpPrixUnitaire').value.replace(/\s/g, '')

            let existeDeja = false;
            let indexLigne = -1; // Initialisez avec une valeur par défaut

            // Parcours des lignes existantes dans le tableau
            tableOffreSpecialeProduit.rows().every(function(rowIdx) {
                let rowData = this.data(); // Récupère les données de la ligne actuelle

                if (rowData.idproduit == idproduit) {

                    existeDeja = true;
                    indexLigne = rowIdx; // Enregistre l'index de la ligne trouvée
                    return false; // Arrête la boucle dès qu'une correspondance est trouvée
                }
            });

            if (existeDeja == true) {

                notifDanger('Ce produit est déjà ajouté à l\'offre.')
                loaderIcon(elmt, 'bx bx-plus-circle')
                return 0
            }

            let newOffreSpecialeProduit = {

                idoffre_speciale_produit: 0,
                idproduit: idproduit,
                libelleProduit: libelleProduit,
                action: '<div class="d-flex justify-content-center">\
                                    <button class="btn btn-outline-danger p-1 pt-1 pb-0 align-self-center" data-id="' +
                    index + '" id="supOffreSpecialeProduit"><i class="bx bx-trash" style="font-size : 14px;"></i></button>\
                            </div>',
                quantiteCmde: quantiteCmde,
                inpQuantiteCmde: '<div class="w-100">\
                                        <input class="form-control numberInput text-center"  data-id="' + index +
                    '" id="inpQuantiteCmdeOffreSpecialeProduit" value="' + quantiteCmde + '">\
                                    </div>',
                prixUnitaire: prixUnitaire,
                libPrixUnitaire: formatNumber(prixUnitaire)
            }

            tableOffreSpecialeProduit.row.add(newOffreSpecialeProduit).draw()


            $('#selIdproduit').val(0).trigger('change')
            _('#inpQuantiteCmde').value = 0

            _('#inpmontant_initial').value = calculerTotalOffreSpecialeProduit()

            $('.numberInput').trigger('input')

            loaderIcon(elmt, 'bx bx-plus-circle')
        })

        // Suppression de ligne de l'offre spéciale
        $(document).on('click', '#supOffreSpecialeProduit', function() {

            let valIndex = $(this).attr('data-id')

            let indexOffreSpecialeProduit = null

            tableOffreSpecialeProduit.rows().every(function(index, tableLoop, rowLoop) {
                let rowData = this.node(); // Obtenez la ligne en tant qu'élément DOM

                // Cherche un bouton avec l'id "supOffreSpecialeProduit" et l'attribut data-id = valIndex
                let button = $(rowData).find('#supOffreSpecialeProduit[data-id="' + valIndex + '"]');

                if (button.length) {
                    indexOffreSpecialeProduit = index; // Si trouvé, stocke l'index
                    return false; // Arrête la boucle
                }
            });

            if (indexOffreSpecialeProduit == null) {

                notifError('Erreur de sélection')
                return 0
            }

            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-danger ms-2',
                    cancelButton: 'btn btn-dark'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Êtes-vous sûres ?',
                text: "De vouloirs retirer cette ligne de l\'offre !",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Je confirme !',
                cancelButtonText: 'Non !',
                reverseButtons: true
            }).then((result) => {

                if (result.isConfirmed) {

                    tableOffreSpecialeProduit.row(indexOffreSpecialeProduit).remove();
                    tableOffreSpecialeProduit.draw();

                    _('#inpmontant_initial').value = calculerTotalOffreSpecialeProduit()

                    $('.numberInput').trigger('input')
                }
            })
        })

        // Modification de la quantitée sur la ligne
        $(document).on('change', '#inpQuantiteCmdeOffreSpecialeProduit', function() {

            let elmt = this

            let value = this.value

            let indexOffreSpecialeProduit = null
            let valIndex = $(this).attr('data-id')

            tableOffreSpecialeProduit.rows().every(function(index, tableLoop, rowLoop) {
                let rowData = this.node(); // Obtenez la ligne en tant qu'élément DOM

                // Cherche un bouton avec l'id "supOffreSpecialeProduit" et l'attribut data-id = valIndex
                let button = $(rowData).find('#inpQuantiteCmdeOffreSpecialeProduit[data-id="' + valIndex +
                    '"]');

                if (button.length) {
                    indexOffreSpecialeProduit = index; // Si trouvé, stocke l'index
                    return false; // Arrête la boucle
                }
            });

            if (indexOffreSpecialeProduit == null) {

                notifError('Erreur de sélection')
                return 0
            }

            // Récupérez les données actuelles de la ligne
            let rowData = tableOffreSpecialeProduit.row(indexOffreSpecialeProduit).data();

            rowData['quantiteCmde'] = parseInt(value.replace(/\s/g, ''))
            rowData['inpQuantiteCmde'] = '<div class="w-100">\
                                            <input class="form-control numberInput text-center"  data-id="' + valIndex +
                '" id="inpQuantiteCmdeOffreSpecialeProduit" value="' + value + '">\
                                        </div>'

            // Réinjectez les données mises à jour dans la ligne
            tableOffreSpecialeProduit.row(indexOffreSpecialeProduit).data(rowData).draw();
            console.log(tableOffreSpecialeProduit.row(indexOffreSpecialeProduit).data());

            _('#inpmontant_initial').value = calculerTotalOffreSpecialeProduit()

            $('.numberInput').trigger('input')
        })

        _('#formOffreSpeciale').addEventListener('submit', function(e) {

            e.preventDefault()
        })

        // Script pour valider l'offre spéciale
        _('#btnNewOffreSpeciale').addEventListener('click', function() {

            let elmt = this

            if (tableOffreSpecialeProduit.rows().count() == 0) {

                notifDanger('Veuillez saisir les produits du menu !')
                return 0
            }

            if (_('#inplibelle').value.replace(/\s/g, '') == '') {

                notifDanger('Veuillez saisir le libéllé de l\'offre. !')
                return 0
            }

            if (imageOffreSpeciale == null) {

                notifDanger('Veuillez sélectionner une affiche pour l\'offre spéciale.')
                return 0
            }

            loaderIcon(elmt, 'bx bx-plus-circle')

            newEditOffreSpeciale()
                .then((response) => {

                    if (response.success == 2) {

                        notifSuccess('Opération éffectuée avec succès.')

                        chargerTableListeOffreSpeciale()
                        $('#modalOffreSpeciale').modal('hide');
                    }

                    loaderIcon(elmt, 'bx bx-plus-circle')
                }).catch(() => loaderIcon(elmt, 'bx bx-plus-circle'))
        })

        // Script de modification de l'offre spéciale
        _('#btnEditOffreSpeciale').addEventListener('click', function() {

            let elmt = this

            if (tableOffreSpecialeProduit.rows().count() == 0) {

                notifDanger('Veuillez saisir les produits de l\'offre spéciale !')
                return 0
            }

            loaderIcon(elmt, 'bx bx-edit')

            newEditOffreSpeciale()
                .then((response) => {

                    if (response.success == 2) {

                        notifSuccess('Opération éffectuée avec succès.')
                        chargerTableListeOffreSpeciale()
                        $('#modalOffreSpeciale').modal('hide');
                    }

                    loaderIcon(elmt, 'bx bx-edit')
                }).catch(() => loaderIcon(elmt, 'bx bx-edit'))
        })
    </script>

    <!-- Script de suppression de offreSpeciale -->
    <script>
        var idoffre_specialeASupprimer

        function supprimerOffreSpeciale() {

            return new Promise((resolve, reject) => {

                $.ajax({

                    url: "{{ route('supprimerOffreSpeciale') }}",
                    type: 'GET',
                    data: {
                        idoffre_speciale: idoffre_specialeASupprimer
                    },
                    dataType: 'json',
                    // beforeSend : progressHandler(),
                    success: function(response) {

                        if (response.success != 2) {

                            notifDanger(response.msg || 'Échec de l\'opération.')
                            resolve(response)
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error: function(error) {

                        reject()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

        $(document).on('click', '#deleteOffreSpeciale', function() {

            idoffre_specialeASupprimer = $(this).attr('data-id')

            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-danger ms-2',
                    cancelButton: 'btn btn-dark'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Êtes-vous sûres ?',
                text: "De vouloirs retirer cette offre spéciale !",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Je confirme !',
                cancelButtonText: 'Non !',
                reverseButtons: true
            }).then((result) => {

                if (result.isConfirmed) {

                    supprimerOffreSpeciale()
                        .then((response) => {

                            if (response.success == 1) {

                                SwitAlert(response.msg, 'error', 'center')
                            } else if (response.success == 2) {

                                chargerTableListeOffreSpeciale()
                                notifSuccess('Suppression éffectuée.')
                            }
                        })
                }
            })
        })
    </script>

    <!-- Script de sélection de l'image de l'offre spéciale -->
    <script>
        _('#image-principale-input').addEventListener('change', function(event) {

            let imageContainer = document.querySelector('#image-principale-container');
            let files = event.target.files;

            for (let file of files) {

                imageOffreSpeciale = file

                let reader = new FileReader();

                reader.onload = function(e) {
                    // Conteneur pour l'image et le bouton
                    let imageWrapper = document.createElement('div');
                    imageWrapper.classList.add('position-relative', 'd-flex', 'justify-content-center',
                        'align-items-center');
                    imageWrapper.style.margin = '10px';
                    imageWrapper.style.width = '100%';
                    imageWrapper.style.height = '100%';
                    imageWrapper.style.overflow = 'hidden';

                    // Création de l'élément image
                    let img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.maxWidth = '100%';
                    img.style.maxHeight = '120px';
                    img.style.objectFit = 'contain';
                    img.style.cursor = 'pointer';
                    img.classList.add('img-fluid');

                    // Ajout d'un bouton de fermeture
                    let btnChangeImg = document.createElement('button');
                    btnChangeImg.innerHTML = '<i class="bx bx-transfer"></i>';
                    btnChangeImg.classList.add('btn', 'btn-warning', 'position-absolute', 'top-0', 'end-0',
                        'm-1', 'p-0');
                    btnChangeImg.style.width = '20px';
                    btnChangeImg.style.height = '20px';
                    btnChangeImg.style.borderRadius = '50%';
                    btnChangeImg.style.lineHeight = '16px';
                    btnChangeImg.style.fontSize = '16px';
                    btnChangeImg.style.textAlign = 'center';
                    btnChangeImg.style.cursor = 'pointer';
                    btnChangeImg.style.zIndex = '10000';

                    // Suppression de l'image au clic sur le bouton
                    btnChangeImg.addEventListener('click', function() {
                        document.getElementById('image-principale-input').click()
                    });

                    // Efface les images précédentes et ajoute la nouvelle image
                    imageContainer.innerHTML = '';
                    imageWrapper.appendChild(img);
                    imageContainer.appendChild(btnChangeImg);
                    imageContainer.appendChild(imageWrapper);
                };

                reader.readAsDataURL(file);
            }
        })
    </script>
@endsection