@extends('models')
@section('titre-page', 'Listing bon de retour fournisseur')
@section('content-body')
    <style>
        .height-input {
            height: 2.5rem !important;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        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;
        }

        input[type="text"] {
            text-align: center
        }

        @media (min-width: 1200px) {
            .modal-xl {
                --bs-modal-width: 1260px !important;
            }
        }

        .modal-open-noscroll {
            overflow: hidden;
        }

        #tableDetailBl tbody tr:not(.rupture):hover {
            background-color: #f0f0f0;
            /* Couleur de fond lors du survol */
        }
    </style>

    <!-- 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);">Achats</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Listing bon de retour</li>
                        </ol>
                    </nav>
                </div>


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

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row px-4">

                        <div class="col-xl-3 col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                    <i class="bx bx-dice-3" style="font-size: 24px"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-primary fw-semibold" id="nbreLigne"></p>
                                <span class="text-muted fs-12">Nbre Ligne</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-light text-default">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 fw-semibold" id="totalHTTT"></p>
                                <span class="text-muted fs-12">Total HT</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-sm-3 col-1 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-success-transparent">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-success fw-semibold" id="totalTVATT"></p>
                                <span class="text-muted fs-12">Total TVA</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-sm-3 col-1 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-info-transparent">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-info fw-semibold" id="totalTTCTT"></p>
                                <span class="text-muted fs-12">Total TTC</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class=" col-xl-12">
            <div class=" card custom-card">
                <div class=" card-body pe-0 pe-0">
                    <div class="row w-100">
                        <form id="formFiltre">
                            <div class="row">
                                <div class=" col-xl-11 col-lg-11 col-md-10">
                                    <div class=" row">
                                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                                            <input type="text" class="form-control text-center" name="datetimes"
                                                id="filtrePeriode" />
                                        </div>
                                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Bureau d'achat</p>
                                            <select class="form-select" id="IDBUREAUACHAT">

                                            </select>
                                        </div>
                                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Mode d'expédition</p>
                                            <select class="form-select" id="IDMODEEXPEDITION">

                                            </select>
                                        </div>
                                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Fournisseur</p>
                                            <select class="form-select Pselect2" id="IDFOURNISSEUR">

                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Motif</p>
                                            <select class="form-select Pselect2" id="IDMOTIF">

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class=" col-xl-1 d-flex justify-content-center">
                                    <div class="col-xl-1 col-lg-1 col-md-1 mb-0 pt-1 d-flex flex-fill">
                                        <label class="btn btn-primary btn-wave w-100 float-end mt-2" id="btnFiltreTable">
                                            <i class="ri-search-line fs-16" style="cursor:pointer;"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card custom-card">
        <div class="card-body">
            <ul class="nav nav-pills justify-content-start nav-style-3 mb-3" role="tablist" id="navMenu">
                <li class="nav-item">
                    <a class="nav-link active " data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#tabRetourEnAttent" aria-selected="true" id="navAttente">LISTE DES RETOURS EN
                        ATTENTES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page" href="#tabRetourValide"
                        aria-selected="true" id="navReclamation">LISTE DES BONS DE
                        RETOUR</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane show active text-muted table-responsive" id="tabRetourEnAttent" role="tabpanel">
                    <div class="row justify-content-end mb-2">

                        <div class="offset-lg-8 col-lg-1 mx-0 px-0">
                            <a class="modal-effect" data-bs-effect="effect-slide-in-right" data-bs-toggle="modal"
                                href="#modalNewBonAttente">
                                <button type="button"
                                    class="btn btn-secondary-light btn-wave d-flex justify-content-center w-100"
                                    id="btnNewBonAttente">
                                    <i class=" bx bx-plus-medical mt-1 me-1"></i>Ajouter
                                </button>
                            </a>
                        </div>
                        <div class="col-lg-2 mx-1 px-0">
                            <button type="button"
                                class="btn btn-success-light btn-wave d-flex justify-content-center w-100"
                                id="btnValideBonAttente">
                                <i class='bx bxs-check-circle mt-1 me-1'></i>Valider la selection
                            </button>
                        </div>

                        <div class="col-lg-2 mx-1 px-0">
                            <button type="button"
                                class="btn btn-success-light btn-wave d-flex justify-content-center w-100"
                                id="btn-export-retour-attente">
                                <i class='ri ri-file-excel-2-line text-succes me-1'></i>Exporter en excel
                            </button>
                        </div>

                        <div class="col-lg-1 mx-0 px-0">
                            <button type="button"
                                class="btn btn-danger-light btn-wave d-flex justify-content-center w-100"
                                id="btnSupprimeBonAttente">
                                <i class='bx bx-trash  mt-1 me-1'></i>Supprimer
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <table class="tablehover table table-striped text-nowrap w-100 openModalProduit"
                            id="tableListeRtourAttente">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center text-white" data-column="action">
                                        <input class="form-check-input me-4" type="checkbox" id="checkAllAttente">#
                                    </th>
                                    <th data-class="text-center" class="text-center"
                                        data-column="NomBureauAchatConcerne">Agence</th>
                                    <th data-class="text-center" class="text-center" data-column="DateRetourFseurLigne">
                                        Date</th>
                                    <th data-class="text-center" class="text-center" data-column="CodeCipProduit1">Code
                                        produit</th>
                                    <th data-class="text-center" class="text-center" data-column="CodeTedisProduit">Code
                                        Produit Interne</th>
                                    <th data-class="text-start" data-column="DesignationProduit">Désignation</th>
                                    <th data-class="text-center" class="text-center" data-column="QteReclamation">Qté
                                        <br> Réclamée</th>
                                    <th data-class="text-center" class="text-center" data-column="CodeMotifRetour">Code
                                        du Motif</th>
                                    <th data-class="text-start" class="text-center" data-column="LibelleMotifRetour">
                                        Motif de réclamation</th>
                                    <th data-class="text-center" class="text-center" data-column="NumeroTracabilite">NTSP
                                    </th>
                                    <th data-class="text-center" class="text-center" data-column="NumeroLotProduit">N°
                                        Lot</th>
                                    <th data-class="text-center" class="text-center" data-column="DatePeremption">Date de
                                        <br> Péremption</th>
                                    <th data-class="text-center" class="text-center" data-column="NumeroBonLivraison">N°
                                        Bon livraison</th>
                                    <th data-class="text-start" class="text-center"
                                        data-column="CommentaireRetourFseurLigne">Commentaire</th>
                                    <th data-class="text-start" class="text-center" data-column="NomBureauAchat">Bureau
                                        d'achat</th>
                                    <th data-class="text-start" class="text-center" data-column="NomFournisseur">
                                        Fournisseur</th>
                                    <th data-class="text-start" class="text-center" data-column="LibelleModeExpedition">
                                        Mode d'expédition</th>
                                    <th data-class="text-end" class="text-center" data-column="TotalHTRFL">Total H.T</th>
                                    <th data-class="text-end" class="text-center" data-column="TotalTaxeRFL">Total Taxe
                                    </th>
                                    <th data-class="text-end" class="text-center" data-column="TotalTTCRFL">Total TTC
                                    </th>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </div>
                <div class="tab-pane text-muted table-responsive" id="tabRetourValide" role="tabpanel">
                    <div class="row justify-content-end mb-2">
                        <div class="col-lg-1 mx-0 px-0">
                            <button type="button"
                                class="btn btn-warning-light btn-wave d-flex justify-content-center w-100"
                                id="btnPrintReclamation">
                                <i class='bx bxs-printer mt-1 me-1'></i> &nbsp;Imprimer
                            </button>
                        </div>

                        <div class="col-lg-2 mx-1 px-0">
                            <button type="button"
                                class="btn btn-success-light btn-wave d-flex justify-content-center w-100"
                                id="btn-export-bon-retour">
                                <i class='ri ri-file-excel-2-line text-succes me-1'></i>Exporter en excel
                            </button>
                        </div>

                    </div>
                    <div class="row">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableListeRtourValide">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center text-white" data-class="text-center" data-column="action">
                                        <input class="form-check-input me-4" type="checkbox"
                                            id="checkAllBonRetourValide">Actions
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="DateRetourFseur">Date
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="NumeBonRetourFseur">N°
                                        Réclamation</th>
                                    <th class="text-center" data-class="text-center" data-column="NumeroBonLivraison">N°
                                        Facture / BL</th>
                                    <th class="text-center" data-class="text-center" data-column="NomBureauAchat">Bureau
                                        d'Achat</th>
                                    <th class="text-center" data-class="text-start" data-column="NomFournisseur">
                                        Fournisseur</th>
                                    <th class="text-center" data-class="text-center" data-column="LibelleModeExpedition">
                                        Mode d'expédition</th>
                                    <th class="text-center" data-class="text-end" data-column="TotalHTBonRetourFseur">
                                        Total H.T</th>
                                    <th class="text-center" data-class="text-end" data-column="TotalTaxeBonRetourFseur">
                                        Total Taxe</th>
                                    <th class="text-center" data-class="text-end" data-column="TotalTTCBonRetourFseur">
                                        Total TTC</th>
                                    <th class="text-center" data-class="text-center" data-column="NumeroCampagneUG">N°
                                        Campagne UG</th>
                                    <th data-column="NomLaboratoire">
                                        Laboratoire</th>
                                </tr>
                            </thead>
                        </table>

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

    {{-- Modal --}}
    <div class="modal fade" id="modalNewBonAttente">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Réclamation fournisseur</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="formNewBonAttente">
                        <div class=" row">
                            <input type="text" name="" id="idTrace" hidden>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">NTSP :</p>
                                <input type="text" class="form-control" name="ntspAttente" id="ntspAttente">
                            </div>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">N° Lot :</p>
                                <input type="text" class="form-control" name="numLotAttente" id="numLotAttente"
                                    readonly>
                            </div>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Date peremption :</p>
                                <input type="date" class="form-control" name="datePeremptionAttente"
                                    id="datePeremptionAttente" readonly>
                            </div>
                            <div class="col-xl-8 mb-2">
                                <p class="mb-0 text-muted">Produit :</p>
                                <input type="text" class="form-control" name="produitAttente" id="produitAttente"
                                    readonly>
                            </div>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Qte en stock :</p>
                                <input type="text" class="form-control" name="qteStockAttente" id="qteStockAttente"
                                    readonly>
                            </div>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Qte réclammée :</p>
                                <input type="text" class="form-control" name="qteReclammeAttente"
                                    id="qteReclammeAttente" value="0">
                            </div>
                            <div class="col-xl-8 mb-2">
                                <p class="mb-0 text-muted">Motif :</p>
                                <select name="retourFseurSelectAttente" class="form-select"
                                    id="retourFseurSelectAttente"></select>
                            </div>
                            <div class="col-xl-12 mb-2">
                                <p class="mb-0 text-muted">Commentaire :</p>
                                <textarea class="form-control" id="text-area" rows="1" style="height: 231px;" id="commentaireAttente"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" data-bs-dismiss="modal" id="btnCloseBonAttente">
                        <i class='bx bxs-x-circle'></i> &nbsp;
                        Fermer
                    </button>
                    <button class="btn btn-success-light" id="btnAjoutNewBonAttente">
                        <i class='bx bxs-check-circle'></i>&nbsp;Enregistrer
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal detail reclamation --}}
    <div class="modal fade " id="modalRetourValide">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Détail réclamation fournisseur</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableListeDetailRtourValide">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center text-white">N° à Rappeler</th>
                                    <th class="text-center text-white">Code produit</th>
                                    <th class="text-center text-white">Code Produit TEDIS</th>
                                    <th class="text-center text-white">Désignation</th>
                                    <th class="text-center text-white">Qté Réclamée</th>
                                    <th class="text-center text-white">Code du Motif</th>
                                    <th class="text-center text-white">Motif de réclamation</th>
                                    <th class="text-center text-white">Commentaire</th>
                                    <th class="text-center text-white">PGHT</th>
                                    <th class="text-center text-white">P. Revient</th>
                                    <th class="text-center text-white">NTSP</th>
                                    <th class="text-center text-white">N° Lot</th>
                                    <th class="text-center text-white">Date Péremption</th>
                                    <th class="text-center text-white">TVA</th>
                                    <th class="text-center text-white">Total HT</th>
                                    <th class="text-center text-white">Total TVA</th>
                                    <th class="text-center text-white">Total TTC</th>

                                </tr>
                            </thead>
                        </table>

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

    <div class="modal fade " id="modalEditReclamation">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Réclamation fournisseur</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="formReclamationEdit">
                        <input type="text" name="idRetourFseur" id="idRetourFseur" hidden>
                        <div class="row input-edit rounded mb-2 p-1">
                            <div class="col-xl-2 col-lg-2 col-md-4 mb-2">
                                <p class="mb-0 text-muted">Date&nbsp;:</p>
                                <input type="date" class="form-control text-center" name="date_edit"
                                    id="date_edit" />
                            </div>
                            <div class="col-xl-2 col-lg-2 col-md-4 mb-2">
                                <p class="mb-0 text-muted">Bureau d'achat</p>
                                <select class="form-select" id="IDBUREAUACHAT_edit" name="IDBUREAUACHAT_edit">

                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-2 col-md-4 mb-2">
                                <p class="mb-0 text-muted">Mode d'expédition</p>
                                <select class="form-select" id="IDMODEEXPEDITION_edit" name="IDMODEEXPEDITION_edit"
                                    disabled>

                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-2 col-md-4 mb-2">
                                <p class="mb-0 text-muted">Fournisseur</p>
                                <select class="form-select" id="IDFOURNISSEUR_edit" name="IDFOURNISSEUR_edit">

                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-2 col-md-4 mb-2">
                                <p class="mb-0 text-muted">N° Conteneur / Vol :</p>
                                <input type="text" class="form-control text-center" name="numConteneurVol_edit"
                                    id="numConteneurVol_edit" readonly />
                            </div>
                            <div class="col-xl-2 col-lg-2 col-md-4 mb-2">
                                <p class="mb-0 text-muted">N° Facture / BL :</p>
                                <input type="text" class="form-control text-center" name="numFactureBl_edit"
                                    id="numFactureBl_edit" readonly />
                            </div>
                        </div>
                    </form>

                    <div class="row table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableEditReclamation">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center text-white">N° Ligne</th>
                                    <th class="text-center text-white">Code produit</th>
                                    <th class="text-center text-white">Code Produit TEDIS</th>
                                    <th class="text-center text-white">Désignation</th>
                                    <th class="text-center text-white">Qté Facturée</th>
                                    <th class="text-center text-white">Qté Livrée</th>
                                    <th class="text-center text-white">Qté Réclamée</th>
                                    <th class="text-center text-white">Motif de réclamation</th>
                                    <th class="text-center text-white">PGHT</th>
                                    <th class="text-center text-white">P. Revient</th>
                                    <th class="text-center text-white">N° Traçabilité</th>
                                    <th class="text-center text-white">N° Lot</th>
                                    <th class="text-center text-white">Date Péremption</th>
                                    <th class="text-center text-white">TVA</th>
                                    <th class="text-center text-white">Total HT</th>
                                    <th class="text-center text-white">Total TVA</th>
                                    <th class="text-center text-white">Total TTC</th>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </div>
                <div class=" modal-footer row">
                    <div class="row">

                        <div class="offset-xl-3 col-xl-3 text-end">
                            <button class="btn btn-success-light" id="btnValiderReclamation">
                                <i class='bx bxs-check-circle'></i>&nbsp;Valider la réclamation
                            </button>
                        </div>

                        <div class=" col-xl-2">
                            <button class="btn btn-danger w-100" id="btnAnnulerModifReclamation">
                                <i class='bx bxs-x-circle'></i> &nbsp;
                                Annuler
                            </button>
                        </div>

                        <div class=" col-xl-2">

                            <button class="btn btn-warning w-100" id="btnImprimerReclamtion">
                                <i class='bx bxs-printer'></i> &nbsp;
                                Imprimer
                            </button>
                        </div>

                        <div class=" col-xl-2 ">
                            <button class="btn btn-danger-light w-100" id="btnSupprimerReclamation">
                                <i class='bx bxs-trash'></i> &nbsp;
                                Supprimer
                            </button>
                        </div>
                    </div>

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

    <div class="modal fade" id="modalEtatPrint" tabindex="-1" aria-labelledby="exampleModalSmLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalSmLabel">Choix des Etats
                    </h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="primaryRadio" id="checkReclame"
                            value="1" checked>
                        <label class="form-check-label" for="checkReclame">
                            Bon de réclamation
                        </label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="primaryRadio" id="checkAvis"
                            value="2">
                        <label class="form-check-label" for="checkAvis">
                            Avis de réclamation
                        </label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="primaryRadio" id="checkAll"
                            value="3">
                        <label class="form-check-label" for="checkAll">
                            Bon de réclamation <br> + Avis de réclamation
                        </label>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <button class="btn btn-warning-light w-100 fs-18" id="btnValideImprime">
                        <i class='bx bxs-printer mt-1 me-1'></i></i> Imprimer
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        // Animated modals 
        /* showing modal effects */
        document.querySelector(".modal-effect").addEventListener('click', function(e) {
            e.preventDefault();
            let effect = this.getAttribute('data-bs-effect');
            document.querySelector("#modalNewBonAttente").classList.add(effect);

            $("#formNewBonAttente")[0].reset()
            $("#ntspAttente").select()
            $("#ntspAttente").focus()
        });

        /* hide modal effects */
        document.getElementById("modalNewBonAttente").addEventListener('hidden.bs.modal', function(e) {
            let removeClass = this.classList.value.match(/(^|\s)effect-\S+/g);
            removeClass = removeClass[0].trim();
            this.classList.remove(removeClass);
        });
        // Animated modals

        // ::::::::: Modal détail
        // Animated modals 
        /* showing modal effects */
        // document.querySelector("").addEventListener('click', function(e) {
        //     e.preventDefault();
        //     let effect = this.getAttribute('data-bs-effect');
        //     document.querySelector("#modalRetourValide").classList.add(effect);

        // });


        /* hide modal effects */
        document.getElementById("modalRetourValide").addEventListener('hidden.bs.modal', function(e) {
            let removeClass = this.classList.value.match(/(^|\s)effect-\S+/g);
            removeClass = removeClass[0].trim();
            this.classList.remove(removeClass);
        });
        document.getElementById("modalEditReclamation").addEventListener('hidden.bs.modal', function(e) {
            let removeClass = this.classList.value.match(/(^|\s)effect-\S+/g);
            removeClass = removeClass[0].trim();
            this.classList.remove(removeClass);
        });
        // Animated modals

        $(function() {
            dateRangeInput('input[name="datetimes"]', true, "DD/MM/YYYY HH:mm")
            // $().daterangepicker({
            //     timePicker: true,
            //     // startDate: moment().startOf('day'),
            //     // endDate: moment().endOf('day'),
            //     "locale": {
            //         "format": ,
            //         "separator": " - ",
            //         "applyLabel": "Appliquer",
            //         "cancelLabel": "Annuler",
            //         "fromLabel": "From",
            //         "toLabel": "To",
            //         "customRangeLabel": "Custom",
            //         "weekLabel": "W",
            //         "daysOfWeek": [
            //             "Dim",
            //             "Lun",
            //             "Mar",
            //             "Mer",
            //             "Jeu",
            //             "Ven",
            //             "Sam"
            //         ],
            //         "firstDay": 2
            //     },
            // });
        })

        function chargerSelectBureauAchat($IDBUREAUACHAT = null) {

            $.ajax({

                url: '{{ route('listingBureauAchatSimple') }}',
                beforeSend: progressHandler(),
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    if (response.success == 0) {
                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDBUREAUACHAT').html('')
                        $('#IDBUREAUACHATSUG').html('')
                        $('#bureauAchatEdit').html('')
                        $('#IDBUREAUACHAT_edit').html('')
                        $('#IDBUREAUACHAT').append('<option value="0">TOUS</option>')
                        $('#IDBUREAUACHATSUG').append('<option value="0">TOUS</option>')
                        $('#bureauAchatEdit').append('<option value="0">TOUS</option>')
                        $('#IDBUREAUACHAT_edit').append('<option value="0">TOUS</option>')

                        $.each(response.data, function(key, value) {
                            $('#IDBUREAUACHAT').append('<option value="' + value['IDBUREAUACHAT'] +
                                '">' + value['NomBureauAchat'] + '</option>')
                            $('#IDBUREAUACHATSUG').append('<option value="' + value['IDBUREAUACHAT'] +
                                '">' + value['NomBureauAchat'] + '</option>')
                            $('#bureauAchatEdit').append('<option value="' + value['IDBUREAUACHAT'] +
                                '">' + value['NomBureauAchat'] + '</option>')
                            $('#IDBUREAUACHAT_edit').append('<option value="' + value['IDBUREAUACHAT'] +
                                '">' + value['NomBureauAchat'] + '</option>')
                        })

                        if ($IDBUREAUACHAT != null) {
                            $('#IDBUREAUACHAT').val($IDBUREAUACHAT).change()
                        }
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectModeExpedition($IDMODEEXPEDITION = null) {

            $.ajax({

                url: '{{ route('listeModeExpeSimple') }}',
                beforeSend: progressHandler(),
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDMODEEXPEDITION').html('')
                        $('#IDMODEEXPEDITIONSUG').html('')
                        $('#modeExpEdit').html('')
                        $('#IDMODEEXPEDITION_edit').html('')
                        $('#IDMODEEXPEDITION').append('<option value="0">TOUS</option>')
                        $('#IDMODEEXPEDITIONSUG').append('<option value="0">TOUS</option>')
                        $('#modeExpEdit').append('<option value="0">TOUS</option>')
                        $('#IDMODEEXPEDITION_edit').append('<option value="0">TOUS</option>')

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

                            $('#IDMODEEXPEDITION').append('<option value="' + value[
                                    'IDMODEEXPEDITION'] + '">' + value['LibelleModeExpedition'] +
                                '</option>')
                            $('#IDMODEEXPEDITIONSUG').append('<option value="' + value[
                                    'IDMODEEXPEDITION'] + '">' + value['LibelleModeExpedition'] +
                                '</option>')
                            $('#modeExpEdit').append('<option value="' + value[
                                    'IDMODEEXPEDITION'] + '">' + value['LibelleModeExpedition'] +
                                '</option>')
                            $('#IDMODEEXPEDITION_edit').append('<option value="' + value[
                                    'IDMODEEXPEDITION'] + '">' + value['LibelleModeExpedition'] +
                                '</option>')
                        })

                        if ($IDMODEEXPEDITION != null) {
                            $('#IDMODEEXPEDITION').val($IDMODEEXPEDITION).change()
                        }
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectFournisseur($IDFOURNISSEUR = null) {

            $.ajax({

                url: '{{ route('listeFournisseurSimple') }}',
                beforeSend: progressHandler(),
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDFOURNISSEUR').html('')
                        $('#Fseur').html('')
                        $('#IDFOURNISSEUR_edit').html('')
                        $('#IDFOURNISSEUR').append('<option value="0">TOUS</option>')
                        $('#Fseur').append('<option value="0">TOUS</option>')
                        $('#IDFOURNISSEUR_edit').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {

                            $('#IDFOURNISSEUR').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                            $('#Fseur').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                            $('#IDFOURNISSEUR_edit').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                        })

                        if ($IDFOURNISSEUR != null) {
                            $('#IDFOURNISSEUR').val($IDFOURNISSEUR).change()
                        }

                        $('#IDFOURNISSEUR').select2()
                        $('#Fseur').select2()
                        $('#IDFOURNISSEUR_edit').select2({
                            dropdownParent : $("#modalEditReclamation")
                        })
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectRetourFseur($IDMOTIF = null) {

            $.ajax({
                url: '{{ route('listingRetoursFseurMotif') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    $('#IDMOTIF').html('')
                    $('#IDMOTIF').append('<option value="0">TOUS</option>')
                    $('#retourFseurSelectAttente').html('')
                    $('#retourFseurSelectAttente').append('<option value="0">TOUS</option>')

                    $.each(response.data, function(key, value) {
                        $('#IDMOTIF').append(
                            `<option value="${value["IDRETOURFSEUR_MOTIF"]}"> ${value["CodeMotifRetour"]} | ${value["LibelleMotifRetour"]}</option>`
                        )

                        $('#retourFseurSelectAttente').append(
                            `<option value="${value["IDRETOURFSEUR_MOTIF"]}"> ${value["CodeMotifRetour"]} | ${value["LibelleMotifRetour"]}</option>`
                        )
                    })

                    if ($IDMOTIF != null) {
                        $('#IDMOTIF').val($IDMOTIF).change()
                    }
                }
            })
        }

        function remplirInfo(nbreLigne, totalHTTT, totalTVATT, totalTTCTT) {
            $("#nbreLigne").text(formatNumber(nbreLigne))
            $("#totalHTTT").text(totalHTTT)
            $("#totalTVATT").text(totalTVATT)
            $("#totalTTCTT").text(totalTTCTT)
        }


        // chargerSelectRetourFseur()
        // chargerSelectBureauAchat()
        // chargerSelectModeExpedition()
        // chargerSelectFournisseur()



        var tableListeRtourAttente = $("#tableListeRtourAttente").DataTable({
            language: languageTable,
            columnDefs: [{
                    targets: [0, 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 14, 15, 16],
                    className: "text-center"
                },
                {
                    targets: [5],
                    className: "text-start"
                },
                {
                    targets: [17, 18, 19],
                    className: "text-end"
                },
            ],
            // pagingType: 'full_numbers',
            pageLength: 25,
            lengthChange: true,
            // order: [5, "desc"],

        })

        var tableListeRtourValide = $("#tableListeRtourValide").DataTable({
            language: languageTable,

            columnDefs: [{
                    targets: [0, 1, 2, 3, 4, 6, 10],
                    className: "text-center"
                },
                // {
                //     targets: [5],
                //     className: "text-start"
                // },
                {
                    targets: [7, 8, 9, ],
                    className: "text-end"
                },
            ],
            // pagingType: 'full_numbers',
            pageLength: 10,
            lengthChange: true,
            // order: [5, "desc"],

        })

        var tableListeDetailRtourValide = $("#tableListeDetailRtourValide").DataTable({
            language: languageTable,
            // scrollX: true,
            // fixedColumns: {
            //     leftColumns: 2
            // },
            columnDefs: [{
                    targets: [0, 1, 2, 4, 5, 6, 9, 10, 11, 12],
                    className: "text-center"
                },
                // {
                //     targets: [5],
                //     className: "text-start"
                // },
                {
                    targets: [7, 8, 9, 13, 14, 15],
                    className: "text-end"
                },
            ],
            // pagingType: 'full_numbers',
            pageLength: 10,
            lengthChange: true,
            // order: [5, "desc"],

        })
        placeboutonPreferenceColonne('tableListeDetailRtourValide', 'DetailRtourValideShowColonne', 2)
        recuperationPreferenceColonneUtilisateur('tableListeDetailRtourValide', 'DetailRtourValideShowColonne')
        $(document).on('click', '.DetailRtourValideShowColonne', function() {
            appliquerPreferenceColonne('tableListeDetailRtourValide', 'tableListeDetailRtourValide', $(this),
                'DetailRtourValideShowColonne')
        })


        var tableEditReclamation = $("#tableEditReclamation").DataTable({
            language: languageTable,
            // scrollX: true,
            // fixedColumns: {
            //     leftColumns: 2
            // },
            columnDefs: [{
                    targets: [0, 1, 2, 4, 5, 6, 9, 10, 11, 12, 13],
                    className: "text-center"
                },
                // {
                //     targets: [5],
                //     className: "text-start"
                // },
                {
                    targets: [8, 9, 14, 15, 16],
                    className: "text-end"
                },
            ],
            // pagingType: 'full_numbers',
            pageLength: 10,
            lengthChange: true,
            // order: [5, "desc"],

        })

        placeboutonPreferenceColonne('tableEditReclamation', 'tableEditReclamationShowColonne', 2)
        recuperationPreferenceColonneUtilisateur('tableEditReclamation', 'tableEditReclamationShowColonne')
        $(document).on('click', '.tableEditReclamationShowColonne', function() {
            appliquerPreferenceColonne('tableEditReclamation', 'tableEditReclamation', $(this),
                'tableEditReclamationShowColonne')
        })
    </script>

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

            var dataRecup = null
            await recupererValeurSession('filterMemory.filtreListeRetourFseur')
                .then(async (data) => {
                    dataRecup = data

                    var day = new Date().getDate().toString().padStart(2, '0');
                    var month = (new Date().getMonth() + 1).toString().padStart(2, '0');

                    var today = data != null ? data.filtrePeriode : day + '/' + month + '/' + new Date()
                        .getFullYear() + ' 00:00' + ' - ' + day + '/' + month + '/' +
                        new Date().getFullYear() + ' 23:59';

                    $("#filtrePeriode").val(today);

                    await chargerSelectRetourFseur(data ? data.IDRETOURFSEUR_MOTIF : 0)
                    await chargerSelectBureauAchat(data ? data.IDBUREAUACHAT : 0)
                    await chargerSelectFournisseur(data ? data.IDFOURNISSEUR : 0)
                    await chargerSelectModeExpedition(data ? data.IDMODEEXPEDITION : 0)

                    if (data != null && (data.versRetourFseur == 'true' || data.versRetourFseur ==
                        true)) {
                        $("#navMenu .nav-link").toggleClass("active")
                        $("#tabRetourEnAttent").removeClass("active show")
                        $("#tabRetourValide").addClass("active show")
                    }
                })

            // $("#btnFiltreTable").click()
            // listeBonAttente(
            //     $("#filtrePeriode").val(),
            //     $("#IDBUREAUACHAT").val(),
            //     $("#IDMODEEXPEDITION").val(),
            //     $("#IDFOURNISSEUR").val(),
            //     $("#IDMOTIF").val()
            // )
            afficheaDta()
            $(document).on("click", "#btnFiltreTable", function() {

                if (dataRecup != null && (dataRecup.versRetourFseur == true || dataRecup
                        .versRetourFseur == 'true')) {
                    $("#tableListeRtourValide_filter input").val(dataRecup.numeroRetoufseur).trigger(
                        "input")
                }

                let input = $("#tableListeRtourValide_filter input").val()
                let session = 'filterMemory.filtreListeRetourFseur'
                let valeurSession = {
                    "filtrePeriode": $("#filtrePeriode").val(),
                    "IDBUREAUACHAT": $("#IDBUREAUACHAT").val(),
                    "IDMODEEXPEDITION": $("#IDMODEEXPEDITION").val(),
                    "IDFOURNISSEUR": $("#IDFOURNISSEUR").val(),
                    "IDMOTIF": $("#IDMOTIF").val(),
                    "numeroRetoufseur": input,
                    "versRetourFseur": input == "" ? false : true,
                }

                modifierValeurSession("{{ csrf_token() }}", session, valeurSession)
                    .then(function(data) {
                        afficheaDta()
                    })
            })

            function afficheaDta() {
                activeTab = $("#navMenu .nav-link.active").attr("id");
                console.log(activeTab);


                if (activeTab == "navAttente") {
                    listeBonAttente(
                        $("#filtrePeriode").val(),
                        $("#IDBUREAUACHAT").val(),
                        $("#IDMODEEXPEDITION").val(),
                        $("#IDFOURNISSEUR").val(),
                        $("#IDMOTIF").val()
                    )
                } else {
                    listeReclamation(
                        $("#filtrePeriode").val(),
                        $("#IDBUREAUACHAT").val(),
                        $("#IDMODEEXPEDITION").val(),
                        $("#IDFOURNISSEUR").val()
                    )
                }
            }

            $("#navAttente").click(function() {

                listeBonAttente(
                    $("#filtrePeriode").val(),
                    $("#IDBUREAUACHAT").val(),
                    $("#IDMODEEXPEDITION").val(),
                    $("#IDFOURNISSEUR").val(),
                    $("#IDMOTIF").val()
                )
            })

            $("#navReclamation").click(function() {

                listeReclamation(
                    $("#filtrePeriode").val(),
                    $("#IDBUREAUACHAT").val(),
                    $("#IDMODEEXPEDITION").val(),
                    $("#IDFOURNISSEUR").val()
                )
            })

            /*::::::::: Debut bon attente ::::::::::::::::*/
            $("#modalNewBonAttente").on("click", "input", function() {
                $(this).select()
            })

            // 
            $("#ntspAttente").on("blur", function() {
                $.ajax({
                    url: "{{ route('inputNTSP') }}",
                    type: 'POST',
                    data: {
                        numero: $(this).val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {
                            $("#numLotAttente").val(response.donnee.NumeroLotProduit)
                            $("#datePeremptionAttente").val(response.donnee.DatePeremption)
                            $("#produitAttente").val(response.donnee.DesignationProduit)
                            $("#qteStockAttente").val(response.donnee.QteStock)
                            $("#idTrace").val(response.donnee.IDTracabiliteStock)
                            completeHandler()
                            return 0
                        }
                        completeHandler()
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#btnAjoutNewBonAttente").on("click", function() {
                let qteReclammeAttente = $("#qteReclammeAttente").val()
                let retourFseurSelect = $("#retourFseurSelectAttente").val()
                let commentaireAttente = $("#commentaireAttente").val()
                let idTrace = $("#idTrace").val()

                if (parseInt(qteReclammeAttente) == 0) {
                    alertSwal("Cocher un/plusieurs Bon avant de supprimer !!")
                    return 0
                }

                if (parseInt(retourFseurSelect) <= 0) {
                    alertSwal("Cocher un/plusieurs Bon avant de supprimer !!")
                    return 0
                }

                $.ajax({
                    url: "{{ route('createBonAttente') }}",
                    type: 'POST',
                    data: {
                        qteReclammeAttente: qteReclammeAttente,
                        retourFseurSelect: retourFseurSelect,
                        commentaireAttente: commentaireAttente,
                        idTrace: idTrace,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        //console.log(response)

                        if (response.error == false) {
                            $("#btnCloseBonAttente").click()
                            listeBonAttente(
                                $("#filtrePeriode").val(),
                                $("#IDBUREAUACHAT").val(),
                                $("#IDMODEEXPEDITION").val(),
                                $("#IDFOURNISSEUR").val(),
                                $("#IDMOTIF").val()
                            )
                            notifSuccess(response.messages)
                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        //console.log(response)
                        completeHandler()
                        notifError(response.messages)
                    }
                })
            })

            // Valider les bons selectionnés
            $("#btnValideBonAttente").click(function(param) {
                let data = listeLigneSelectionne("#tableListeRtourAttente", "#checkLigneAttente")
                if (data.length == 0) {
                    alertSwal("Cocher un/plusieurs Bon avant de valider !!")
                    return 0
                }

                confirmMdp('{{ csrf_token() }}', () => {
                        $.ajax({
                            url: "{{ route('validerBonAttente') }}",
                            type: 'POST',
                            data: {
                                data: data,
                                _token: "{{ csrf_token() }}"
                            },
                            beforeSend: progressHandler(),
                            dataType: 'json',
                            success: function(response) {
                                //console.log(response)

                                if (response.error == false) {
                                    completeHandler()
                                    listeBonAttente(
                                        $("#filtrePeriode").val(), 
                                        $("#IDBUREAUACHAT").val(), 
                                        $("#IDMODEEXPEDITION").val(),
                                        $("#IDFOURNISSEUR").val(), 
                                        $("#IDMOTIF").val()
                                    )
                                    notif("success", "Félicitation", response.messages)
                                    return 0
                                }
                                notif("warning", "Attention", response.messages)
                                completeHandler()
                            },
                            error: function(response) {
                                //console.log(response)
                                completeHandler()
                                notifError(response.responseJSON.messages)
                            }
                        })
                    }, null,
                    "Voulez-vous valider les bons de retour ?", {
                        sousTitre: '',
                        infoJNL: "CREATION/MODIFICATION DE RETOUR FOURNISSEUR",
                        typeJNL: 3,
                        CodeDroit: "DA_RetourFseur"
                    })

            })

            // Supprimer les bons selectionés
            $("#btnSupprimeBonAttente").click(function(param) {
                let count = listeLigneSelectionne("#tableListeRtourAttente", "#checkLigneAttente")
                if (count.length == 0) {

                    alertSwal("Cocher un/plusieurs Bon avant de supprimer !!")
                    return 0
                }

                confirmMdp('{{ csrf_token() }}', () => {
                        $.ajax({
                            url: "{{ route('deleteBonAttente') }}",
                            type: 'POST',
                            data: {
                                listUD: count,
                                _token: "{{ csrf_token() }}"
                            },
                            beforeSend: progressHandler(),
                            dataType: 'json',
                            success: function(response) {
                                //console.log(response)

                                if (response.error == false) {
                                    listeBonAttente(
                                        $("#filtrePeriode").val(),
                                        $("#IDBUREAUACHAT").val(),
                                        $("#IDMODEEXPEDITION").val(),
                                        $("#IDFOURNISSEUR").val(),
                                        $("#IDMOTIF").val()
                                    )
                                    notifSuccess(response.messages)
                                    return 0
                                }
                                notifWarning(response.messages)
                                completeHandler()
                            },
                            error: function(response) {
                                //console.log(response)
                                completeHandler()
                                notifError(response.messages)
                            }
                        })
                    }, null,
                    "Voulez-vous supprimer le(s) réclamation(s) ?", {
                        sousTitre: '',
                        infoJNL: "SUPPRESSION DE RECLAMATION FOURNISSEUR",
                        typeJNL: 3,
                        CodeDroit: "DG_PeutSuppirmer"
                    })
            })

            // selection de tout les elements du tableau commande
            _('checkAllAttente').addEventListener('click', function() {
                let value = this.checked
                let lignes = tableListeRtourAttente.rows().nodes()
                $(lignes).find('#checkLigneAttente').prop('checked', value)
            })
            // selection d'une ligne de commande
            $(document).on('click', '#checkLigneAttente', function() {
                if (_('checkAllAttente').checked == true) {
                    _('checkAllAttente').checked = false
                }
            })

            function listeLigneBonAttenteSelectionne() {

                let dataIdLigne = []
                let dataPack = []
                let valNow = ""
                let lignes = tableListeRtourAttente.rows().nodes()

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

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

            function listeBonAttente(filtrePeriode, IDBUREAUACHAT, IDMODEEXPEDITION, IDFOURNISSEUR, IDMOTIF) {
                $.ajax({
                    url: "{{ route('listingBonRetour') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: filtrePeriode,
                        IDBUREAUACHAT: IDBUREAUACHAT,
                        IDMODEEXPEDITION: IDMODEEXPEDITION,
                        IDFOURNISSEUR: IDFOURNISSEUR,
                        IDMOTIF: IDMOTIF,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        //console.log(response)

                        if (response.error == false) {


                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableListeRtourAttente',
                                obj: response.donnee
                            })

                            placeboutonPreferenceColonne('tableListeRtourAttente',
                                'DetailRtourValideShowColonne')
                            recuperationPreferenceColonneUtilisateur('tableListeRtourAttente',
                                'DetailRtourValideShowColonne')



                            remplirInfo(response.donnee.length, response.totaux.totalHT, response
                                .totaux
                                .totalTVA, response.totaux.totalTTC)
                            completeHandler()
                            return 0
                        }
                        completeHandler()
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        //console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }


            // $(document).on('click', '.DetailRtourValideShowColonne', function() {
            //     appliquerPreferenceColonne('tableListeDetailRtourValide','Listing-bon-retour',$(this),'DetailRtourValideShowColonne')
            // })

            /*:::::::::::: Fin bon retour :::::::::::::::::::*/

            /*:::::::::::: Debut reclamation valider :::::::::::::::::::*/

            $("#tableListeRtourValide").on("click", ".btn-view", function() {

                listeReclamationDetail($(this).attr("data-id"))
                document.querySelector("#modalRetourValide").classList.add("effect-slide-in-right");
                $("#modalRetourValide").modal("show")
            })

            $("#tableListeRtourValide").on("click", ".btn-edit", function() {

                listeReclamationEdit($(this).attr("data-id"))
                document.querySelector("#modalEditReclamation").classList.add("effect-slide-in-right");
                $("#modalEditReclamation").modal("show")
            })

            $("#modalEditReclamation").on("click", "#btnValiderReclamation", function() {
                let formData = new FormData(_("formReclamationEdit"))
                formData.append("_token", "{{ csrf_token() }}")
                $.ajax({
                    url: "{{ route('validerReclamtion') }}",
                    type: 'POST',
                    data: formData,
                    beforeSend: progressHandler(),
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(response) {
                        //console.log(response)

                        if (response.error == false) {

                            $("#modalEtatPrint").modal("hide")
                            genererPDF(response.tablePDF)
                            $("#modalEditReclamation").modal("hide")
                            completeHandler()
                            listeReclamation(
                                $("#filtrePeriode").val(),
                                $("#IDBUREAUACHAT").val(),
                                $("#IDMODEEXPEDITION").val(),
                                $("#IDFOURNISSEUR").val()
                            )
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        //console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })


            $("#modalEditReclamation").on("click", "#btnSupprimerReclamation", function() {

                $.ajax({
                    url: "{{ route('supprimerReclamation') }}",
                    type: 'POST',
                    data: {
                        data: $("#idRetourFseur").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        //console.log(response)

                        if (response.error == false) {

                            $("#modalEditReclamation").modal("hide")
                            completeHandler()
                            listeReclamation(
                                $("#filtrePeriode").val(),
                                $("#IDBUREAUACHAT").val(),
                                $("#IDMODEEXPEDITION").val(),
                                $("#IDFOURNISSEUR").val()
                            )
                            notifSuccess(response.messages)
                            return 0
                        }
                        notifWarning(response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        //console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#modalEditReclamation").on("click", "#btnAnnulerModifReclamation", function() {

                $.ajax({
                    url: "{{ route('annulerReclamation') }}",
                    type: 'POST',
                    data: {
                        data: $("#idRetourFseur").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {

                            $("#modalEditReclamation").modal("hide")
                            completeHandler()
                            listeReclamation(
                                $("#filtrePeriode").val(),
                                $("#IDBUREAUACHAT").val(),
                                $("#IDMODEEXPEDITION").val(),
                                $("#IDFOURNISSEUR").val()
                            )
                            notifSuccess(response.messages)
                            return 0
                        }
                        notifWarning(response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#modalEditReclamation").on("click", "#btnImprimerReclamtion", function() {

                $.ajax({
                    url: "{{ route('imprimerBonReclamation') }}",
                    type: 'POST',
                    data: {
                        data: $("#idRetourFseur").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {

                            genererPDF(response.tablePDF)
                            completeHandler()
                            // notifSuccess(response.messages)
                            return 0
                        }
                        notifWarning(response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            _('checkAllBonRetourValide').addEventListener('click', function() {
                let value = this.checked
                let tableListeRtourValide = $("#tableListeRtourValide").DataTable()
                let lignes = tableListeRtourValide.rows().nodes()
                $(lignes).find('#checkReclamationSelect').prop('checked', value)
            })

            $("#btnPrintReclamation").on("click", function() {
                let listID = listeLigneSelectionne("#tableListeRtourValide", "#checkReclamationSelect")
                if (listID.length > 0) {
                    $("#modalEtatPrint").modal("show")
                    return 0
                }

                alertSwal("Cocher une/plusieurs réclamation(s) avant d'imprimer")
                return false
            })


            $("#btnValideImprime").on("click", function() {

                $.ajax({
                    url: "{{ route('getImprimDocReclamation') }}",
                    type: 'POST',
                    data: {
                        type: $("input[name=primaryRadio]:checked").val(),
                        data: listeLigneSelectionne("#tableListeRtourValide",
                            "#checkReclamationSelect"),
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {
                            if (response.tablePDF.length <= 0) {
                                notif("warning", "Attention", "Aucun donnée trouvée !!")
                                return 0
                            }
                            $.each(response.tablePDF, function(key, value) {

                                // var pdfBase64 = response.tablePDF;
                                genererPDF(value)

                            })
                            $("#modalEtatPrint").modal("hide")
                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            function listeReclamation(filtrePeriode, IDBUREAUACHAT, IDMODEEXPEDITION, IDFOURNISSEUR) {
                $.ajax({
                    url: "{{ route('listeReclamation') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: filtrePeriode,
                        BuroSele: IDBUREAUACHAT,
                        ModeExpSel: IDMODEEXPEDITION,
                        FseurSele: IDFOURNISSEUR,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        //console.log(response)

                        if (response.error == false) {
                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableListeRtourValide',
                                obj: response.donnee
                            })

                            remplirInfo(response.donnee.length, response.totaux.totalHT, response
                                .totaux
                                .totalTVA, response.totaux.totalTTC)

                            if (dataRecup != null && (dataRecup.versRetourFseur == true || dataRecup
                                    .versRetourFseur == 'true')) {
                                $("#tableListeRtourValide_filter input").val(dataRecup
                                    .numeroRetoufseur).trigger("input")
                            }

                            placeboutonPreferenceColonne('tableListeRtourValide',
                                'ListeRtourValideShowColonne')
                            recuperationPreferenceColonneUtilisateur('tableListeRtourValide',
                                'ListeRtourValideShowColonne')

                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        //console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            $(document).on('click', '.ListeRtourValideShowColonne', function() {
                appliquerPreferenceColonne('tableListeRtourValide', 'Listing-bon-retour', $(this),
                    'ListeRtourValideShowColonne')
            })

            function listeReclamationDetail(ID) {
                $.ajax({
                    url: "{{ route('listeReclamationDetail') }}",
                    type: 'POST',
                    data: {
                        data: ID,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        //console.log(response)

                        if (response.error == false) {

                            tableListeDetailRtourValide.clear().draw()
                            $.each(response.donnee, function(key, value) {
                                tableListeDetailRtourValide.row.add([
                                    value.NumeroRetourFseurLigne,
                                    value.CodeCipProduit1,
                                    value.CodeTedisProduit,
                                    value.DesignationProduit,
                                    value.QteReclamation,
                                    value.CodeMotifRetour,
                                    value.LibelleMotifRetour,
                                    value.CommentaireRetourFseurLigne,
                                    formatNumber(value.PrixGHTBL),
                                    formatNumber(value.PrixRevientHT),
                                    value.NumeroTracabilite,
                                    value.NumeroLotProduit,
                                    explodeDate(value.DatePeremption),
                                    value.TauxTVABL + " %",
                                    formatNumber(value.TotalHTRFL),
                                    formatNumber(value.TotalTaxeRFL),
                                    formatNumber(value.TotalTTCRFL)
                                ])
                            })
                            tableListeDetailRtourValide.draw()
                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        //console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            function listeReclamationEdit(ID) {
                $("#idRetourFseur").val(ID)
                $.ajax({
                    url: "{{ route('listeReclamationDetail') }}",
                    type: 'POST',
                    data: {
                        data: ID,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        //console.log(response)

                        if (response.error == false) {

                            tableEditReclamation.clear().draw()
                            $.each(response.donnee, function(key, value) {
                                tableEditReclamation.row.add([
                                    value.NumeroRetourFseurLigne,
                                    value.CodeCipProduit1,
                                    value.CodeTedisProduit,
                                    value.DesignationProduit,
                                    value.QteFactureeBL,
                                    value.QteLivreeBL,
                                    value.QteReclamation,
                                    value.LibelleMotifRetour,
                                    formatNumber(value.PrixGHTBL),
                                    formatNumber(value.PrixRevientHT),
                                    value.NumeroTracabilite,
                                    value.NumeroLotProduit,
                                    explodeDate(value.DatePeremption),
                                    value.TauxTVABL + " %",
                                    formatNumber(value.TotalHTRFL),
                                    formatNumber(value.TotalTaxeRFL),
                                    formatNumber(value.TotalTTCRFL)
                                ])
                            })

                            response.RETOURFSEUR
                            tableEditReclamation.draw()
                            $('#date_edit').val(response.RETOURFSEUR.DateRetourFseur)
                            $('#IDBUREAUACHAT_edit').val(response.RETOURFSEUR.IDBUREAUACHAT)
                            $('#IDMODEEXPEDITION_edit').val(response.RETOURFSEUR.IDMODEEXPEDITION)
                            $('#IDFOURNISSEUR_edit').val(response.RETOURFSEUR.IDFOURNISSEUR)
                            $('#numConteneurVol_edit').val(response.RETOURFSEUR
                                .NumeroConteneurOuVol)
                            $('#numFactureBl_edit').val(response.RETOURFSEUR.NumeroBonLivraison)
                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        //console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            function genererPDF(value) {
                // Créez un objet blob à partir du PDF en base64
                var blob = b64toBlob(value, 'application/pdf');

                // Créez un objet URL pour le blob
                var blobUrl = URL.createObjectURL(blob);

                // Créez une fenêtre d'impression avec l'URL du blob
                // window.open(blobUrl);
                var printWindow = window.open(blobUrl);
            }
            /*:::::::::::: Fin reclamation valider :::::::::::::::::::*/

            $(document).on('click', '#btn-export-retour-attente', function() {
                var data = getCleanedTableData('tableListeRtourAttente')
                const filename = file_name("LISTING_BON_RETOUR_EN_ATTENTE");
                download_excel_file('{{ route('export_global_excel.export') }}', data, filename, ['#'])
            })

            $(document).on('click', '#btn-export-bon-retour', function() {
                var data = getCleanedTableData('tableListeRtourValide')
                const filename = file_name("LISTING_BON_RETOUR");
                download_excel_file('{{ route('export_global_excel.export') }}', data, filename, ['#'])
            })
        });
    </script>
@endsection