@extends('models')
@section('titre-page',"Réclamation client")
@section('content-body')

    <style>
        ul.ui-autocomplete {
            z-index: 1100;
        }

        .ui-autocomplete {
            max-height: 350px;
            /* max-width: 1000px; */
            overflow-y: auto;
            /* position: static !important; */
        }

        .ui-menu-item .ui-state-active {
            background: #D7C5FF8E;
            border: none;
            color: black
        }

        .ui-menu .ui-menu-item-wrapper {
            /* position: relative; */
            /* padding: 1px 1em 1px 0.4em !important; */
        }
    </style>
    <!-- Start::app-content -->

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-5 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Ventes</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Réclamation client</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-7 col-lg-8 col-md-8">
                    <div class="row">
                        <div class="col-md-3" style="margin-top : 1px;">
                            <button type="button" id="btnModalSaisieRecla" class="btn btn-info-light d-flex justify-content-center w-100" style="font-size:15px">
                                <i class="ri ri-add-circle-line me-2"></i>Ajouter ligne
                            </button>
                        </div>
                        <div class="col-md-4" style="margin-top : 1px;">
                            <button type="button" id="btnMiseEnAttente" class="btn btn-secondary-light d-flex justify-content-center w-100" style="font-size:15px">
                                <i class='bx bx-pause fs-20'></i>&nbsp;Mettre en attente
                            </button>
                        </div>
                        <div class="col-md-3" style="margin-top : 1px;">
                            <button type="button" id="btnReinitialiser" class="btn btn-danger-light d-flex justify-content-center w-100" style="font-size:15px">
                                <i class="bx bx-x-circle fs-20"></i>&nbsp;Réinitialiser
                            </button>
                        </div>
                        <div class="col-md-2" style="margin-top : 1px;">
                            <button type="button" id="btnValideBonRecla" class="btn btn-success-light d-flex justify-content-center w-100" style="font-size:15px">
                            <i class='bx bx-check-double fs-20'></i>&nbsp;Valider
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-Stats -->
    <div class="row">
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-light rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Nbre lignes</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libNbreLigne">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-info rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total HT</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalHT">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-warning rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Remise</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libRemise">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-danger rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">TVA</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTVA">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-primary rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">BIC</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libBIC">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-success rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total TTC</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalTTC">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-Stats -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body  pe-0">
                    <div class="row w-100">
                        <div class="accordion accordion-flush mt-2" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed pb-2 d-flex justify-content-around" type="button" style="background: #FFD7DA;font-size : .78rem;" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                        <span>Infos</span>
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body row">

                                        <div class="d-flex col-xl-5 col-lg-6">
                                            <div class="card flex-fill border border-danger custom-card">
                                                <div class="card-header d-flex justify-content-center py-1" style="background:  #F22A1E !important;">
                                                    <span class="text-light text-center fs-16 fw-bold">Infos de la facture </span>
                                                </div>
                                                <div class="card-body row pt-1 pb-0">
                                                    <input type="number" style="display: none;" id="IDFACTURECLIENT" name="IDFACTURECLIENT">
                                                    <div class="col-md-6 mb-1">
                                                        <p class="text-muted mb-0">N° facture</p>
                                                        <input type="text" class="form-control text-center" id="NumeroFactureClient" autocomplete="off">
                                                    </div>
                                                    <div class="col-md-6 mb-1">
                                                        <p class="text-muted mb-0">Client</p>
                                                        <div class="card pt-0 w-100" style="height:35px;">
                                                            <div class="card-body d-flex pt-2">
                                                                <p class="form-check-label ellipsis" id="NomClient" title=""></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-0">
                                                        <p class="text-muted mb-0">Date de la facture</p>
                                                        <div class="card pt-0 w-100" style="height:35px;">
                                                            <div class="card-body d-flex pt-2 justify-content-center">
                                                                <p class="form-check-label text-center" id="dateFacture" title=""></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-0 pt-3">
                                                        <button class="btn btn-outline-light w-100 ellipsis" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-dark" data-bs-placement="top" title="Reclamer toute la facture" id="btnAvoirTteFacture">
                                                            Réclamer toute la facture
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="d-flex col-xl-7 col-lg-6">
                                            <div class="card flex-fill border border-danger custom-card">
                                                <div class="card-header d-flex justify-content-center py-1" style="background:  #F22A1E !important;">
                                                    <span class="text-light text-center fs-16 fw-bold">Infos du bon de réclamation </span>
                                                </div>
                                                <div class="card-body row pt-1 pb-0">
                                                    <div class="col-md-6 mb-2">
                                                        <div class="mb-2">
                                                            <p class="text-muted mb-0">Date réclamation</p>
                                                            <input type="date" class="form-control text-center" id="dateReclamation">
                                                        </div>
                                                        <div class="mb-0">
                                                            <p class="text-muted mb-0">Référence du bordereau</p>
                                                            <input type="text" id="ReferenceBordereauRetour" name="ReferenceBordereauRetour" class="form-control text-center">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <p class="text-muted mb-0">Commentaire</p>
                                                        <textarea class="form-control" name="CommentaireRetourClient" id="CommentaireRetourClient" cols="30" rows="4"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12">
                <div class="card custom-card">

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="tablehover table table-striped tablehover text-nowrap w-100 openModalProduit" id="tableReclamationLigne">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th data-column="action" class="text-center colTable" data-orderable="false">
                                            <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">    
                                            Actions
                                        </th>
                                        <th data-column="CodeCipProduit1" class="text-center colTable">Code CIP</th>
                                        <th data-column="DesignationProduit" class="text-center colTable">Désignation</th>
                                        <th data-column="QteFacturee" data-class="text-center" class="text-center colTable">Q. Facturée</th>
                                        <th data-column="QteUniteGratuite" data-class="text-center" class="text-center colTable">UG</th>
                                        <th data-column="QteReclamationInput" class="text-center colTable">Q. Réclamée</th>
                                        <th data-column="QteValideInput" class="text-center colTable">Q. Validée</th>
                                        <th data-column="IDRETOURCLIENT_MOTIFSelect" class="text-center colTable">Motif Réclamation</th>
                                        <th data-column="StatutRetourCLientLigneSelect" class="text-center colTable">Statut</th>
                                        <th data-column="PrixCessionHTFormat" data-class="text-end" class="text-center colTable">P. Cession HT</th>
                                        <th data-column="TotalHTRetourFormat" data-class="text-end" class="text-center colTable">Total HT</th>
                                        <th data-column="TauxRemiseFormat" data-visible="false" data-class="text-center" class="text-center colTable">Remise</th>
                                        <th data-column="TauxTaxeProduitFormat" data-class="text-center" class="text-center colTable">TVA</th>
                                        <th data-column="NumeroTracabilite" data-visible="false" class="text-center colTable">NTSP</th>
                                        <th data-column="NumeroLotProduit" class="text-center colTable">N° Lot</th>
                                        <th data-column="DatePeremptionFormat" class="text-center colTable">Péremption</th>
                                        <th data-column="CommentaireRetourCLientLigneInput" class="text-center colTable">Commentaire</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <!-- Modal Saisie de produit -->
    <div class="modal fade" id="modalSaisieProduit" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Saisie de ligne de reclamation</h6>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body mb-0">
                    <div class="row px-2 py-0">
                        <div class="card px-0">
                            <form id="formReclamationLigne">
                                <div class="card-body py-2 px-0 ps-2 row">
                                    <div class="col-md-11 row">
                                        <input type="number" id="IDFACTURECLIENT_LIGNE" name="IDFACTURECLIENT_LIGNE" style="display: none">
                                        <input type="number" name="IDCAMPAGNEUG_PRODUIT" id="inpIDCAMPAGNEUG_PRODUIT" style="display : none;">
                                        <div class="col-md-4">
                                            <p class="text-muted mb-0">Produit</p>
                                            <input type="text" class="form-control" id="selectProduit" name="selectProduit">
                                        </div>
                                        <div class="col-md-2">
                                            <p class="text-muted mb-0 ellipsis">Qté facturée</p>
                                            <input type="number" class="form-control text-center" id="QteFacturee" name="QteFacturee" readonly>
                                        </div>
                                        <div class="col-md-2">
                                            <p class="text-muted mb-0">Qté UG</p>
                                            <input type="number" class="form-control text-center" id="QteUniteGratuite" name="QteUniteGratuite" readonly>
                                        </div>
                                        <div class="col-md-2">
                                            <p class="text-muted mb-0">Qté réclamée</p>
                                            <input type="number" class="form-control text-center" id="QteReclamation" name="QteReclamation">
                                        </div>
                                        <div class="col-md-2">
                                            <p class="text-muted mb-0">Qté validée</p>
                                            <input type="number" class="form-control text-center" id="QteValide" name="QteValide">
                                        </div>
                                        <div class="col-md-4">
                                            <p class="text-muted mb-0">Motif</p>
                                            <select class="form-select" name="IDRETOURCLIENT_MOTIF" id="IDRETOURCLIENT_MOTIF">

                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <p class="text-muted mb-0">Statut</p>
                                            <select class="form-select" name="statut" id="statut">
                                                <option value="1">EN ATTENTE</option>
                                                <option value="2">ACCEPTEE</option>
                                                <option value="3">REFUSEE</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="text-muted mb-0">Commentaire</p>
                                            <textarea class="form-control" name="CommentaireRetourCLientLigne" id="CommentaireRetourCLientLigne" cols="30" rows="1"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-1 h-100 p-0 me-0">
                                        <button class="btn btn-success-light h-100 w-100" id="btnNewReclamationClientLigne">
                                            <i class="ri ri-add-circle-line fs-20"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal avoir sur toute la facture -->
    <div class="modal fade" id="modalAvoirSurTteFacture" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Avoir sur toute la facture</h6>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body mb-0">
                    <div class="row">
                        <div class="mb-3">
                            <p class="text-muted mb-0">Motif</p>
                            <select class="form-select" name="IDRETOURCLIENT_MOTIF2" id="IDRETOURCLIENT_MOTIF2"></select>
                        </div>
                        <div>
                            <p class="text-muted mb-0">Commentaires</p>
                            <textarea class="form-control" name="commentaireAvoirTteFacture" id="commentaireAvoirTteFacture" cols="30" rows="5"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" id="btnValiderAvoirTteFacture">
                        <i class="bx bx-check-circle me-2"></i>
                        Valider
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

    {{-- Script executé au chargement de la page --}}
    <script>

        var url = new URL(window.location.href); // Création d'un objet URL à partir de l'URL

        // Récupérer la valeur du paramètre "IDRETOURCLIENT"
        var IDRETOURCLIENT

        IDRETOURCLIENT = url.searchParams.get('IDRETOURCLIENT') ?? 0;

        let listeProduitFacture = []

        var tableReclamationLigne

        async function chargerTableReclaLigne(table){

            tableReclamationLigne = await remplissageDataTable({
                IdentifiantDuTableau : '#tableReclamationLigne',
                obj : table,
                scrollY : '450px'
            })

            divShowPer = $('#tableReclamationLigne_filter').parent().prev()
            
            divShowPer.append('\
                <div class="col-xl-1 d-flex ms-3 me-4 mt-2">\
                    <i id="btnSuppLigneSelect" class="bx bx-trash text-danger me-1 fs-16" style="cursor : pointer;"></i>\
                    <label class="fw-bold" for="btnSuppLigneSelect" id="labelSuppLigneSelect" style="cursor : pointer;">Supprimer</label>\
                </div>\
                <div class="col-xl-1 d-flex me-4 mt-2">\
                    <i id="btnAccepteLigneSelect" class="bx bx-check-double text-success me-1 fs-20" style="cursor : pointer;"></i>\
                    <label class="fw-bold" for="btnAccepteLigneSelect" id="labelAccepteLigneSelect" style="cursor : pointer;">Accepter</label>\
                </div>\
                <div class="col-xl-5 d-flex me-4 mt-2">\
                    <div class="d-flex me-4">\
                        <i id="btnEnAttenteLigneSelect" class="bx bx-pause-circle text-info me-1 fs-16" style="cursor : pointer;"></i>\
                        <label class="fw-bold" for="btnEnAttenteLigneSelect" id="labelEnAttenteLigneSelect" style="cursor : pointer;">En attente</label>\
                    </div>\
                    <div class="d-flex me-4">\
                        <i id="btnRefuLigneSelect" class="bx bx-x-circle text-danger me-1 fs-16" style="cursor : pointer;"></i>\
                        <label class="fw-bold" for="btnRefuLigneSelect" id="labelRefuLigneSelect" style="cursor : pointer;">Refuser</label>\
                    </div>\
                    <div class="d-flex ">\
                        <i id="btnRefuLigneSelect" class="ri ri-file-excel-2-line text-success me-1 fs-13" style="cursor : pointer;"></i>\
                        <label class="fw-bold" for="btnRefuLigneSelect" id="btn-export-reclamation-client" style="cursor : pointer;">Exporter</label>\
                    </div>\
                </div>\
            ')

            divShowPer.addClass('d-flex')
                
            divShowPer.removeClass('col-md-6')
            divShowPer.addClass('col-xl-9')
            divShowPer.next().removeClass('col-md-6')
            divShowPer.next().addClass('col-xl-3')

            placeboutonPreferenceColonne('tableReclamationLigne','ReclamationLigneShowColonne',2)
            recuperationPreferenceColonneUtilisateur('tableReclamationLigne','ReclamationLigneShowColonne')
        }

        $(document).on('click', '.ReclamationLigneShowColonne', function() {
                appliquerPreferenceColonne('tableReclamationLigne','Reclamation-client',$(this),'ReclamationLigneShowColonne')
        })

        function listeLigneRecla(IDRETOURCLIENT, info = false){

            if (IDRETOURCLIENT == null || IDRETOURCLIENT == 0) {
                
                chargerTableReclaLigne([])
            }else{

                $.ajax({

                    url: '{{ route("listeLigneReclamationClient") }}',
                    type: 'GET',
                    dataType: 'json',
                    data: { 
                        
                        IDRETOURCLIENT : IDRETOURCLIENT,
                        info : info
                    },
                    beforeSend : progressHandler(),
                    success: function(response) {

                        if (response.success == 2) {

                            if (info == true) {

                                if (response.infoRetour.length == 0) {
                                    
                                    window.location.href = window.location.href.split('?')[0]
                                    chargerTableReclaLigne([])
                                    completeHandler()
                                    return 0
                                }
                                
                                _('IDFACTURECLIENT').value = response.infoRetour[0].IDFACTURECLIENT
                                _('NumeroFactureClient').value = response.infoRetour[0].NumeroFactureClient
                                _('NomClient').innerHTML = response.infoRetour[0].NomClient
                                _('dateFacture').innerHTML = response.infoRetour[0].DateFactureClientFormat
                                
                                remplirChampDate(response.infoRetour[0].dateRelclamationFormat, 'dateReclamation')
                                _('ReferenceBordereauRetour').value = response.infoRetour[0].ReferenceBordereauRetour
                                _('CommentaireRetourClient').value = response.infoRetour[0].CommentaireRetourClient

                                _('NumeroFactureClient').setAttribute('disabled', '')

                                _('libNbreLigne').innerHTML = response.nbreLigne
                                _('libTotalHT').innerHTML = response.totalHTRecla
                                _('libRemise').innerHTML = response.totalRemise
                                _('libTVA').innerHTML = response.totalTVA
                                _('libBIC').innerHTML = response.totalBIC
                                _('libTotalTTC').innerHTML = response.totalTTC

                                chargerlisteProduitFacture(response.infoRetour[0].IDFACTURECLIENT)

                                // history.replaceState({ IDRETOURCLIENT : IDRETOURCLIENT}, '', window.location.href.split('?')[0]);
                                
                            }
                            
                            _('btnAvoirTteFacture').removeAttribute('disabled')
                            chargerTableReclaLigne(response.data)
                        }else if(response.success == 1){
                            
                            window.location.href = window.location.href.split('?')[0]
                        }else{

                            notifError(response.msg)
                        }
                        
                        completeHandler()
                    },
                    error : function(error){

                        notifError(error)
                        completeHandler()
                    }
                })
            }
        }

        function listeLigneSelectionne() {

            let data = []

            let lignes = tableReclamationLigne.rows().nodes()

            $.each($(lignes).find('.checkSelectLigne'), function(key, value) {

                if (value.checked == true) {
                    data.push(value.getAttribute('data-id'))
                }
            })
            return data
        }

        listeLigneRecla(IDRETOURCLIENT, true)

        function chargerSelectMotif(){

            $.ajax({

                url: '{{ route("listeMotifReclamationClientSimple") }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {
                        
                        $('#IDRETOURCLIENT_MOTIF').html('<option value ="0">Sélectionner le motif</option>')

                        response.data.forEach(function(value, key){

                            $('#IDRETOURCLIENT_MOTIF').append('<option value ="'+value.IDRETOURCLIENT_MOTIF+'">'+value.LibelleMotifRetour+'</option>')
                        })

                        $('#IDRETOURCLIENT_MOTIF2').html('<option value ="0">Sélectionner le motif</option>')

                        response.data.forEach(function(value, key){

                            $('#IDRETOURCLIENT_MOTIF2').append('<option value ="'+value.IDRETOURCLIENT_MOTIF+'">'+value.LibelleMotifRetour+'</option>')
                        })
                    }else{

                        notifError(response.msg)
                    }
                },
                error : function(error){

                    notifError(error)
                }
            })
        }

        $('#IDSTOCKAGENCE_LOTS').select2({dropdownParent: $("#modalSaisieProduit")})
        chargerSelectMotif()
    </script>

    <!-- Script actions au dessus du tableau -->
    <script>

        function updateStatutLignes(listeLignesSelectionne, statut){

            $.ajax({

                url : "{{ route('updateStatutLignes')}}",
                type : 'POST',
                data : {

                    listeLignesSelectionne : listeLignesSelectionne,
                    statut : statut,
                    _token : '{{ csrf_token() }}'
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){

                    if (response.success == 1) {
                        

                        listeLigneRecla(IDRETOURCLIENT, false)
                    }else{

                        notifError(response.msg)
                        completeHandler()
                    }
                },
                error : function(error){

                    notifError('Échec de l\'opération.')
                    completeHandler()
                }
            })
        }
        
        // Supprimer les lignes selectionnées
        $(document).on('click', '#btnSuppLigneSelect', function(){

            listeLignesSelectionne = listeLigneSelectionne()

            if(listeLignesSelectionne.length == 0){

                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes à supprimer')
                return 0
            }
            
            confirmMdp('{{ csrf_token() }}', supprimerLigneRecla, null, 'Supprimer les lignes sélectionnées')
        })

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

            $('#btnSuppLigneSelect').click()
        })

        // Accepter les lignes sélectionnées
        $(document).on('click', '#btnAccepteLigneSelect', function(){

            listeLignesSelectionne = listeLigneSelectionne()

            if(listeLignesSelectionne.length == 0){

                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes à accepter')
                return 0
            }

            Swal.fire({

                title: 'Êtes-vous sures de vouloir accepter ces lignes sélectionnées ?',
                // text: 'Seules les commandes non collectées seront supprimées.',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

                }).then((result) => {

                if (result.isConfirmed) {

                    _('checkSelectAll').checked = false
                    updateStatutLignes(listeLignesSelectionne, 2)
                }
            })
        })

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

            $('#btnAccepteLigneSelect').click()
        })


        // Mettre en attente les lignes sélectionnées
        $(document).on('click', '#btnEnAttenteLigneSelect', function(){

            listeLignesSelectionne = listeLigneSelectionne()

            if(listeLignesSelectionne.length == 0){

                notifError('Veuillez sélectionner les lignes à mettre en attente')
                return 0
            }

            Swal.fire({

                title: 'Êtes-vous sures de vouloir mettre en attente ces lignes sélectionnées ?',
                // text: 'Seules les commandes non collectées seront supprimées.',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

                }).then((result) => {

                if (result.isConfirmed) {

                    _('checkSelectAll').checked = false
                    updateStatutLignes(listeLignesSelectionne, 1)
                }
            })
        })

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

            $('#btnEnAttenteLigneSelect').click()
        })


        // Refuser les lignes sélectionnées
        $(document).on('click', '#btnRefuLigneSelect', function(){

            listeLignesSelectionne = listeLigneSelectionne()

            if(listeLignesSelectionne.length == 0){

                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes à refuser')
                return 0
            }

            Swal.fire({

                title: 'Êtes-vous sures de vouloir refuser ces lignes sélectionnées ?',
                // text: 'Seules les commandes non collectées seront supprimées.',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

                }).then((result) => {

                if (result.isConfirmed) {

                    _('checkSelectAll').checked = false
                    updateStatutLignes(listeLignesSelectionne, 3)
                }
            })
        })

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

            $('#btnRefuLigneSelect').click()
        })
    </script>

    <!-- Script de sélection des lignes -->
    <script>
        
        _('checkSelectAll').addEventListener('click', function() {

            let value = this.checked

            let lignes = tableReclamationLigne.rows().nodes()

            $(lignes).find('.checkSelectLigne').prop('checked', value)
        })

        $(document).on('click', '.checkSelectLigne', function() {

            if (_('checkSelectAll').checked == true) {
                _('checkSelectAll').checked = false
            }
        })
    </script>

    <!-- Script de sélection de la facture -->
    <script>

        function chargerlisteProduitFacture(IDFACTURECLIENT){

            $.ajax({

                url: '{{ route("listeProduitFacture") }}',
                type: 'GET',
                data : {
                    IDFACTURECLIENT : IDFACTURECLIENT
                },
                dataType: 'json',
                beforeSend : progressHandler(),
                success: function(response) {

                    if (response.success == 1) {
                        
                        let listeProduitFacture = response.data

                        // Script autoComplete
                        $("#selectProduit").autocomplete({
                            delay: 500,
                            minLength: 0,
                            autoFocus : true,
                            source: function(request, response) {

                                let filtered = $.map(listeProduitFacture, function(item) {

                                    if (item.NumeroLotProduit.toLowerCase().includes(request.term.toLowerCase())) {

                                        return {

                                            label : item.DesignationProduit,
                                            // label : item.NumeroLotProduit,
                                            id : item.IDPRODUIT,
                                            datePeremption : item.datePeremptionFormat,
                                            NumeroLotProduit : item.NumeroLotProduit,
                                            DesignationProduit : item.DesignationProduit,
                                            QteFacturee : item.QteFacturee,
                                            QteUniteGratuite : item.QteUniteGratuite,
                                            IDFACTURECLIENT_LIGNE : item.IDFACTURECLIENT_LIGNE,
                                            IDCAMPAGNEUG_PRODUIT : item.IDCAMPAGNEUG_PRODUIT
                                        }
                                    }
                                })

                                response(filtered);
                            },
                            focus: function(event, ui) {

                            },
                            select: function(event, ui) {

                                let qteUG = parseInt(ui.item.QteUniteGratuite)
                                let qteFacturee = parseInt(ui.item.QteFacturee)
                                
                                _('IDFACTURECLIENT_LIGNE').value = ui.item.IDFACTURECLIENT_LIGNE
                                _("QteFacturee").value = qteFacturee
                                _("QteUniteGratuite").value = qteUG
                                _('QteReclamation').select()
                                
                                if (qteUG > 0) {
                                    
                                    _('QteReclamation').value = qteFacturee + qteUG
                                    _('QteValide').value = qteFacturee + qteUG
                                    _('inpIDCAMPAGNEUG_PRODUIT').value = ui.item.IDCAMPAGNEUG_PRODUIT

                                    _('QteReclamation').setAttribute('readonly', '')
                                    _('QteValide').setAttribute('readonly', '')

                                    _('IDRETOURCLIENT_MOTIF').focus()
                                }else{

                                    _('QteReclamation').value = 0
                                    _('QteValide').value = 0
                                    _('inpIDCAMPAGNEUG_PRODUIT').value = 0

                                    _('QteReclamation').removeAttribute('readonly')
                                    _('QteValide').removeAttribute('readonly')
                                }
                            }
                        })
                        .data("ui-autocomplete")._renderItem = function(ul, item) {

                            var $div = $("<div></div>")
                            // $("<span class='m-name'></span>").text(item.label).appendTo($div)
                            $("\
                                <div class=\"d-flex justify-content-between\">\
                                    <div><span class=\"fw-bold\">Lot : <span><span>"+item.NumeroLotProduit+"</span></div>\
                                    <div><span class=\"fw-bold\">Per : <span><span>"+item.datePeremption+"</span></div>\
                                </div>\
                                <div class=\"mt-2\">\
                                    <span>"+item.DesignationProduit+"</span>\
                                </div>\
                            ").appendTo($div)
                            return $("<li></li>").append($div).appendTo(ul)
                        }

                    }else{

                        notifError(response.msg)
                    }
                    completeHandler()
                },
                error : function(error){

                    notifError(error)
                    completeHandler()
                }
            })
        }

        _('selectProduit').addEventListener('click', function(){

            this.select()
        })

        // Trigger the autocomplete list to show on focus
        $("#selectProduit").on('focus', function() {
            $(this).autocomplete("search", "");
        });

        // Essaye de déclencher l'ouverture de l'élément <select>
        var event = new MouseEvent('mousedown', {
                        'view': window,
                        'bubbles': true,
                        'cancelable': true
                    });

        // Sélection de la facture
        _('NumeroFactureClient').addEventListener('keypress', function(e){

            if (e.keyCode == 13) {

                if ( _('idSiteEnCours').value == 1) {
                                
                    notif('danger', 'Erreur', 'Veuillez sélectionner une agence valide')
                    return 0
                }
                
                $.ajax({

                    url: '{{ route("infoFactureClientParNumFacture") }}',
                    type: 'GET',
                    data : {
                        lignes : 0,
                        ListeDesFacturesSelectionnes : [_('NumeroFactureClient').value]
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.success == 1) {

                            if (response.data[0].info.IDAGENCE != _('idSiteEnCours').value) {
                                
                                notif('danger', 'Erreur', 'Veuillez sélectionner l\'agence de la facture')
                                return 0
                            }
                            
                            _('NomClient').innerHTML = response.data[0].info.NomClient
                            _('NomClient').setAttribute('title', response.data[0].info.NomClient)
                            _('dateFacture').innerHTML = response.data[0].info.DateFactureClientFormat

                            const today = new Date();
                            const formattedDate = today.toISOString().split('T')[0];
                            _('dateReclamation').value = formattedDate

                            _('IDFACTURECLIENT').value = response.data[0].info.IDFACTURECLIENT

                            _('btnAvoirTteFacture').removeAttribute('disabled')
                            chargerlisteProduitFacture(response.data[0].info.IDFACTURECLIENT)
                        }else if(response.success == 2){

                            notif('danger', 'Erreur', response.msg)
                        }else{

                            notifError(response.msg)
                        }
                    },
                    error : function(error){

                        notifError(error)
                    }
                })
            }else{

                _('IDFACTURECLIENT').value = 0
                _('NomClient').innerHTML = ""
                _('dateFacture').innerHTML = ""
                
                remplirChampDate("today", 'dateReclamation')
                _('ReferenceBordereauRetour').value = ""
                _('CommentaireRetourClient').value = ""

                _('btnAvoirTteFacture').setAttribute('disabled', '')

                _('libNbreLigne').innerHTML = 0
                _('libTotalHT').innerHTML = 0
                _('libRemise').innerHTML = 0
                _('libTVA').innerHTML = 0
                _('libBIC').innerHTML = 0
                _('libTotalTTC').innerHTML = 0
            }
        })
        
        _('QteReclamation').addEventListener('keypress', function(e){

            if (e.keyCode == 13) {
                
                e.preventDefault()
                _('QteValide').select()
            }
        })

        _('QteValide').addEventListener('keypress', function(e){

            if (e.keyCode == 13) {

                e.preventDefault()

                _('IDRETOURCLIENT_MOTIF').focus()
                _('IDRETOURCLIENT_MOTIF').dispatchEvent(event);
            }
        })

        _('IDRETOURCLIENT_MOTIF').addEventListener('change', function(e){

            e.preventDefault()

            _('statut').focus()
            _('statut').dispatchEvent(event)
        })

        _('statut').addEventListener('change', function(){

            _('CommentaireRetourCLientLigne').select()
        })

        _('CommentaireRetourCLientLigne').addEventListener('keypress', function(e){

            if(e.keyCode == 13){

                e.preventDefault()
                _('btnNewReclamationClientLigne').click()
            }
        })

        _('formReclamationLigne').addEventListener('submit', function(e){

            e.preventDefault()
        })

        function initFormReclamationLigne(){

            _('IDFACTURECLIENT_LIGNE').value = ''
            $('#selectProduit').val('')
            _('QteFacturee').value = 0
            _('QteUniteGratuite').value = 0
            _('QteReclamation').value = 0
            _('QteValide').value = 0
            $('#IDRETOURCLIENT_MOTIF').val(0).trigger('change')
            $('#statut').val(0).trigger('change')
            _('CommentaireRetourCLientLigne').value = ''

            _('QteReclamation').value = 0
            _('QteValide').value = 0
            _('inpIDCAMPAGNEUG_PRODUIT').value = 0

            _('QteReclamation').removeAttribute('readonly')
            _('QteValide').removeAttribute('readonly')
        }

        // Script ajout de nouvelle ligne de réclamation client 
        _('btnNewReclamationClientLigne').addEventListener('click', function(){

            if (_('IDFACTURECLIENT').value == 0 || _('IDFACTURECLIENT').value.replace(/\s/g, '') == '') {
                
                $('#modalSaisieProduit').modal('hide')
                notif('danger', 'Erreur', 'Veuillez renseigner un n° de facture client","valide avant de saisir la réclamation !')
                return 0
            }

            if (_('IDFACTURECLIENT_LIGNE').value == 0 || _('IDFACTURECLIENT_LIGNE').value.replace(/\s/g, '') == '' ) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner la ligne de lot !')
                return 0
            }
            
            if (_('QteReclamation').value == 0 || _('QteReclamation').value.replace(/\s/g, '') == '') {
                
                notif('danger', 'Erreur', 'Renseigner la quantité réclamée SVP !')
                return 0
            }

            if (_('IDRETOURCLIENT_MOTIF').value == 0) {
                
                notif('danger', 'Erreur', 'Renseigner le motif de la réclamation SVP !')
                return 0
            }

            let formReclamationLigne = new FormData(_('formReclamationLigne'))
            formReclamationLigne.append( '_token' , '{{ csrf_token() }}')
            formReclamationLigne.append( 'IDFACTURECLIENT' , _('IDFACTURECLIENT').value)
            formReclamationLigne.append( 'IDRETOURCLIENT' , IDRETOURCLIENT)
            formReclamationLigne.append( 'ReferenceBordereauRetour' , _('ReferenceBordereauRetour').value)

            $.ajax({

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

                    if (response.success == 1) {

                        if (_('statut').value == 3) {
                            
                            _('QteValide').value == 0
                        }

                        if (response.champ != null && viderLesEspaces(response.champ) != '') {
                            
                            _(response.champ).select()
                        }

                        notif('danger', 'Erreur', response.msg)
                    }else if (response.success == 2) {

                        _('QteValide').value = _('QteFacturee').value + _('QteUniteGratuite').value
                        notif('danger', 'Erreur', response.msg)
                    }else if (response.success == 3) {

                        IDRETOURCLIENT = response.IDRETOURCLIENT

                        initFormReclamationLigne()
                        
                        listeLigneRecla(IDRETOURCLIENT, true)
                        _('NumeroFactureClient').setAttribute('disabled', '')
                    }else if(response.success == 0){

                        notif('danger', 'Erreur', response.msg)
                    }

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

                    notifError(error)
                    completeHandler()
                },
                complete : completeHandler
            })
        })
    </script>

    <!-- Script de saisie de ligne de recla -->
    <script>

        _('btnModalSaisieRecla').addEventListener('click', function(){

            if (_('IDFACTURECLIENT').value.replace(/\s/g, '') == '' || _('IDFACTURECLIENT').value == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner une facture')
                return 0
            }

            _('IDFACTURECLIENT_LIGNE').value = ''
            $('#selectProduit').val('')
            _('QteFacturee').value = 0
            _('QteUniteGratuite').value = 0
            _('QteReclamation').value = 0
            _('QteValide').value = 0
            $('#IDRETOURCLIENT_MOTIF').val(0).trigger('change')
            $('#statut').val(0).trigger('change')
            _('CommentaireRetourCLientLigne').value = ''

            $('#modalSaisieProduit').modal('show')
        })
        
    </script>

    <!-- Script de mise en attente -->
    <script>

        function mettreEnAttente(){

            $.ajax({

                url: '{{ route("mettreReclamationEnAttente") }}',
                type: 'GET',
                dataType: 'json',
                data: { 
                    
                    IDFACTURECLIENT : _('IDFACTURECLIENT').value,
                    IDRETOURCLIENT : IDRETOURCLIENT,
                    ReferenceBordereauRetour : _('ReferenceBordereauRetour').value,
                    CommentaireRetourClient : _('CommentaireRetourClient').value
                },
                beforeSend : progressHandler(),
                success: function(response) {

                    if (response.success == 1) {
                        
                        notif('danger', 'Erreur', response.msg)
                    }else if(response.success == 2){

                        notif('danger', 'Erreur', response.msg)
                    }else if(response.success == 3){

                        notif('success', 'Succès', 'Réclamation mise en attente ')

                        Swal.fire({

                            title: 'Voulez-vous imprimer le bon de réclamation ?',
                            // text: 'Seules les commandes non collectées seront supprimées.',
                            icon: 'warning',
                            showCancelButton: true,
                            customClass: {
                                confirmButton: 'btn btn-danger ms-2'
                            },
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Oui',
                            cancelButtonText: 'Non'

                            }).then((result) => {

                            if (result.isConfirmed) {

                                printReclamationClient([IDRETOURCLIENT])
                            }
                        })
                        // .finally(() => {
                        //     // Code à exécuter après la résolution de la promesse, qu'elle soit confirmée ou annulée
                        //     window.location.href = window.location.href.split('?')[0]
                        // });

                        // _('btnReinitialiser').click()
                        
                    }else{

                        notifError(response.msg)
                    }

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        _('btnMiseEnAttente').addEventListener('click', function(){

            if (IDRETOURCLIENT == 0 || IDRETOURCLIENT == null) {
                
                notif('danger', 'Erreur', 'Impossible de mettre la Réclamation en attente, car elle est ne contient aucune ligne de produit !')
                return 0
            }

            if (_('libNbreLigne').innerHTML.replace(/\s/g, '') == 0) {
                
                notif('danger', 'Erreur', 'Impossible de mettre la Réclamation en attente, car elle est ne contient aucune ligne de produit !')
                return 0
            }

            // confirmMdp('{{ csrf_token() }}', mettreEnAttente, null, title = '', { sousTitre: '', infoJNL: "CREATION/MODIFICATION DE BON DE RETOUR CLIENT", typeJNL : 3, CodeDroit: "DV_RetourClient" })
            mettreEnAttente()
            reinitialiserInterface()
        })
    </script>

    <!-- Script de validation de la reclalation -->
    <script>

        function validerBonReclamation(){

            $.ajax({

                url: '{{ route("validerReclamation") }}',
                type: 'GET',
                dataType: 'json',
                data: { 
                    
                    dateReclamation : _('dateReclamation').value,
                    IDRETOURCLIENT : IDRETOURCLIENT,
                    IDFACTURECLIENT : _('IDFACTURECLIENT').value,
                    surFiche : true
                },
                beforeSend : progressHandler(),
                success: function(response) {

                    if(response.success == 0){

                        notifError(response.msg)
                        return 0
                    }

                    if (response.tableErreur.length > 0) {
                        
                        notif('danger', 'Erreur', response.tableErreur[0].msg)
                    }else{

                        notif('success', 'Succès', 'Réclamation validé')

                        Swal.fire({

                            title: 'Voulez-vous imprimer le bon de réclamation ?',
                            // text: 'Seules les commandes non collectées seront supprimées.',
                            icon: 'warning',
                            showCancelButton: true,
                            customClass: {
                                confirmButton: 'btn btn-danger ms-2'
                            },
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Oui',
                            cancelButtonText: 'Non'

                            }).then((result) => {

                            if (result.isConfirmed) {

                                printReclamationClient([IDRETOURCLIENT], true)
                                reinitialiserInterface()
                            }
                        })
                    }

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        _('btnValideBonRecla').addEventListener('click', function(){

            if (_('dateReclamation').value == null || _('dateReclamation').value == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir la date de la réclamation, SVP !')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', validerBonReclamation, null, title = '', { sousTitre: '', infoJNL: "CREATION/MODIFICATION DE BON DE RETOUR CLIENT", typeJNL : 3, CodeDroit: "DV_ValiderReclamationClient" })
                
        })
    </script>

    <!-- script de suppression des lignes -->
    <script>

        var listeLignesSelectionne

        function supprimerLigneRecla(){

            if (IDRETOURCLIENT == null || IDRETOURCLIENT == 0) {
                
                notif('danger', 'Erreur', 'Aucune réclamation saisie')
                return 0
            }

            if (listeLignesSelectionne.length == 0) {
                
                notif('danger', 'Erreur', 'Aucune ligne de réclamation sélectionnée')
                return 0
            }

            $.ajax({

                url: '{{ route("suppReclamation") }}',
                type: 'POST',
                dataType: 'json',
                data: { 
                    
                    IDRETOURCLIENT : IDRETOURCLIENT,
                    listeLigne : listeLignesSelectionne,
                    _token : '{{  csrf_token() }}'
                },
                beforeSend : progressHandler(),
                success: function(response) {

                    if (response.success == 1) {
                        
                        notif('danger', 'Erreur', response.msg)
                    }else if(response.success == 2){

                        notif('success', 'Succès', 'Suppression des lignes éffectuées')
                        listeLigneRecla(IDRETOURCLIENT)
                    }else{

                        notifError(response.msg)
                    }

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

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

            let IDRECLAMATION_LIGNE = $(this).attr('data-id')
            listeLignesSelectionne = [IDRECLAMATION_LIGNE]

            confirmMdp('{{ csrf_token() }}', supprimerLigneRecla, null)
        })
    </script>

    <!-- Script réinitialiser -->
    <script>

        function reinitialiserInterface(){

            _('IDFACTURECLIENT').value = 0
            _('NomClient').innerHTML = ""
            _('dateFacture').innerHTML = ""
            
            remplirChampDate("today", 'dateReclamation')
            _('ReferenceBordereauRetour').value = ""
            _('CommentaireRetourClient').value = ""

            _('btnAvoirTteFacture').setAttribute('disabled', '')

            _('libNbreLigne').innerHTML = 0
            _('libTotalHT').innerHTML = 0
            _('libRemise').innerHTML = 0
            _('libTVA').innerHTML = 0
            _('libBIC').innerHTML = 0
            _('libTotalTTC').innerHTML = 0
            _('NumeroFactureClient').value = ""
            _('NumeroFactureClient').removeAttribute('disabled')

            chargerTableReclaLigne([])

            history.replaceState({}, "Réclamation", window.location.href.split('?')[0])
        }
        
        _('btnReinitialiser').addEventListener('click', function(){

            Swal.fire({

                title: 'Voulez-vous annuler la réclamation en cours ?',
                // text: 'Seules les commandes non collectées seront supprimées.',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

                }).then((result) => {

                if (result.isConfirmed) {

                    reinitialiserInterface()
                }
            })
        })

        // window.addEventListener('beforeunload', function (event) {
        //     // Personnalisez le message affiché dans la boîte de dialogue de confirmation
        //     var confirmationMessage = 'Êtes-vous sûr de vouloir quitter cette page ?';
            
        //     // Certaines versions de navigateurs nécessitent d'affecter directement à event.returnValue
        //     event.returnValue = confirmationMessage; 

        //     // Pour d'autres navigateurs
        //     return confirmationMessage;
        // });

        // Fonction pour sauvegarder l'état actuel avant l'actualisation
        // function sauvegarderEtat() {
        //     // Exemple : Sauvegarde de données dans le localStorage
        //     // localStorage.setItem('etat', 'données importantes');
        //     history.replaceState({ IDRETOURCLIENT : 17}, '', window.location.href);
        //     alert('L\'état a été sauvegardé avant l\'actualisation.');
        // }

        // // Interception de l'événement beforeunload pour personnaliser l'actualisation
        // window.addEventListener('beforeunload', function (event) {
        //     // Sauvegarde de l'état actuel
        //     sauvegarderEtat();

        //     // Personnalisation de l'actualisation : afficher un message de confirmation
        //     var confirmationMessage = 'Êtes-vous sûr de vouloir rafraîchir cette page ? Les modifications non enregistrées seront perdues.';
        //     event.returnValue = confirmationMessage; // Pour certains navigateurs
        //     return confirmationMessage; // Pour d'autres navigateurs
        // });

        // // Fonction personnalisée pour l'actualisation
        // function actualiserPage() {
        //     // Action personnalisée avant l'actualisation
        //     sauvegarderEtat();

        //     // Actualisation de la page
        //     location.reload();
        // }

        // // Désactivation de l'actualisation par défaut (exemple : en interceptant la touche F5)
        // document.addEventListener('keydown', function (event) {
        //     if (event.key === 'F5' || (event.ctrlKey && event.key === 'r')) {
        //         event.preventDefault();
        //         actualiserPage();
        //     }
        // });
    </script>

    <!-- Script modification des lignes -->
    <script>

        function modifierQte(elmt, IDRETOURCLIENT_LIGNE, valeur, rubrique) {

            $.ajax({
                url: '{{ route("updateLigneReclamationClient") }}',
                type: 'POST',
                dataType: 'json',
                data: { 
                    IDRETOURCLIENT_LIGNE : IDRETOURCLIENT_LIGNE,
                    valeur : valeur,
                    rubrique : rubrique,
                    _token : '{{ csrf_token() }}'
                },
                success: function(response) {

                    if (response.success != 0) {
                        
                        if ((response.totaux && response.totaux.length > 0) || rubrique === 'StatutRetourCLientLigne') {
                            updateTotals(response.totaux);
                            let QteValide = determineQteValide(elmt, rubrique, valeur);
                            
                            if (QteValide !== null || rubrique === 'StatutRetourCLientLigne') {
                                updateRows(response.IDRETOURCLIENT_LIGNE || [{IDRETOURCLIENT_LIGNE}], QteValide, rubrique, valeur, IDRETOURCLIENT_LIGNE);
                            }
                        }
    
                        handleResponse(response, elmt);
                    }else{

                        notif('danger', 'Erreur', response.msg)

                        if (rubrique == 'StatutRetourCLientLigne') {

                            updateRows([{IDRETOURCLIENT_LIGNE}], null, rubrique, 1, IDRETOURCLIENT_LIGNE, 1)
                        }
                    }
                },
                error: function(error) {
                    notifError(error);
                }
            });
        }

        function updateTotals(totals) {
            if (totals && totals.length > 0) {
                const total = totals[0];
                _('libNbreLigne').innerHTML = formatNumber(total.nbreLigne);
                _('libTotalHT').innerHTML = formatNumber(total.Tx_HT);
                _('libRemise').innerHTML = formatNumber(total.Tx_Remise);
                _('libTVA').innerHTML = formatNumber(total.Tx_Taxe);
                _('libBIC').innerHTML = formatNumber(total.Tx_BIC);
                _('libTotalTTC').innerHTML = formatNumber(total.Tx_TTC);
            }
        }

        function determineQteValide(elmt, rubrique, valeur) {
            let QteValide = null;
            if (rubrique === 'QteValide') {
                QteValide = elmt.val();
            }
            if (rubrique === 'StatutRetourCLientLigne' && valeur === 3) {
                QteValide = 0;
            }
            return QteValide;
        }

        function updateRows(listeLigneIDRETOURCLIENT_LIGNE, QteValide, rubrique, valeur, IDRETOURCLIENT_LIGNE, newValueSelect = null) {

            listeLigneIDRETOURCLIENT_LIGNE.forEach(function(value) {

                let indexLigneIDRETOURCLIENT_LIGNE = tableReclamationLigne.data().toArray().findIndex(item => item.IDRETOURCLIENT_LIGNE == value.IDRETOURCLIENT_LIGNE);
                
                if (indexLigneIDRETOURCLIENT_LIGNE !== -1) {
                    
                    let newData = tableReclamationLigne.row(indexLigneIDRETOURCLIENT_LIGNE).data();

                    newData.QteReclamation = $('.QteReclamationInput'+'[data-id="' + IDRETOURCLIENT_LIGNE + '"]').val()
                    QteValide = QteValide === null ? newData.QteValide : QteValide;

                    if (rubrique == 'StatutRetourCLientLigne' && valeur == 3) {
                        
                        QteValide = 0
                    }

                    newData.QteValide = QteValide;
                    newData.QteValideInput = createQteValideInput(QteValide, value.IDRETOURCLIENT_LIGNE, rubrique, valeur, newData.IDCAMPAGNEUG_PRODUIT);
                    newData.TotalHTRetour = QteValide * newData.PrixCessionHT;
                    newData.TotalHTRetourFormat = formatNumber(newData.TotalHTRetour);

                    newData.StatutRetourCLientLigne = updateSelectValue(newData.StatutRetourCLientLigneSelect, 'select.selectStatut', value.IDRETOURCLIENT_LIGNE, newValueSelect);
                    newData.StatutRetourCLientLigneSelect = $(newData.StatutRetourCLientLigne).prop('outerHTML');

                    newData.IDRETOURCLIENT_MOTIF = updateSelectValue(newData.IDRETOURCLIENT_MOTIFSelect, 'select.selectMotif', value.IDRETOURCLIENT_LIGNE);
                    newData.IDRETOURCLIENT_MOTIFSelect = $(newData.IDRETOURCLIENT_MOTIF).prop('outerHTML');

                    tableReclamationLigne.row(indexLigneIDRETOURCLIENT_LIGNE).data(newData).draw(false);
                    
                }
            });
        }

        function createQteValideInput(QteValide, IDRETOURCLIENT_LIGNE, rubrique, valeur, IDCAMPAGNEUG_PRODUIT) {
            return '<input type="number" class="input-edit form-control text-center QteValideInput" style="width: 100px" value="' + QteValide + '" data-id="' + IDRETOURCLIENT_LIGNE + '" ' + (((rubrique == 'StatutRetourCLientLigne' && valeur == 3) || IDCAMPAGNEUG_PRODUIT > 0) ? 'disabled' : '') + '>';
        }

        function updateSelectValue(selectHTML, selectClass, IDRETOURCLIENT_LIGNE, newValueSelect = null) {
            let $select = $(selectHTML);

            let selectedValue = newValueSelect == null ? $(selectClass + '[data-id="' + IDRETOURCLIENT_LIGNE + '"]').val() : newValueSelect;
            $select.find('option').removeAttr('selected');
            $select.find('option[value="' + selectedValue + '"]').attr('selected', 'selected');
            return $select;
        }

        function handleResponse(response, elmt) {
            if (response.success === 1) {
                notif('danger', 'Erreur', response.msg);
                elmt.val(response.exQte).trigger('change');
                elmt.select();
            } else if (response.success === 2) {
                // handle case 2
            } else if (response.success === 3) {
                // handle case 3
            } else {
                notifError(response.msg);
            }
        }

        // UPDATE Qté réclamé
        $(document).on('change', '.QteReclamationInput', function(){

            let elmt = $(this) 

            let IDRETOURCLIENT_LIGNE = $(this).attr('data-id')
            let valeur = $(this).val() 

            modifierQte(elmt, IDRETOURCLIENT_LIGNE, valeur, 'QteReclamation')
        })


        // UPDATE Qté validé
        $(document).on('change', '.QteValideInput', function(){

            let elmt = $(this)
            let IDRECLAMATION_LIGNE = $(this).attr('data-id')
            let IDRETOURCLIENT_LIGNE = $(this).attr('data-id')
            
            let valeur = $(this).val() 

            modifierQte(elmt, IDRETOURCLIENT_LIGNE, valeur, 'QteValide')
        })

        // UPDATE IDRETOURCLIENT_MOTIF
        $(document).on('change', '.selectMotif', function(){

            let elmt = $(this)
            let IDRECLAMATION_LIGNE = $(this).attr('data-id')
            let IDRETOURCLIENT_LIGNE = $(this).attr('data-id')
            let valeur = $(this).val() 

            modifierQte(elmt, IDRETOURCLIENT_LIGNE, valeur, 'IDRETOURCLIENT_MOTIF')
        })

        // UPDATE STATUT
        $(document).on('change', '.selectStatut', function(){

            let elmt = $(this)
            // let IDRECLAMATION_LIGNE = $(this).attr('data-id')
            let IDRETOURCLIENT_LIGNE = $(this).attr('data-id')
            let valeur = $(this).val()

            let ligne = $(this).closest('tr') 

            let data = tableReclamationLigne.row(ligne).data()            

            if (data.IDCAMPAGNEUG_PRODUIT > 0) {
                
                Swal.fire({

                    title: 'Confirmer',
                    text: 'Modifier le statut de cette ligne implique de modifier toutes les autres lignes de ce produit liées à cette campagne.',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-danger ms-2'
                    },
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Non'

                    }).then((result) => {

                    if (result.isConfirmed) {

                        updateStatutLignes([IDRETOURCLIENT_LIGNE], valeur)
                    }
                })
            }else{

                // if (valeur == 2 && data.QteValide == 0) {
                    
                //     $(this).val(data.StatutRetourCLientLigne)
                //     notif('danger', 'Erreur', 'Veuillez renseigner une quantité validée pour le statut accepté')
                //     return 0
                // }

                modifierQte(elmt, IDRETOURCLIENT_LIGNE, valeur, 'StatutRetourCLientLigne')
            }
        })
    </script>

    <!-- Script pour un avoir sur toute la facture -->
    <script>

        _('btnAvoirTteFacture').addEventListener('click', function(){

            $('#modalAvoirSurTteFacture').modal('show')
        })

        _('btnValiderAvoirTteFacture').addEventListener('click', function(){

            if (_('IDFACTURECLIENT').value == 0 || _('IDFACTURECLIENT').value.replace(/\s/g, '') == '') {
                
                $('#modalAvoirSurTteFacture').modal('hide')
                notif('danger', 'Erreur', 'Veuillez sélectionner une facture')
                _('btnAvoirTteFacture').setAttribute('disabled', '')

                return 0
            }

            if (_('IDRETOURCLIENT_MOTIF2').value == 0) {
                
                notif('danger', 'Erreur', 'Renseigner le motif de la réclamation SVP !')
                return 0
            }

            $.ajax({

                url : "{{ route('avoirSurTteFacture') }}",
                type : 'POST',
                data : {

                    IDRETOURCLIENT : IDRETOURCLIENT,
                    IDFACTURECLIENT : _('IDFACTURECLIENT').value,
                    dateReclamation : _('dateReclamation').value,
                    IDRETOURCLIENT_MOTIF : _('IDRETOURCLIENT_MOTIF2').value,
                    CommentRetourLigne : _('commentaireAvoirTteFacture').value,
                    _token : '{{ csrf_token() }}'
                },
                dataType : 'json',
                beforeSend : progressHandler(),
                success : function(response){

                    if (response.success == 2) {
                        
                        notif('success', 'Succès', 'Réclamation créé avec succès')
                        $('#modalAvoirSurTteFacture').modal('hide')
                        
                        IDRETOURCLIENT = response.IDRETOURCLIENT
                        listeLigneRecla(IDRETOURCLIENT, true)
                        completeHandler()

                    }else if(response.success == 0){

                        notifError('Échec de l\'opération.')
                        completeHandler()
                    }else{

                        notif('danger', 'Erreur', response.msg)
                        completeHandler()
                    }
                },
                error : function(error){

                    notifError('Échec de l\'opération.')
                    completeHandler()
                }
            })
        })

        $(document).on('click','#btn-export-reclamation-client',function(){
            var data =  getCleanedTableData('tableReclamationLigne')
            const filename =file_name("RECLAMATION_CLIENT");
            download_excel_file('{{route("reclamation_client.export")}}', data, filename)
        })
    </script>

@endsection