@extends('models')
@section('titre-page', 'Commande fournisseur')
@section('sub-achat', "open active")
@section('achat', "active")
@section('slide-achat', "active")
@section('achat-cmde', "active")
@section('content-body')
    <!-- Start::app-content -->

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

        #tableCommandeLigne tbody tr:hover {
            background-color: #f0f0f0;
            /* Couleur de fond lors du survol */
        }

        /* Style des lignes sélectionnées */
        #tableCommandeLigne tbody tr.selected {
            background-color: #cce5ff;
            /* Couleur de fond de la ligne sélectionnée */
        }

        #tableCommandeLigne td {
            padding: 4.5px;
            vertical-align: middle;
        }

        .float .text {
            display: none;
        }

        .floatChild {
            width: 80%
        }

        .float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 70%;
            right: 20px;
            background-color: #0C9;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            box-shadow: 2px 2px 3px #999;
            transition: width 0.3s ease;
            text-align: center;

            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .float:hover {
            position: fixed;
            width: 200px;
            height: 60px;
            bottom: 70%;
            right: 20px;
            background-color: #0C9;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            box-shadow: 2px 2px 3px #999;
            transition: width 0.3s ease;
        }

        .float:hover .floatChild {
            display: flex;
            justify-content: space-around;
        }

        .float:hover .text {
            display: inherit;
        }

        .topSticky-60 {
            position: sticky;
            top: 60px;
            width: 100%;
            z-index: 10;
        }

        .topSticky-100 {
            position: sticky;
            top: 2px;
            width: 100%;
            /* z-index: 10; */
        }
    </style>

    <div id="card-logo">
        <!-- 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-4 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">Commande</li>
                            </ol>
                        </nav>
                    </div>

                    <div class="col-xl-8 col-lg-8 col-md-8 mt-xl-0 mt-2">
                        <div class="row w-100 justify-content-end">
                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 pe-0 mt-md-1 d-none" id="zoneBtnNewCmde">
                                <button type="button"
                                        class="btn btn-primary-light btn-wave d-flex justify-content-center float-end w-100"
                                        id="bntNewCmde" style="font-size: .78rem">
                                    <i class='bx bx-plus-circle fs-18 me-2'></i> Nouvelle commande
                                </button>
                            </div>

                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 me-0 pe-0 mt-md-1">
                                <button type="button"
                                        class="btn btn-secondary-light btn-wave d-flex justify-content-center float-end w-100"
                                        id="btnModalCommande" style="font-size: .78rem">
                                    <i class='bx bx-plus-circle fs-18 me-2'></i> Ajouter produit
                                </button>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 pe-0 mt-md-1">
                                <button type="button" class="btn btn-warning-light d-flex justify-content-center w-100"
                                        id="btnSugCmde" style="font-size: .78rem">
                                    <i class="bx bx-share-alt fs-18 me-2"></i>Suggérer une commande
                                </button>
                            </div>
                            <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 mt-md-1 pe-0">

                                <div class="dropdown w-100">
                                    <button class="btn btn-primary-light dropdown-toggle" type="button"
                                            id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                        Autres actions
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">

                                        <li>
                                            <button class="dropdown-item text-start" id="bntModalParamettreAchat">
                                                <i class='bx bxs-cog me-1'></i>&nbsp;Paramètre achat
                                            </button>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <button class="dropdown-item text-start" id="btnImprimMatrice">
                                                <i class='bx bx-printer me-1'></i>&nbsp;Imprimer la matrice de traitement
                                            </button>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <button class="dropdown-item text-start" id="btnTransfertMaritime">
                                                <i class='bx bx-transfer me-1'></i>&nbsp;Envoyer vers MARITIME
                                            </button>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <button class="dropdown-item text-start" id="btnTransfertAerien">
                                                <i class='bx bx-transfer me-1'></i>&nbsp;Envoyer vers AERIEN
                                            </button>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <div class=" dropdown-item">
                                                <form method="post" enctype="multipart/form-data" id="formIntegrerCsv">
                                                    @csrf
                                                    <input type="file" name="integrerCsv" id="integrerCsv" accept="csv/*" hidden>
                                                    @if (ModeGpharma() == 2)
                                                        <label for="" id="labelIntegrerCSV" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="left" title="Code Interne; Qté Cmdée"><i class='bx bx-download'></i> &nbsp;Intégrer CSV</label>
                                                    @else
                                                        <label for="" id="labelIntegrerCSV" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="left" title="Code CIP; Code Interne; Désignation produit; Qté Cmdée"><i class='bx bx-download'></i> &nbsp;Intégrer CSV</label>
                                                    @endif
                                                    <input type="submit" value="" name="btnIntegrerCsv" id="btnIntegrerCsv" hidden>
                                                </form>
                                                <a href="" id="lienCsv" download hidden></a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

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

        <div class="row">

            <div class=" col-xl-12">
                <div class=" card custom-card">
                    <div class=" card-body pe-0 pt-0 pb-1">

                        <div class="row w-100">
                            <div class="card-body p-0">
                                <ul class="nav nav-pills justify-content-start nav-style-3 mb-1" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" role="tab" aria-current="page"
                                           href="#services-right" aria-selected="true">Stats produit</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                                           href="#about-right" aria-selected="true">Filtres</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane text-muted active" id="services-right" role="tabpanel">
                                        <div class=" row">
                                            <div class="col-xl-8">
                                                <div id="echart-bar-labels-detail"
                                                     class="echart-charts d-flex justify-content-center align-items-center"
                                                     style="max-height: 150px;"><img
                                                        src="{{ asset('assets/images/emptydata.png') }}"
                                                        style="width: 15%" alt="" srcset=""></div>
                                            </div>
                                            <div class="col-xl-4">
                                                <div class="row">
                                                    {{-- <div class="col-xl-12 col-md-1 mb-2 px-0 d-flex">
                                                        <p class="mb-0 text-muted">Cat. ABC : </p>
                                                        <input type="text" name="statDateCatAbcLigne"
                                                            id="statDateCatAbcLigne"
                                                            class="form-control height-input w-100" value=""
                                                            disabled>
                                                    </div> --}}

                                                    <ul class="nav nav-tabs mb-1 nav-justified nav-style-1 d-sm-flex d-block"
                                                        role="tablist">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" data-bs-toggle="tab"
                                                               role="tab" href="#home1-justified"
                                                               aria-selected="true">Stat A date</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" data-bs-toggle="tab" role="tab"
                                                               href="#about1-justified" aria-selected="false">Stat
                                                                Actuelle</a>
                                                        </li>

                                                    </ul>
                                                    <div class="tab-content px-0 py-0">
                                                        <div class="tab-pane text-muted active show  p-1 ps-2"
                                                             id="home1-justified" role="tabpanel">
                                                            <div class="row justify-content-center">
                                                                <div
                                                                    class="col-xl-4 col-md-1 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0 text-muted">Cat. : <span
                                                                            class="fw-bold" id="statDateCatAbc2"
                                                                            style="height: 1.5rem !important;"></span></p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0 text-muted">Vmm : <span class="fw-bold"
                                                                                                           id="statDateVmm"
                                                                                                           style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0 text-muted">Vm-1 : <span
                                                                            class="fw-bold" id="statDateVm1"
                                                                            style="height: 1.5rem !important;">0</span>
                                                                    </p>
                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0 text-muted">Vm-3 : <span
                                                                            class="fw-bold" id="statDateVm3"
                                                                            style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0 text-muted">Vm-6 : <span
                                                                            class="fw-bold" id="statDateVm6"
                                                                            style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0 text-muted">Vm-12 : <span
                                                                            class="fw-bold" id="statDateVm12"
                                                                            style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                            </div>
                                                            <hr>
                                                            <div class="row">

                                                                <div
                                                                    class="col-xl-6 col-md-1 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0 "><span class="text-muted">Seuil Mini
                                                                            : </span> <span class="fw-bold"
                                                                                            id="statDateSeuilMini"
                                                                                            style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-6 col-md-1 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0 ">
                                                                        <span class="text-muted"> Seuil Maxi :</span>
                                                                        <span class="fw-bold" id="statDateSeuilMaxi"
                                                                              style="height: 1.5rem !important;">0</span>
                                                                    </p>

                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane text-muted p-1 ps-2" id="about1-justified"
                                                             role="tabpanel">
                                                            <div class="row">
                                                                <div
                                                                    class="col-xl-4 col-md-1 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0">
                                                                        <span class=" text-muted">Cat. : </span>
                                                                        <span class="fw-bold" id="statActuCatAbc"
                                                                              style="height: 1.5rem !important;"></span>
                                                                    </p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0">
                                                                        <span class=" text-muted">Vmm : </span>
                                                                        <span class="fw-bold" id="statActuVmm"
                                                                              style="height: 1.5rem !important;">0</span>
                                                                    </p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0">
                                                                        <span class=" text-muted">Vm-1 :</span>
                                                                        <span class="fw-bold" id="statActuVm1"
                                                                              style="height: 1.5rem !important;">0</span>
                                                                    </p>
                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0"><span class=" text-muted">Vm-3
                                                                            :</span> <span class="fw-bold"
                                                                                           id="statActuVm3"
                                                                                           style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0"><span class="text-muted">Vm-6
                                                                            :</span> <span class="fw-bold"
                                                                                           id="statActuVm6"
                                                                                           style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-4 col-md-4 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0"><span class=" text-muted">Vm-12
                                                                            :</span> <span class="fw-bold"
                                                                                           id="statActuVm12"
                                                                                           style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                            </div>
                                                            <hr>
                                                            <div class="row">

                                                                <div
                                                                    class="col-xl-6 col-md-1 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0"><span class=" text-muted">Seuil Mini
                                                                            :</span> <span class="fw-bold"
                                                                                           id="statActuSeuilMini"
                                                                                           style="height: 1.5rem !important;">0</span></p>

                                                                </div>
                                                                <div
                                                                    class="col-xl-6 col-md-1 mb-2 d-flex justify-content-center">
                                                                    <p class="mb-0"><span class=" text-muted">Seuil Maxi
                                                                            :</span> <span class="fw-bold"
                                                                                           id="statActuSeuilMaxi"
                                                                                           style="height: 1.5rem !important;">0</span></p>

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

                                                    </div>
                                                </div>

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

                                    <div class="tab-pane show text-muted" id="about-right" role="tabpanel">
                                        <form id="formFiltre">
                                            <div class="row w-100">
                                                <div class="col-xl-3 col-lg-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Bureau d'achat</p>
                                                    <select class="form-select" id="IDBUREAUACHAT">

                                                    </select>
                                                </div>
                                                <div class="col-xl-3 col-lg-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Familles</p>
                                                    <select class="form-select" id="IDFAMILLEPRODUIT">

                                                    </select>
                                                </div>
                                                <div class="col-xl-2 col-lg-2 col-md-2 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-3 col-lg-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Fournisseur</p>
                                                    <select class="form-select" id="IDFOURNISSEUR">

                                                    </select>
                                                </div>
                                                <div class="col-xl-1 col-lg-1 col-md-1 mb-0 pt-1">
                                                    <button type="button" class="btn btn-primary btn-wave float-end mt-2"
                                                            id="btnFiltreTable">
                                                        <i class="ri-search-line"
                                                           style="font-size:13px; cursor:pointer;"></i>
                                                    </button>
                                                </div>

                                                <div class="col-xl-3 col-lg-4 col-sm-4 col-6 ">
                                                    <p class="mb-0 text-muted">Type cmde</p>
                                                    <select class="form-select" id="typeCmde" name="typeCmde">
                                                        <option value="1" selected>NORMALE</option>
                                                        <option value="2">MISE EN PLACE</option>
                                                        <option value="3">SPECIALE</option>
                                                        <option value="4">RENFORCEMENT STOCK</option>
                                                    </select>

                                                </div>
                                                <div class="col-xl-3 col-lg-4 col-sm-4 col-6">
                                                    <p class="mb-0 text-muted">Date</p>
                                                    <input type="text" name="dateCmde" id="dateCmde"
                                                           class=" form-control" readonly>
                                                </div>
                                                <div class="col-xl-2 col-lg-4 col-sm-4 col-1 ">
                                                    <p class="mb-0 text-muted">Numéro cmde</p>
                                                    <input type="text" name="numCmde" id="numCmde"
                                                           class=" form-control" readonly>
                                                    <input type="text" name="IdCmde" id="IdCmde"
                                                           class=" form-control" hidden>
                                                </div>
                                                <div class="col-xl-3">
                                                    <div class="row">
                                                        <div class="col-xl-12 col-md-12 mt-2" id="zoneCheck">
                                                            <div
                                                                class="form-check form-check-md d-flex align-items-center">
                                                                <input class="form-check-input" type="checkbox"
                                                                       value="false" id="lignVenteNulle"
                                                                       name="lignVenteNulle">
                                                                <label class="form-check-label fs-14" for="nePasFusionner"
                                                                       style="font-size: .75rem !important">
                                                                    Ligne avec vente nulles
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="form-check form-check-md d-flex align-items-center">
                                                                <input class="form-check-input" type="checkbox"
                                                                       value="false" id="UniqProdSaisonnier"
                                                                       name="UniqProdSaisonnier">
                                                                <label class="form-check-label fs-14"
                                                                       for="recupereSurSite"
                                                                       style="font-size: .75rem !important">
                                                                    Uniq. produits saisonnier
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style=" " id="conteneurTableau">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body p-1">
                    <div class="table-responsive">
                        <table class="tablehover table text-nowrap overflow-auto" id="tableCommandeLigne">
                            <thead class="table-header-primary">
                            <tr>
                                <th data-orderable="false" data-class="text-center align-middle"
                                    data-column="actionDelete">
                                    <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                    #
                                </th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="CodeTedisProduit">Code Interne</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-start"
                                    data-column="DesignationProduit">Désignation</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="inputQteCmde">Quantité cmdée</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="ColisageProduit">Colisage</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="StockPaysProduit">Stock</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="QteCoursDeRoute">CR</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="inputVM">VM</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="inputstockPlusCR">Stock + CR</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="stockPlusCREnVM">(Stock + CR)/VM</th>

                                <th class="text-center colTable" data-orderable="false" data-class="text-start"
                                    data-column="LibelleFormeProduit">Forme</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="QuantiteSurPlusSaisonnier">P conso</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="inputqdeSurVM">CdeVM</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="inputSCRC">Stock + CR + Cde (SCRC)</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="inputSCRCenVM">SCRC/VM</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-end"
                                    data-column="PrixFHTFormat">PFHT</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-end"
                                    data-column="PrixGHTFormat">PGHT</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-end"
                                    data-column="PrixCessionHTFormat">P. cession HT</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-end"
                                    data-column="inputTotalHTFormat">Total HT</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="TauxTaxe">TVA</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-end"
                                    data-column="inputTotalTTCFormat">Total TTC</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-end"
                                    data-column="QuantiteMiniFournisseurFormat">
                                    Mini. fournisseur
                                </th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="CodeCipProduit1">Code produit</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="CodeTypeExpedition">TE</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="inputPoidsTotalProduit">Poids Tt (g)
                                </th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="inputVolumeTotalProduit">Volume Tt (cm3)
                                </th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="VMMoyenneSaison1">VM Saison 1</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="VMMoyenneSaison2">VM Saison 2</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="SeuilMiniReapproFormat">
                                    Seuil reappro.
                                </th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="Vm_0">Vmm</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="Vm_1">Vm-1</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="Vm_3">Vm-3</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="Vm_6">Vm-6</th>
                                <th class="text-center colTable" data-orderable="false" data-class="text-center"
                                    data-column="Vm_12">Vm-12</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    <!-- Section modal -->

    <!-- Modal de e -->
    <div class="modal fade" id="modalCommande" tabindex="-1" aria-labelledby="exampleModalXlLabel"
         style="display: none;" aria-hidden="true" role="dialog">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title d-flex align-items-center" id="exampleModalXlLabel"> &nbsp; Fiche commande
                        fournisseur
                        &nbsp;&nbsp; <span id="zoneDeGarde"></span> </h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl-4 col-md-4 mb-2">
                            <p class="mb-0 text-muted ">Produit récherché (Codes/Désignation) </p>
                            <input type="text" class=" form-control height-input" name=""
                                   style="text-transform: uppercase;" id="codeProduit">
                        </div>
                        <div class="col-xl-2 col-md-1 mb-2">
                            <p class="mb-0 text-muted">Colisage</p>
                            <input type="text" name="CmdeColisage" id="CmdeColisage"
                                   class=" form-control height-input" value="0" disabled>
                        </div>
                        <div class="col-xl-2 col-md-1 mb-2">
                            <p class="mb-0 text-muted">Stock</p>
                            <input type="text" name="CmdeStock" id="CmdeStock" class=" form-control height-input"
                                   value="0" disabled>
                        </div>
                        <div class="col-xl-2 col-md-1 mb-2">
                            <p class="mb-0 text-muted">CR </p>
                            <input type="text" name="CmdeCR" id="CmdeCR" class=" form-control height-input"
                                   value="0" autocomplete="off" disabled>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-2">
                            <p class="mb-0 text-muted">VM</p>
                            <input type="text" name="CmdeVM" id="CmdeVM" class="form-control height-input"
                                   value="0" autocomplete="off" disabled>
                        </div>
                        <div class="col-xl-1 px-0 col-md-1 text-right d-flex flex-fill justify-content-between mb-2 mt-3">
                            <button class=" btn btn-success" id="addCmde" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-success" data-bs-placement="top" title="Valider">
                                <i class='bx bx-check-double' style="font-size:12pt"></i>
                            </button>

                            <button class="  btn btn-danger" id="resetCmde" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-danger" data-bs-placement="bottom" title="Annuler"
                                    style="font-size:12pt">
                                <i class='bx bx-x-circle'></i>
                            </button>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-2">
                            <p class="mb-0 text-muted">Stock+CR</p>
                            <input type="text" name="CmdeStockCR" id="CmdeStockCR" class=" form-control height-input"
                                   value="0" disabled>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-2">
                            <p class="mb-0 text-muted">Q. mini Fseur</p>
                            <input type="text" name="CmdeQteMiniFseur" id="CmdeQteMiniFseur"
                                   class=" form-control height-input" value="0" disabled>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-2">
                            <p class="mb-0 text-muted">Vmm</p>
                            <input type="text" name="statDateVmm" id="statDateVmm" class="form-control height-input"
                                   value="0" disabled>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-2">
                            <p class="mb-0 text-muted">Qte cmdée</p>
                            <input type="text" name="CmdeQteCmde" id="CmdeQteCmde" class=" form-control height-input"
                                   value="0">
                        </div>
                        <div class="col-xl-2 col-md-1 mb-2">
                            <p class="mb-0 text-muted">Qte cmdée en VM</p>
                            <input type="text" name="CmdeQteCmdeVM" id="CmdeQteCmdeVM"
                                   class=" form-control height-input" value="0.00" disabled>
                        </div>

                        <div class="col-xl-1 col-md-1 mb-2">
                            <p class="mb-0 text-muted">SCRC</p>
                            <input type="text" name="CmdeSCRC" id="CmdeSCRC" class=" form-control height-input"
                                   value="0" disabled>
                        </div>
                        <div class="col-xl-2 col-md-1 mb-2">
                            <p class="mb-0 text-muted">SCRC en VM</p>
                            <input type="text" name="CmdeSCRCVM" id="CmdeSCRCVM" class=" form-control height-input"
                                   value="0.00" disabled>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-2 d-flex align-items-end">
                            <input type="text" name="produitAI" id="produitAI"
                                   class="form-control height-input color-ai text-white" value="" style=""
                                   disabled>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-2">
                            <p class="mb-0 text-muted">Cat. ABC</p>
                            <input type="text" name="statDateCatAbc" id="statDateCatAbc"
                                   class="form-control height-input" value="" disabled>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-2 mb-2 mt-3 d-flex flex-fill px-0">
                            <button type="button" class="btn btn-warning" style="width: 100%" data-bs-toggle="modal"
                                    data-bs-target="#modalInfo" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-danger" data-bs-placement="bottom" title="Statistique"><i
                                    class='bx bx-table'></i></button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card-body">
                                <div id="echart-bar-labels" class="echart-charts text-center" style="max-height: 230px;">
                                    <img src="{{ asset('assets/images/emptydata.png') }}" class=" mt-2"
                                         style="width: 20%" alt="" srcset="">
                                </div>
                            </div>
                        </div>

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

    <div class="modal fade" id="modalInfo" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalSmLabel"> Stat</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class=" row">
                        <div class=" col-xl-12">
                            <div class="accordion accordion-border-primary accordions-items-seperate"
                                 id="accordionprimaryborderExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingborderprimaryOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#primaryBorderOne" aria-expanded="true"
                                                aria-controls="primaryBorderOne">
                                            Statistiques à date
                                        </button>
                                    </h2>
                                    <div id="primaryBorderOne" class="accordion-collapse collapse show"
                                         aria-labelledby="headingborderprimaryOne"
                                         data-bs-parent="#accordionprimaryborderExample">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vmm</p>
                                                        <input type="text" name="statDateVmm" id="statDateVmm"
                                                               class=" form-control " style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vm-1</p>
                                                        <input type="text" name="statDateVm1" id="statDateVm1"
                                                               class="form-control" style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vm-3</p>
                                                        <input type="text" name="statDateVm3" id="statDateVm3"
                                                               class=" for form-control " style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vm-6</p>
                                                        <input type="text" name="statDateVm6" id="statDateVm6"
                                                               class=" for form-control " style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vm-12</p>
                                                        <input type="text" name="statDateVm12" id="statDateVm12"
                                                               class=" for form-control " style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                </div>
                                                <div class="col-6 d-flex flex-column justify-content-center">
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Cat. ABC</p>
                                                        <input type="text" name="statDateCatAbc2" id="statDateCatAbc2"
                                                               class=" for form-control " style="height: 1.5rem !important;"
                                                               disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Seuil Mini</p>
                                                        <input type="text" name="statDateSeuilMini"
                                                               id="statDateSeuilMini" class=" for form-control "
                                                               value="0" style="height: 1.5rem !important;" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Seuil Maxi</p>
                                                        <input type="text" name="statDateSeuilMaxi"
                                                               id="statDateSeuilMaxi" class=" for form-control "
                                                               value="0" style="height: 1.5rem !important;" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingborderprimaryTwo">
                                        <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#primaryBorderTwo"
                                                aria-expanded="false" aria-controls="primaryBorderTwo">
                                            Statistiques actuelles
                                        </button>
                                    </h2>
                                    <div id="primaryBorderTwo" class="accordion-collapse collapse"
                                         aria-labelledby="headingborderprimaryTwo"
                                         data-bs-parent="#accordionprimaryborderExample">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vmm</p>
                                                        <input type="text" name="statActuVmm" id="statActuVmm"
                                                               class=" form-control " style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vm-1</p>
                                                        <input type="text" name="statActuVm1" id="statActuVm1"
                                                               class="form-control" style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vm-3</p>
                                                        <input type="text" name="statActuVm3" id="statActuVm3"
                                                               class="form-control " style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vm-6</p>
                                                        <input type="text" name="statActuVm6" id="statActuVm6"
                                                               class=" form-control " style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Vm-12</p>
                                                        <input type="text" name="statActuVm12" id="statActuVm12"
                                                               class="form-control " style="height: 1.5rem !important;"
                                                               value="0" disabled>
                                                    </div>
                                                </div>
                                                <div class="col-6 d-flex flex-column justify-content-center">
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Cat. ABC</p>
                                                        <input type="text" name="statActuCatAbc" id="statActuCatAbc"
                                                               class="form-control " value="0"
                                                               style="height: 1.5rem !important;" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Seuil Mini</p>
                                                        <input type="text" name="statActuSeuilMini"
                                                               id="statActuSeuilMini" class="form-control " value="0"
                                                               style="height: 1.5rem !important;" disabled>
                                                    </div>
                                                    <div class="col-xl-12 col-md-1 mb-2">
                                                        <p class="mb-0 text-muted">Seuil Maxi</p>
                                                        <input type="text" name="statActuSeuilMaxi"
                                                               id="statActuSeuilMaxi" class="form-control " value="0"
                                                               style="height: 1.5rem !important;" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal suggestion de commande --}}
    <div class="modal fade" id="modalSuggestionCmde" tabindex="-1" aria-labelledby="exampleModalSmLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalSmLabel"> Création de commande</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formCmdeSug">
                        <div class=" row">
                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                <p class="mb-0 text-muted">Type de commande</p>
                                <select class="form-select" id="IDTYPECMDESUG" name="IDTYPECMDESUG">
                                    <option value="1">NORMALE</option>
                                    <option value="2">MISE EN PLACE</option>
                                    <option value="3">SPECIALE</option>
                                    <option value="4">RENFORCEMENT DE STOCK</option>
                                </select>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                <p class="mb-0 text-muted">Nbre de Vm</p>
                                <input type="text" class="form-control" id="NBREVMSUG" name="NBREVMSUG" disabled>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                <p class="mb-0 text-muted">Bureau d'achat</p>
                                <select class="form-select" id="IDBUREAUACHATSUG" name="IDBUREAUACHATSUG">

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

                                </select>
                            </div>
                            <div class="col-xl-8 col-lg-8 col-md-9 mb-2">
                                <p class="mb-0 text-muted">Fournisseur</p>
                                <select class="js-example-basic-multiple form-select" id="IDFOURNISSEURSUG"
                                        name="IDFOURNISSEURSUG[]" multiple="multiple">

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

                                </select>
                            </div>
                            <div class="col-xl-8 col-lg-8 col-md-8 mb-2">
                                <p class="mb-0 text-muted">Laboratoires</p>
                                <select class="form-select" id="IDLABORATOIRESUG" name="IDLABORATOIRESUG">

                                </select>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-8 mb-2 d-flex align-items-center" id="zoneProdSais">
                                <div>
                                    <input class="form-check-input" type="checkbox" value="false"
                                           id="rechercheProdSaison" name="rechercheProdSaison">
                                    <label class="form-check-label fs-14" for="rechercheProdSaison"
                                           style="font-size: .75rem !important">
                                        Recherche des produits saisonniers
                                    </label>
                                </div>
                            </div>
                            <div class="col-xl-8 col-lg-8 col-md-6 mb-2" id="zoneNbreJours">
                                <div class=" row">
                                    <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                        <p class="mb-0 text-muted">Nbre jours</p>
                                        <input type="text" class="form-control" id="NBREJOURSUG" name="NBREJOURSUG"
                                               value="1">
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                        <p class="mb-0 text-muted">Coeff VM</p>
                                        <input type="text" class="form-control" id="COEFFVMSUG" name="COEFFVMSUG"
                                               value="2.0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-8 mb-2 d-flex align-items-center d-none"
                                 id="zoneCmdeUniq">
                                <div>
                                    <input class="form-check-input" type="radio" value="true" id="CmdeUniq"
                                           name="CmdeUniq" checked>
                                    <label class="form-check-label fs-14" for="CmdeUniq"
                                           style="font-size: .75rem !important">
                                        Commande unique
                                    </label>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-8 mb-2 d-flex align-items-center d-none"
                                 id="zoneCmdeFract">
                                <div>
                                    <input class="form-check-input" type="radio" value="false" id="CmdeFract"
                                           name="CmdeUniq">
                                    <label class="form-check-label fs-14" for="CmdeFract"
                                           style="font-size: .75rem !important">
                                        Commande fractionnée par Fseur
                                    </label>
                                </div>
                            </div>
                            <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                                <p class="mb-0 text-muted">Commentaire</p>
                                <textarea class="form-control" name="COMMENTAIRESUG" id="COMMENTAIRESUG"
                                          style="min-height: 70px !important; height: 70px !important;" cols="10" rows="10"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class=" modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
                            class='bx bxs-x-circle'></i> Fermer</button>
                    <label for="inputSubmit" class="btn btn-success" id="inputSubmit"><i
                            class='bx bxs-check-circle'></i> Valider
                    </label>
                </div>
            </div>
        </div>
    </div>

    <label class="float" id="valideCmde">
        <span class="floatChild">
            <i class='bx bx-check-double my-float fs-20'> </i><span class="text">Valider la comande</span>
        </span>
    </label>

@endsection

@section('script')
    {{-- <script src="{{ asset("assets/js/fonction/traitemement-produit.js") }}"></script> --}}
    <!-- Script exécuté au chargement de la page -->
    <script>
        function ajusterHauteurTableau() {
            const carte = document.getElementById('card-logo')
            const conteneur = document.getElementById('conteneurTableau');
            const margeBas = 20; // Marge souhaitée en bas

            if (!carte || !conteneur) return;

            const rect = carte.getBoundingClientRect();
            let espaceRestant = window.innerHeight - rect.bottom - margeBas;

            if (espaceRestant < 0) {
                espaceRestant = (-1 * espaceRestant) - 30;
            }
            espaceRestant = espaceRestant - 30;

            return espaceRestant < 100 ? 100 : espaceRestant
            // conteneur.style.maxHeight = $ {espaceRestant}px;
            // conteneur.style.overflowY = 'auto';
        }

        function chargerSelectLaboratoire() {

            $.ajax({

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

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

                        $('#IDLABORATOIRESUG').html('')
                        $('#IDLABORATOIRESUG').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {
                            $('#IDLABORATOIRESUG').append('<option value="' + value['IDLABORATOIRE'] +
                                '">' + value['NomLaboratoire'] + '</option>')
                        })
                    }
                    // completeHandler()
                },
                error: function(error) {

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

        function chargerSelectBureauAchat() {

            $.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('')
                        $('#IDBUREAUACHAT').append('<option value="0">TOUS</option>')
                        $('#IDBUREAUACHATSUG').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>')
                        })
                    }
                    // completeHandler()
                },
                error: function(error) {

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

        function chargerSelectFamilleProduit() {

            $.ajax({

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

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

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

                            $('#IDFAMILLEPRODUIT').append('<option value="' + value[
                                    'IDFAMILLEPRODUIT'] + '">' + value['LibelleFamilleProduit'] +
                                '</option>')
                            $('#IDFAMILLEPRODUITSUG').append('<option value="' + value[
                                    'IDFAMILLEPRODUIT'] + '">' + value['LibelleFamilleProduit'] +
                                '</option>')
                        })
                    }
                    // completeHandler()
                },
                error: function(error) {

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

        function chargerSelectModeExpedition() {

            $.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('')
                        $('#IDMODEEXPEDITION').append('<option value="0">TOUS</option>')
                        $('#IDMODEEXPEDITIONSUG').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>')
                        })
                    }
                    // completeHandler()
                },
                error: function(error) {

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

        function chargerSelectFournisseur() {

            $.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('')
                        $('#IDFOURNISSEURSUG').html('')
                        $('#IDFOURNISSEUR').append('<option value="0">TOUS</option>')
                        $('#IDFOURNISSEURSUG').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {

                            $('#IDFOURNISSEUR').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                            $('#IDFOURNISSEURSUG').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                        })
                        $('#IDFOURNISSEUR').select2()
                    }
                    // completeHandler()
                },
                error: function(error) {

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

        chargerSelectLaboratoire()
        chargerSelectBureauAchat()
        chargerSelectFamilleProduit()
        chargerSelectModeExpedition()
        chargerSelectFournisseur()
        // // console.log(VARIDCOMMANDE)

        $('#IDFOURNISSEURSUG').select2({
            dropdownParent: $("#modalSuggestionCmde"),
            placeholder: "Sélectionner un ou plusieurs fournisseurs",
            allowClear: true,
            width: '100%',
            language: {
                searching: function() {
                    return 'Recherche...';
                }
            }
        })

        $('#IDLABORATOIRESUG').select2({
            dropdownParent: $("#modalSuggestionCmde")
        })
    </script>

    <!-- Ouverture de modal -->
    <script>
        // parametre
        _('bntModalParamettreAchat').addEventListener('click', function() {
            if (parseInt($("#idSiteEnCours").val()) != 1) {
                alertSwal("Impossible d'effectuer cette opération sur l'agence commeerciale !")
                return;
            }
            $('#btnParamAchatGlobal').trigger('click')
        })

        // commande

        function Graphe(dataDonne, dom = document.getElementById('echart-bar-labels'), legend = true) {
            var dom = dom;
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });

            let donnee = []
            let annee = []

            var app = {};
            var option;
            const posList = [
                'left',
                'right',
                'top',
                'bottom',
                'inside',
                'insideTop',
                'insideLeft',
                'insideRight',
                'insideBottom',
                'insideTopLeft',
                'insideTopRight',
                'insideBottomLeft',
                'insideBottomRight'
            ];

            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: posList.reduce(function(map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };

            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function() {
                    const labelOption = {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    };
                    myChart.setOption({
                        series: [{
                            label: labelOption
                        },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                        ]
                    });
                }
            };

            const labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}',
                fontSize: 10,
                rich: {
                    name: {}
                }
            };


            $.each(dataDonne, function(key, value) {

                let datas = []
                datas.push(value.sommeVm1)
                datas.push(value.sommeVm2)
                datas.push(value.sommeVm3)
                datas.push(value.sommeVm4)
                datas.push(value.sommeVm5)
                datas.push(value.sommeVm6)
                datas.push(value.sommeVm7)
                datas.push(value.sommeVm8)
                datas.push(value.sommeVm9)
                datas.push(value.sommeVm10)
                datas.push(value.sommeVm11)
                datas.push(value.sommeVm12)

                annee.push(value.ANNEE_VM)
                donnee.push({
                    name: value.ANNEE_VM,
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: datas
                })
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                // legend: {
                //     data: annee,
                //     textStyle: {
                //         color: '#777'
                //     }
                // },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        show: true
                    },
                    data: ['Jan', 'Fev', 'Mar', 'Avr', "Mai", "Jui", "Juil", "Aout", "Sept", "Oct", "Nov",
                        "Dec"
                    ],
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: "rgba(142, 156, 173,0.1)"
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#8c9097"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(142, 156, 173,0.1)"
                        }
                    }
                }],
                series: donnee,
                color: ["#845adf", "#23b7e5", "#f5b849"]
            };

            if (legend == true) {
                option.legend = {
                    data: annee,
                    textStyle: {
                        color: '#777'
                    }
                }
            }

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
            window.addEventListener('resize', myChart.resize);
        }

        function resetForm() {

            $("#codeProduit").val("")
            $("#codeProduit").focus()
            $("#codeProduit").select()

            $("#CmdeColisage").val(0)
            $("#CmdeStock").val(0)
            $("#CmdeCR").val(0)
            $("#CmdeVM").val(0)
            $("#CmdeStockCR").val(0)
            $("#CmdeQteMiniFseur").val(0)

            $("#CmdeQteCmdeVM").val(0)
            $("#CmdeSCRC").val(0)
            $("#CmdeSCRCVM").val(0)

            $("#CmdeQteCmde").val(0)

            // $('.ui-menu').hide();

            $("#statDateVmm").val(0)
            $("#statDateVm1").val(0)
            $("#statDateVm3").val(0)
            $("#statDateVm6").val(0)
            $("#statDateVm12").val(0)
            $("#statDateCatAbc").val("")
            $("#produitAI").val("")
            $("#statDateSeuilMini").val(0)
            $("#statDateSeuilMaxi").val(0)

            $("#statActuVmm").val(0)
            $("#statActuVm1").val(0)
            $("#statActuVm3").val(0)
            $("#statActuVm6").val(0)
            $("#statActuVm12").val(0)
            $("#statActuCatAbc").val(0)
            $("#statActuSeuilMini").val(0)
            $("#statActuSeuilMaxi").val(0)

        }
    </script>

    @php
        $IdEtat = isset($_GET["IDCOMMANDE"]) && $_GET["IDCOMMANDE"] != "" ? $_GET["IDCOMMANDE"] : null;
    @endphp

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

            var openModal = false

            var VARIDCOMMANDE = 0; // Initialisation de VARIDCOMMANDE à 0
            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 "IDCOMMANDE"
            var valeurParam = @json($IdEtat);
            // console.log(valeurParam);

            var EtatModif = false
            var tableCommandeLigne = ""
            if (valeurParam !== null) {
                EtatModif = true
                VARIDCOMMANDE = valeurParam
            }

            $('#tableCommandeLigne').on('draw.dt', function() {
                // completeHandler()
            });

            $('#tableCommandeLigne').on('dblclick', 'tbody tr', function() {
                let data = $(this).data("prod"); // récupère les données de la ligne
                if(data == undefined || data == null || data == "") return false
                ouvrirFicheProduit($(this).data("prod"))
            });

            chargerTableCommandeLigne(VARIDCOMMANDE).then(function() {
                completeHandler()
            })

            $("#hover").on('click', function() {
                $("#toltiphover").tooltip("show")
            })

            $('#modalCommande').on('hidden.bs.modal', function() {
                $('.ui-menu').hide();
                $("#flush-collapseOne").addClass("show")
                // resetForm()
            });

            $('#modalInfo').on('hidden.bs.modal', function() {
                if (openModal == true) {
                    $("#modalCommande").modal("show")
                }
            });

            $(document).on('click', "#btnmodalInfo2", function() {
                openModal = false
                $("#modalInfo").modal("show")
            })

            $('#btnModalCommande').click(function() {
                if (parseInt($("#idSiteEnCours").val()) != 1) {
                    alertSwal("Impossible d'effectuer cette opération sur l'agence commerciale !")
                    return false;
                }
                openModal = true
                $('#modalCommande').modal('show')
            })

            $("#IDFOURNISSEURSUG").on("change", function() {
                if ($(this).val().length > 1) {
                    $("#zoneCmdeUniq").removeClass("d-none")
                    $("#zoneCmdeFract").removeClass("d-none")
                } else {
                    $("#zoneCmdeUniq").addClass("d-none")
                    $("#zoneCmdeFract").addClass("d-none")
                }
            })

            // Modal autocomplete
            $("#codeProduit").autocomplete({
                delay: 500,
                minLength: 3,
                autoFocus: false,
                source: function(request, response) {

                    $.ajax({
                        url: "{{ route('achatProdAutocomplet') }}",
                        type: 'GET',
                        data: {
                            code: $("#codeProduit").val().toUpperCase(),
                        },
                        dataType: 'json',
                        success: function(data) {
                            // // console.log(data)

                            if (data.length == 0) {
                                data[0] = {}
                                response($.map(data, function(item, key) {
                                    item.label = "pas de donnee"
                                    item.taille = 0
                                    item.ligne = key + 1
                                    return item
                                }))
                                return 0
                            }

                            response($.map(data, function(item, key) {
                                item.label = item.DesignationProduit
                                item.ligne = key + 1
                                return item
                            }))
                        }
                    })
                },
                select: function(event, ui) {
                    event.preventDefault()
                    // // console.log(ui.item)

                    $("#codeProduit").val(ui.item.DesignationProduit)

                    $.ajax({

                        url: "{{ route('detailProduitStock') }}",
                        type: 'GET',
                        data: {
                            idproduit: ui.item.IDPRODUIT,
                            AgenceSelect: $("#idSiteEnCours").val()
                        },
                        dataType: 'json',
                        success: function(response) {

                            elmtCmde = response.donneeProduit
                            // console.log(response)

                            let data = response.donneeProduit

                            let stock = parseInt(response.stocktotal.stocktotal)
                            let cmdeCR = parseInt(data.QuantiteCoursRouteProduit)
                            let StockCR = stock + cmdeCR
                            let SCRC = 0
                            let SCRCVM = 0
                            let VmProd = parseInt(data.Vm_Produit)
                            let QteMiniFseur = parseInt(data.QuantiteMiniFournisseur)
                            let QteArrondie = 0
                            let CmdeQteCmdeVM = 0

                            let CmdeQteCmde = 0

                            if (data.SeuilMiniReappro > 0 && data.SeuilMaxiReappro > 0) {
                                CmdeQteCmde = parseInt(data.SeuilMaxiReappro) - StockCR
                            } else {
                                switch (data.IDCATEGORIEROTATION) {
                                    case 1:
                                        CmdeQteCmde = parseInt(response.cotealerte[0]
                                            .SeuilMaxi_NbreVmA) * VmProd
                                        break;
                                    case 2:
                                        CmdeQteCmde = parseInt(response.cotealerte[0]
                                            .SeuilMaxi_NbreVmB) * VmProd
                                        break;
                                    case 3:
                                        CmdeQteCmde = parseInt(response.cotealerte[0]
                                            .SeuilMaxi_NbreVmC) * VmProd
                                        break;
                                }
                                CmdeQteCmde -= StockCR
                            }

                            if (CmdeQteCmde < 0) CmdeQteCmde = 0

                            if (CmdeQteCmde < QteMiniFseur) {
                                QteArrondie = QteMiniFseur - CmdeQteCmde
                                CmdeQteCmde = QteMiniFseur
                            }

                            SCRC = StockCR + CmdeQteCmde
                            if (VmProd > 0) {
                                SCRCVM = parseFloat(SCRC / VmProd).toFixed(2)
                                CmdeQteCmdeVM = CmdeQteCmde / VmProd
                            }

                            elmtCmde.SCRC = SCRC
                            elmtCmde.SCRCVM = SCRCVM
                            elmtCmde.QteCmde = CmdeQteCmde
                            elmtCmde.QteArrondie = QteArrondie
                            elmtCmde.StockCR = StockCR
                            elmtCmde.QteCmdeVM = CmdeQteCmdeVM

                            $("#CmdeColisage").val(data.ColisageProduit)
                            $("#CmdeStock").val(stock)
                            $("#CmdeCR").val(cmdeCR)
                            $("#CmdeVM").val(VmProd)
                            $("#CmdeStockCR").val(StockCR)
                            $("#CmdeQteMiniFseur").val(QteMiniFseur)

                            $("#CmdeQteCmdeVM").val(parseFloat(CmdeQteCmdeVM).toFixed(2))
                            $("#CmdeSCRC").val(SCRC)
                            $("#CmdeSCRCVM").val(SCRCVM)

                            $("#CmdeQteCmde").val(CmdeQteCmde)
                            $("#CmdeQteCmde").focus()
                            $("#CmdeQteCmde").select()

                            $('.ui-menu').hide();

                            $("#statDateVmm").val(data.Vm_0)
                            $("#statDateVm1").val(data.Vm_1)
                            $("#statDateVm3").val(data.Vm_3)
                            $("#statDateVm6").val(data.Vm_6)
                            $("#statDateVm12").val(data.Vm_12)
                            $("#statDateCatAbc").val(data.LibelleCategorieRotation)
                            $("#statDateCatAbc2").val(data.LibelleCategorieRotation)
                            $("#produitAI").val(data.ProduitAI == true ? "AI" : "AMM")
                            $("#statDateSeuilMini").val(data.SeuilMiniReappro)
                            $("#statDateSeuilMaxi").val(data.SeuilMaxiReappro)

                            $("#statActuVmm").val(data.Vm_0)
                            $("#statActuVm1").val(data.Vm_1)
                            $("#statActuVm3").val(data.Vm_3)
                            $("#statActuVm6").val(data.Vm_6)
                            $("#statActuVm12").val(data.Vm_12)
                            $("#statActuCatAbc").val(data.LibelleCategorieRotation)
                            $("#statActuSeuilMini").val(data.SeuilMiniReappro)
                            $("#statActuSeuilMaxi").val(data.SeuilMaxiReappro)

                            Graphe(response.donneegraphe)
                        }
                    })

                    return false;
                },
                close: function(event, ui) {
                    // Évitez de fermer la liste lors de la sélection d'un élément
                    $('.ui-menu').show();
                },
                focusout: function(event) {
                    // Annule la fermeture de la liste lorsque l'autocomplete perd le focus
                    event.preventDefault();
                }
            }).data("ui-autocomplete")._renderItem = function(ul, item) {

                var $div = $("<div class='' style='margin:0px important;'></div>")

                if (item.taille == 0) {
                    // console.log()
                    var li = $(
                        "<li class='' style='padding-top: 2px; font-size : 12pt;background : white; text-align : center'>Pas de donnée </li>"
                    )

                    li.append($div)
                    return li.appendTo(ul)
                } else {
                    $("<span class=' badge bg-dark' ></span>")
                        .text(item.ligne).appendTo($div)

                    classe = "none"
                    $("<span class='m-name fw-bold' style=''></span>").text(" - " + item.DesignationProduit)
                        .appendTo($div)

                    var li = $(
                        "<li class='' style='padding-top: 2px; font-size : 10pt;background : white;'></li>")

                    li.append($div)
                    return li.appendTo(ul)
                }
            }

            // Selection des element quand le focus
            $("#codeProduit").on("focus", function() {
                $("#codeProduit").select()
                $('.ui-menu').show();
            })

            // selectionner le texte de qte commandé
            $("#CmdeQteCmde").on("focus", function() {
                $("#CmdeQteCmde").select()
                $('.ui-menu').hide();
            })

            // changer la quantite commandée
            $("#CmdeQteCmde").on("input", function() {
                $(this).val(function(i, val) {
                    return val.replace(/[^0-9]/g, '');
                });
                // console.log($(this).val())

                let QteArrondie = 0
                let CmdeQteCmde = isNaN(parseInt($("#CmdeQteCmde").val())) ? 0 :parseInt($("#CmdeQteCmde").val())
                let QteMiniFseur = elmtCmde.QuantiteMiniFournisseur

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

                if (CmdeQteCmde < QteMiniFseur) {
                    swalWithBootstrapButtons.fire({
                        title: 'Voulez-vous confirmer la quantité du fournisseur ?',
                        text: `La quantité commandée est inférieure à ${QteMiniFseur}, la quantité mini. du fournisseur !`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Je valide !',
                        cancelButtonText: "Non, j'annule !",
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            QteArrondie = QteMiniFseur - CmdeQteCmde
                            CmdeQteCmde = QteMiniFseur
                        }
                    })
                }

                let QteCmdeVM = elmtCmde.Vm_Produit == 0 ? 0 : CmdeQteCmde / elmtCmde.Vm_Produit
                let SCRC = CmdeQteCmde + elmtCmde.StockCR
                let SCRCVM = elmtCmde.Vm_Produit == 0 ? 0 : SCRC / elmtCmde.Vm_Produit

                elmtCmde.QteCmde = CmdeQteCmde
                elmtCmde.QteCmdeVM = QteCmdeVM
                elmtCmde.SCRC = SCRC
                elmtCmde.SCRCVM = CmdeQteCmde + elmtCmde.StockCR
                elmtCmde.QteArrondie = QteArrondie

                $("#CmdeQteCmdeVM").val(QteCmdeVM)
                $("#CmdeSCRC").val(SCRC)
                $("#CmdeSCRCVM").val(SCRCVM)
            })

            // autoriser que les nombres
            // $("#CmdeQteCmde").on("input", function() {
            //     $(this).val(function(i, val) {
            //         return val.replace(/[^0-9]/g, '');
            //     });
            // })

            // verifier les saisis du clavier
            $('#modalCommande').on('keydown', function(event) {
                // appui du clavier entree
                if (event.which === 13) {
                    if ($("#CmdeQteCmde").is(':focus') || $("#CmdeQteCmde").is(':active')) {
                        $("#addCmde").click()
                    }
                }

                // l'appui du clavier +
                if (event.key === "+") {
                    if ($("#CmdeQteCmde").is(':focus') || $("#CmdeQteCmde").is(':active')) {
                        $("#addCmde").click()
                    }
                }
            })

            // Ajouter un produit
            $(document).on("click", "#addCmde", function() {

                if (parseInt($("#CmdeQteCmde").val()) > 0) {

                    elmtCmde.IDBUREAUACHATCMDE = $("#IDBUREAUACHAT").val()
                    elmtCmde.IDFAMILLEPRODUITCMDE = $("#IDFAMILLEPRODUIT").val()
                    elmtCmde.IDMODEEXPEDITIONCMDE = $("#IDMODEEXPEDITION").val()
                    elmtCmde.IDFOURNISSEURCMDE = $("#IDFOURNISSEUR").val()
                    elmtCmde.typeCmde = $("#typeCmde").val()
                    elmtCmde.IdCmde = $("#IdCmde").val()
                    elmtCmde._token = "{{ csrf_token() }}"

                    $.ajax({
                        url: "{{ route('createCommande') }}",
                        type: 'POST',
                        data: elmtCmde,
                        dataType: 'json',
                        success: function(response) {
                            // // console.log(response)
                            if (response.error == false) {
                                if ($("#IdCmde").val() == "") {
                                    $("#IdCmde").val(response.IDCOMMANDE)
                                    VARIDCOMMANDE = response.IDCOMMANDE
                                    // $("#dateCmde").val(response.dateCmde)
                                    $("#dateCmde").val(explodeDate(response.dateCmde, "h"))
                                }

                                chargerTableCommandeLigne(response.IDCOMMANDE).then(function() {
                                    completeHandler()
                                })
                                resetForm()
                                return 0
                            }
                            notifWarning(response.messages)
                        },
                        error: function(response) {
                            // // console.log(response)
                            notifError(response.responseJson.messages)
                        }
                    })
                } else {
                    notifWarning("Impossible de commander une quantité inférieur ou égale à 0 !")
                }
            })

            // Annuler le produit selectionné
            $("#resetCmde").click(function() {
                elmtCmde = []
                resetForm()
            })

            // Supprimer une ligne de la commande
            $("#tableCommandeLigne").on("click", "#supCmdeLigne", function() {

                var IDCOMMANDELIGNE = []
                IDCOMMANDELIGNE.push($(this).attr("data-id"))

                if (IDCOMMANDELIGNE.length == 0) {
                    notifError('Veuillez cocher au moins une ligne pour éffectuer unse suppression !')
                    return false
                }

                confirmAction

                confirmAction(() => {
                        deleteLigneCommande(IDCOMMANDELIGNE)
                        _('checkSelectAll').checked = false
                    },
                    'Voulez-vous supprimer la ligne ?',
                    'Seules les commandes non collectées seront supprimées.'
                )

            })

            // Actualiser le tableau
            $(document).on('click', "#actualiseTable", function() {
                chargerTableCommandeLigne(VARIDCOMMANDE).then(function() {
                    completeHandler()
                })
                $("#echart-bar-labels-detail").html(
                    '<img src="{{ asset('assets/images/emptydata.png') }}" style="width: 15%" alt="" srcset="">'
                )
            })

            //  traitement sur les checkbox
            $(document).on("click", "input[type=checkbox]", function() {
                if ($(this).is(':checked')) {
                    $(this).val(true)
                } else {
                    $(this).val(false)
                }
            })

            //  Valider la commande
            $(document).on("click", "#valideCmde", function() {

                if ($("#IdCmde").val() == "") {
                    notif('danger', 'Attention', "Il n'y a pas de commande à livrer !")
                    return 0
                }
                confirmMdp('{{ csrf_token() }}', () =>
                        $.ajax({
                            url: "{{ route('validCmdeFseur') }}",
                            data: {
                                IdComdeEnCours: $("#IdCmde").val(),
                                BuroSelect: $("#IDBUREAUACHAT").val(),
                                ModeExpeSelect: $("#IDMODEEXPEDITION").val(),
                                FseurSelect: $("#IDFOURNISSEUR").val(),
                                NumeroCommande: $("#numCmde").val(),
                                TypComde: $("#typeCmde option:selected").text(),
                                _token: "{{ csrf_token() }}",
                                IDFAMILLEPRODUIT: $('#IDFAMILLEPRODUIT').val(),
                                ProduitSaisonnier: $('#UniqProdSaisonnier').val(),
                                LigneAvecVenteNulle: $('#lignVenteNulle').val()
                            },
                            dataType: "json",
                            beforeSend: progressHandler(),
                            method: "post",
                            success: function(response) {
                                // // console.log(response)
                                if (response.error == false) {

                                    completeHandler()
                                    notif("success", "Félicitation", response.messages)

                                    setTimeout(() => {
                                        window.location.href =
                                            "{{ url('achats/commande/') }}"
                                    }, 3000);
                                    return 0
                                }
                                completeHandler()
                                notif("warning", "Attention", response.messages)
                            },
                            error: function(response, statut, err) {
                                // // console.log(response)
                                completeHandler()
                                notifDanger(response.responseJSON.messages)
                            }
                        }), null,
                    "Veuillez saisir votre mot de passe pour confirmer l'opération de validation"
                )
            })

            $(document).on("click", "#bntNewCmde", function() {
                confirmAction(() => {
                        window.location.href = '{{ url('achats/commande/') }}'
                    },
                    "Voulez-vous rénitialiser la page ?",
                    ""
                )
            })

            // selection de tout les elements du tableau
            _('checkSelectAll').addEventListener('click', function() {

                let value = this.checked
                let lignes = tableCommandeLigne.rows().nodes()
                $(lignes).find('#checkSelectLigne').prop('checked', value)
            })

            // selection d'une ligne du tableau
            $(document).on('click', '#checkSelectLigne', function() {
                if (_('checkSelectAll').checked == true) {
                    _('checkSelectAll').checked = false
                }
            })

            // Supprimer les lignes selectionnés
            $(document).on('click', '#suppLignesCochée', function() {

                let tabIdCmdeFseurLigne = listeLigneSelectionne("#tableCommandeLigne", '#checkSelectLigne')
                // // console.log(tabIdCmdeClientLigne)
                if (tabIdCmdeFseurLigne.length == 0) {
                    notif('danger', 'Attention',
                        'Veuillez cocher au moins une ligne pour éffectuer une suppression !')
                } else {

                    Swal.fire({
                        title: 'Voulez-vous supprimer la lignes ?',
                        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) {
                            deleteLigneCommande(tabIdCmdeFseurLigne)
                            _('checkSelectAll').checked = false
                        }
                    })
                }
            })

            $("#tableCommandeLigne").on("click", "#inputQteCmde", function() {
                $(this).select()
            })

            $("#tableCommandeLigne").on("change", "#inputQteCmde", function() {

                let IDCOMMANDELIGNE = $(this).attr("data-idcmdeligne")
                let key = parseInt($(this).attr("data-id"))
                let QTECME = $(this).val()

                let parent = $(this).parent().parent()
                let dataRupAFLign = parent.attr("data-rupAF-lign")
                let dataRupFMLign = parent.attr("data-rupFM-lign")

                if (qteCmdelIgne == QTECME) {
                    notifWarning("La quantité est restée inchangée !!")
                    return 0
                }

                changeQteCmde(IDCOMMANDELIGNE, QTECME, key, dataRupAFLign, dataRupFMLign, true)

            })

            function changeQteCmde(IDCOMMANDELIGNE, QTECME, key, dataRupAFLign, dataRupFMLign, next = true) {
                $.ajax({
                    url: "{{ route('updateQteCmdeFseurLigne') }}",
                    type: 'POST',
                    data: {
                        IDCOMMANDELIGNE: IDCOMMANDELIGNE,
                        QTECME: QTECME,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(dataRupAFLign + "_" + dataRupFMLign)
                        if (response.error == false) {

                            let subID = dataRupAFLign + "_" + dataRupFMLign

                            $("#inputSCRC-" + key).text(response.TotalStockCrComde)
                            $("#inputstockPlusCR-" + key).text(formatNumberPerf(response
                                .StockCoursRoutePays))
                            $("#inputqdeSurVM-" + key).text(response.RatioComdeEtVm)
                            $("#inputSCRCenVM-" + key).text(response.RatioStockCrComde)
                            $("#inputTotalHTFormat-" + key).text(response.TotalHT)
                            $("#inputTotalTTCFormat-" + key).text(response.TotalTTC)
                            $("#inputPoidsTotalProduit-" + key).text(formatNumberPerf(response
                                .PoidsTotalProduit))
                            $("#inputVolumeTotalProduit-" + key).text(formatNumberPerf(response
                                .VolumeTotalProduit))

                            $("#mntTxHT_" + subID).text(response.ruptureBureauAchatFsuer.mntTxHT)
                            $("#mntTxTVA_" + subID).text(response.ruptureBureauAchatFsuer.mntTxTVA)
                            $("#mntTxTTC_" + subID).text(response.ruptureBureauAchatFsuer.mntTxTTC)

                            $("#totalMntTxHT_" + subID).text(response.ruptureFamilleExp.TotalMntTxHT)
                            $("#totalMntTxTVA_" + subID).text(response.ruptureFamilleExp.TotalMntTVA)
                            $("#totalMntTxTTC_" + subID).text(response.ruptureFamilleExp.TotalMntTxTTC)

                            $("#nbreCdeClient").text(response.totalCmde.NbreLigne)
                            $("#totalHTTT").text((response.totalCmde.TotalTxHT))
                            $("#totalTVATT").text((response.totalCmde.TotalTVA))
                            $("#totalTTCTT").text((response.totalCmde.TotalTxTTC))

                            $(`input[data-id=${key}]`).val(QTECME)

                            if (next == true) {
                                $(`input[data-id=${key+1}]`).focus()
                                $(`input[data-id=${key+1}]`).select()

                                // var tousLesTD = $('#tableCommandeLigne').find('tbody tr');
                                // tousLesTD.removeClass('selected')

                                let element = $(`input[data-id=${key+1}]`)
                                let parent = element.parent().parent()
                                // parent.addClass('selected')
                                let id = parent.attr("data-prod")
                                ChargerDonneeGraphe("{{ csrf_token() }}",id, _("idSiteEnCours").value)
                            } else {
                                $(`input[data-id=${key-1}]`).focus()
                                $(`input[data-id=${key-1}]`).select()

                                // var tousLesTD = $('#tableCommandeLigne').find('tbody tr');
                                // tousLesTD.removeClass('selected')

                                let element = $(`input[data-id=${key-1}]`)
                                let parent = element.parent().parent()
                                // parent.addClass('selected')
                                let id = parent.attr("data-prod")
                                ChargerDonneeGraphe("{{ csrf_token() }}",id, _("idSiteEnCours").value)
                            }
                            changeValue = true

                            notifSuccess(response.messages)
                            return 0
                        }
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.messages)
                    }
                })
            }

            var qteCmdelIgne = 0
            var changeValue = false

            $('#tableCommandeLigne').on("click", "#inputQteCmde", function() {
                qteCmdelIgne = $(this).val()
            })

            $('#tableCommandeLigne').on("focus", "#inputQteCmde", function() {
                qteCmdelIgne = $(this).val()
            })

            // verifier les touches du clavier saisi
            $('#tableCommandeLigne').on('keydown', function(event) {
                if (event.which === 13) {
                    // if ($("#inputQteCmde").is(':focus') || $("#inputQteCmde").is(':active')) {
                    let key = parseInt($("#inputQteCmde:focus").attr("data-id"))

                    if (parseInt(qteCmdelIgne) != parseInt($("#inputQteCmde:focus").val())) {
                        $("#inputQteCmde:focus").change();
                    } else {
                        $(`input[data-id=${key+1}]`).focus()
                        $(`input[data-id=${key+1}]`).select()

                        var tousLesTD = $('#tableCommandeLigne').find('tbody tr');

                        tousLesTD.removeClass('selected')

                        let element = $(`input[data-id=${key+1}]`)
                        let parent = element.parent().parent()
                        parent.addClass('selected')
                        let id = parent.attr("data-prod")
                        ChargerDonneeGraphe("{{ csrf_token() }}",id, _("idSiteEnCours").value)
                        changeValue = false
                    }
                    // }
                }

                if (event.key === "ArrowDown") {
                    // if ($("#inputQteCmde").is(':focus') || $("#inputQteCmde").is(':active')) {

                    let key = parseInt($("#inputQteCmde:focus").attr("data-id"))

                    if (parseInt(qteCmdelIgne) != parseInt($("#inputQteCmde:focus").val())) {

                        $("#inputQteCmde:focus").attr("data-id");
                        $("#inputQteCmde:focus").change();

                    } else {
                        var inputElement = document.querySelector(`input[data-id="${key+1}"]`);

                        // Sélectionner tout le texte dans l'élément input
                        // $(`input[data-id=${key+1}]`).select()
                        $(`input[data-id=${key+1}]`).focus()
                        inputElement.select()
                        changeValue = false

                        var tousLesTD = $('#tableCommandeLigne').find('tbody tr');

                        tousLesTD.removeClass('selected')

                        let element = $(`input[data-id=${key+1}]`)
                        let parent = element.parent().parent()
                        parent.addClass('selected')
                        let id = parent.attr("data-prod")
                        ChargerDonneeGraphe("{{ csrf_token() }}",id, _("idSiteEnCours").value)
                    }
                    // }
                }

                if (event.key === "ArrowUp") {
                    // if ($("#inputQteCmde").is(':focus') || $("#inputQteCmde").is(':active')) {

                    let key = parseInt($("#inputQteCmde:focus").attr("data-id"))
                    if (parseInt(qteCmdelIgne) != parseInt($("#inputQteCmde:focus").val())) {

                        $("#inputQteCmde:focus").attr("data-id");
                        $("#inputQteCmde:focus").change();

                        let IDCOMMANDELIGNE = $("#inputQteCmde:focus").attr("data-idcmdeligne")
                        let QTECME = $("#inputQteCmde:focus").val()

                        let parent = $("#inputQteCmde:focus").parent().parent()
                        let dataRupAFLign = parent.attr("data-rupAF-lign")
                        let dataRupFMLign = parent.attr("data-rupFM-lign")

                        // console.log(dataRupAFLign, dataRupFMLign)

                        if (qteCmdelIgne == QTECME) {
                            notifWarning("La quantité est restée inchangée !!")
                            return 0
                        }

                        changeQteCmde(IDCOMMANDELIGNE, QTECME, key, dataRupAFLign, dataRupFMLign, next =
                            false)
                    } else {

                        $(`input[data-id=${key-1}]`).focus()
                        $(`input[data-id=${key-1}]`).select()
                        changeValue = false

                        var tousLesTD = $('#tableCommandeLigne').find('tbody tr');

                        tousLesTD.removeClass('selected')

                        let element = $(`input[data-id=${key-1}]`)
                        let parent = element.parent().parent()
                        parent.addClass('selected')
                        let id = parent.attr("data-prod")
                        ChargerDonneeGraphe("{{ csrf_token() }}",id, _("idSiteEnCours").value)
                    }
                    // }
                }
            })

            $('#tableCommandeLigne').on("blur", "#inputQteCmde", function() {
                // Insérez ici le code que vous souhaitez exécuter lorsque l'élément perd le focus
                if (changeValue == false) {
                    $(this).val(qteCmdelIgne)
                }
            })

            function deleteLigneCommande(IDCOMMANDELIGNE) {
                $.ajax({
                    url: "{{ route('deleteCommandeFsuerLigne') }}",
                    type: 'POST',
                    data: {
                        TABLE_IDCOMMANDELIGNE: IDCOMMANDELIGNE,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {
                            chargerTableCommandeLigne(VARIDCOMMANDE).then(function() {
                                completeHandler()
                            })
                            return 0
                        }
                        notif("warning", "Attention", "Attention !!!")
                    },
                    error: function(response) {

                        notifError(response.messages)
                    }
                })
            }

            //  Envoyer vers mode expedition
            $("#btnTransfertMaritime").click(function() {
                let listeSelect = listeLigneSelectionne("#tableCommandeLigne", '#checkSelectLigne')
                transfertVers(listeSelect, 4)
            })

            $("#btnTransfertAerien").click(function() {
                let listeSelect = listeLigneSelectionne("#tableCommandeLigne", '#checkSelectLigne')
                transfertVers(listeSelect, 1)
            })

            function transfertVers(IDCOMMANDELIGNE, IDMODES) {
                if (IDCOMMANDELIGNE.length > 0) {
                    $.ajax({
                        url: "{{ route('EnvoyerVersModeExpedition') }}",
                        data: {
                            LISTEIDLIGNE: IDCOMMANDELIGNE,
                            ID: IDMODES,
                            IdCmde : $("#IdCmde").val(),
                            _token: "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        method: "post",
                        success: function(response) {
                            // console.log(response)
                            if (response.error == false) {
                                notif("success", "Félicitation", response.messages)
                                // console.log(VARIDCOMMANDE)
                                chargerTableCommandeLigne(VARIDCOMMANDE).then(function() {
                                    completeHandler()
                                })
                                return 0
                            }

                            notif("warning", "Attention", response.messages)
                        },
                        error: function(response, statut, err) {
                            // console.log(response)
                            notifError(response.responseJSON.messages)
                        }
                    })
                } else {
                    notif("warning", "Attention", "Aucune ligne n'a été selectionnée !!")
                }
            }

            // Selectionn des lignes
            $('#tableCommandeLigne').on('click', 'tbody tr.ligneSelect', function() {

                var tousLesTD = $('#tableCommandeLigne').find('tbody tr');

                tousLesTD.removeClass('selected')

                $(this).addClass('selected');

                let id = $(this).attr("data-prod");
                let ligne = $(this).attr("data-ligne");

                ChargerDonneeGraphe("{{ csrf_token() }}",id, _("idSiteEnCours").value, ligne)

            });

            //{{-- Modal suggestion de commande --}}
            // function ChargerDonneeGraphe(idProduit, ligne) {
            //     $.ajax({
            //         url: "{{ route('donneeGraphe') }}",
            //         type: 'POST',
            //         data: {
            //             IDPRODUIT: idProduit,
            //             ICMDELIGNE: ligne,
            //             _token: "{{ csrf_token() }}"
            //         },
            //         dataType: 'json',
            //         success: function(response) {
            //             // console.log(response)
            //             if (response.error == false) {
            //                 Graphe(response.data, document.getElementById('echart-bar-labels-detail'),
            //                     false)

            //                 $("#statDateVmm").text(formatNumberPerf(response.detail.Vm_0_adate))
            //                 $("#statDateVm1").text(formatNumberPerf(response.detail.Vm_1_adate))
            //                 $("#statDateVm3").text(formatNumberPerf(response.detail.Vm_3_adate))
            //                 $("#statDateVm6").text(formatNumberPerf(response.detail.Vm_6_adate))
            //                 $("#statDateVm12").text(formatNumberPerf(response.detail.Vm_12_adate))
            //                 $("#statDateCatAbc2").text(response.detail.LibelleCategorieRotation_adate)
            //                 $("#statDateSeuilMini").text(formatNumberPerf(response.detail
            //                     .SeuilMiniReappro_adate))
            //                 $("#statDateSeuilMaxi").text(formatNumberPerf(response.detail
            //                     .SeuilMaxiReappro_adate))

            //                 $("#statActuVmm").text(formatNumberPerf(response.detail.Vm_0))
            //                 $("#statActuVm1").text(formatNumberPerf(response.detail.Vm_1))
            //                 $("#statActuVm3").text(formatNumberPerf(response.detail.Vm_3))
            //                 $("#statActuVm6").text(formatNumberPerf(response.detail.Vm_6))
            //                 $("#statActuVm12").text(formatNumberPerf(response.detail.Vm_12))
            //                 $("#statActuCatAbc").text(response.detail.LibelleCategorieRotation)
            //                 $("#statActuSeuilMini").text(formatNumberPerf(response.detail
            //                     .SeuilMiniReappro))
            //                 $("#statActuSeuilMaxi").text(formatNumberPerf(response.detail
            //                     .SeuilMaxiReappro))

            //                 $("#statDateCatAbcLigne").val(response.detail.LibelleCategorieRotation)
            //                 return 0
            //             }
            //             notifWarning("Attention !!!")
            //         },
            //         error: function(response) {
            //             // console.log(response)
            //             notifError(response.messages)
            //         }
            //     })
            // }

            $("#btnSugCmde").click(function() {
                if (parseInt($("#idSiteEnCours").val()) != 1) {
                    alertSwal("Impossible d'effectuer cette opération sur l'agence commerciale !")
                    return false;
                }

                if (VARIDCOMMANDE != 0 || VARIDCOMMANDE != "") {
                    return false
                }

                $("#modalSuggestionCmde").modal("show")
            })

            // changement de type de commande sur modal
            $("#IDTYPECMDESUG").on("change", function() {
                if ($(this).val() == "3") {
                    $("#NBREVMSUG").val(1)
                    $("#NBREVMSUG").removeAttr("disabled")
                    $("#zoneProdSais").attr("hidden", "hidden")
                    $("#zoneNbreJours").attr("hidden", "hidden")
                } else {
                    $("#NBREVMSUG").val(0)
                    $("#NBREVMSUG").removeAttr("disabled")
                    $("#NBREVMSUG").attr("disabled", "disabled")
                    $("#zoneProdSais").removeAttr("hidden")
                    $("#zoneNbreJours").removeAttr("hidden")
                }
            })

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

                if (VARIDCOMMANDE == 0 || VARIDCOMMANDE == "") {
                    return false
                }

                chargerTableCommandeLigne(VARIDCOMMANDE,
                    Filtres = true,
                    IDBUREAUACHAT = $('#IDBUREAUACHAT').val(),
                    IDFOURNISSEUR = $('#IDFOURNISSEUR').val(),
                    IDMODEEXPEDITION = $('#IDMODEEXPEDITION').val(),
                    IDFAMILLEPRODUIT = $('#IDFAMILLEPRODUIT').val(),
                    ProduitSaisonnier = $('#UniqProdSaisonnier').val(),
                    LigneAvecVenteNulle = $('#lignVenteNulle').val()
                ).then(() =>  completeHandler(), () => completeHandler())
            })

            $("#modalSuggestionCmde").on("click", "#inputSubmit", function() {
                if ($("#IDTYPECMDESUG").val() == "2" || $("#IDTYPECMDESUG").val() == "4") {

                    confirmAction(() => {
                            deleteCmdeLigne($("#idCmdeEnCours").val(), tabIdCmdeClientLigne.data,
                                tabIdCmdeClientLigne.dataPack)
                            _('checkSelectAll').checked = false
                        },
                        'Voulez-vous actualiser les VM, catégories de rotation et les seuils pays ?',
                        ""
                    )


                    $("#typeCmde").val($("#IDTYPECMDESUG").val()).change()
                    $("#modalSuggestionCmde").modal("hide")
                    return 0
                }

                if ($("#rechercheProdSaison").val() == "true") {
                    if (parseInt($("#NBREJOURSUG").val()) <= 0) {
                        alertSwal("Veuillez saisir un nombre de jour supérieur à 0 !")

                        $("#NBREJOURSUG").focus()
                        $("#NBREJOURSUG").select()
                        return 0
                    }

                    if (parseFloat($("#COEFFVMSUG").val()) <= 0) {
                        alertSwal("Veuillez saisir un coefficient supérieur à 0 !")

                        $("#COEFFVMSUG").focus()
                        $("#COEFFVMSUG").select()
                        return 0
                    }
                }

                if ($("#IDTYPECMDESUG").val() == "3") {
                    if (parseInt($("#NBREVMSUG").val()) <= 0) {
                        $("#typeCmde").val($("#IDTYPECMDESUG").val()).change()
                        $("#IDBUREAUACHAT").val(0).change()
                        $("#IDFAMILLEPRODUIT").val(0).change()
                        $("#IDMODEEXPEDITION").val(0).change()
                        $("#IDFOURNISSEUR").val(0).change()
                        $("#modalSuggestionCmde").modal("hide")
                        return 0
                    }
                }

                let formDataSug = new FormData(_("formCmdeSug"))
                formDataSug.append("_token", "{{ csrf_token() }}")
                formDataSug.append("IDAGENCE", $("#idSiteEnCours").val())
                formDataSug.append("rechercheProdSaison", $("#rechercheProdSaison").val())

                $.ajax({
                    url: "{{ route('SuggestionCmde') }}",
                    type: 'POST',
                    data: formDataSug,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {
                            // VARIDCOMMANDE = response.IDCOMMANDE
                            // $("#dateCmde").val(explodeDate(response.DateCmde, "h"))
                            $("#modalSuggestionCmde").modal("hide")
                            completeHandler()
                            // chargerTableCommandeLigne(VARIDCOMMANDE).then(function() {
                            //     completeHandler()
                            // })
                            alertSwal(response.messages)
                            return 0
                        }
                        completeHandler()
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            //{{-- Integration par csv --}}

            $("#integrerCsv").change(function() {
            var filename = $(this).val()

            if (filename) {
                $("#btnIntegrerCsv").click()
            }
        })

        $("#labelIntegrerCSV").click(function() {
            if ($("#idSiteEnCours").val() != "1") {
                alertSwal("Impossible d'effectuer cette opération sur l'agence commerciale !")
                return;
            }

            $("#integrerCsv").click()
        })

        $("#formIntegrerCsv").on("submit", function(e) {
            e.preventDefault();
            let data = new FormData(this)

            data.append('IDBUREAUACHATCMDE', $("#IDBUREAUACHAT").val())
            data.append('IDFAMILLEPRODUITCMDE', $("#IDFAMILLEPRODUIT").val())
            data.append('IDMODEEXPEDITIONCMDE', $("#IDMODEEXPEDITION").val())
            data.append('IDFOURNISSEURCMDE', $("#IDFOURNISSEUR").val())
            data.append('typeCmde', $("#typeCmde").val())
            data.append('AgenceSelect', $("#idSiteEnCours").val())
            data.append('IdCmde', $("#IdCmde").val())
            data.append('_token', "{{ csrf_token() }}")

            $.ajax({
                url: "{{ route('IntegrerProdCsvFseur') }}",
                type: 'post',
                data: data,
                dataType: 'json',
                processData: false,
                contentType: false,
                beforeSend: progressHandler(),
                success: function(reponse, statut) {
                    // console.log(reponse)
                    if (reponse.error == false) {

                        $("#dateCmde").val(explodeDate(reponse.dateCmdeClient, "h"))
                        $("#IdCmde").val(reponse.IDCOMMANDE)

                        completeHandler()
                        VARIDCOMMANDE = reponse.IDCOMMANDE

                        if( VARIDCOMMANDE == null) return false
                        chargerTableCommandeLigne(VARIDCOMMANDE).then(function() {
                            completeHandler()
                        })

                        // $("#lienCsv").attr("href", `{{ asset('${reponse.file}') }}`)
                        // _("lienCsv").click()

                        downloadExcel(reponse.file, reponse.fileName)

                        notifSuccess( reponse.messages +
                            "<br> nombre de ligne : " + reponse.nbreLigne +
                            "<br> nombre de ligne insérée : " + reponse.nbreLigneIntegre)
                        return
                    }
                    completeHandler()
                    notif("warning", "Attention", reponse.messages)
                },
                error: function(reponse, statut, err) {
                    // console.log(reponse)
                    completeHandler()
                    notifError(reponse.reponseJSON.messages)
                }
            })
        })

        $("#btnImprimMatrice").click(function() {
            if(VARIDCOMMANDE == 0){
                alertSwal("Aucune commande disponible")
                return
            }

            $.ajax({
                url: "{{ route('imprimeMatrice') }}",
                type: 'POST',
                data: {
                    IDCOMMANDE: VARIDCOMMANDE,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json',
                beforeSend: progressHandler(),
                success: function(response) {
                    // console.log(response)
                    if (response.error == false) {

                        // Récupérez le PDF en base64 depuis la réponse
                        var pdfBase64 = response.tablePDF;

                        // Créez un objet blob à partir du PDF en base64
                        var blob = b64toBlob(pdfBase64, '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
                        var printWindow = window.open(blobUrl);
                        // printWindow.print();
                        completeHandler()
                        return 0
                    }
                    completeHandler()
                    notif("warning", "Attention", response.messages)
                },
                error: function(response) {
                    completeHandler()
                    // console.log(response)
                    notifError(response.messages)
                }
            })
        })

        function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
            var byteCharacters = atob(b64Data);
            var byteArrays = [];

            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);

                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }

                var byteArray = new Uint8Array(byteNumbers);
                byteArrays.push(byteArray);
            }

            var blob = new Blob(byteArrays, {
                type: contentType
            });
            return blob;
        }

        function chargerTableCommandeLigne(IDCOMMANDES, Filtres = false, IDBUREAUACHAT = 0, IDFOURNISSEUR = 0,
                                           IDMODEEXPEDITION = 0, IDFAMILLEPRODUIT = 0, ProduitSaisonnier = 0, LigneAvecVenteNulle = 0) {

            let formFiltre = new FormData(_('formFiltre'))
            formFiltre.append('IDCOMMANDE', IDCOMMANDES)

            if (Filtres == true) {
                formFiltre.append('IDBUREAUACHAT', IDBUREAUACHAT)
                formFiltre.append('IDFOURNISSEUR', IDFOURNISSEUR)
                formFiltre.append('IDMODEEXPEDITION', IDMODEEXPEDITION)
                formFiltre.append('IDFAMILLEPRODUIT', IDFAMILLEPRODUIT)
                formFiltre.append('ProduitSaisonnier', ProduitSaisonnier)
                formFiltre.append('LigneAvecVenteNulle', LigneAvecVenteNulle)
            }

            formFiltre.append('_token', '{{ csrf_token() }}')
            return new Promise((resolve, reject) => {
                $.ajax({

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

                        if (response.success == 1) {

                            try {

                                let obj = response.data
                                let commande = response.commande

                                let nbre = 0
                                let totalHT = 0
                                let totalTVA = 0
                                let totalTTC = 0

                                if (obj.length == 0) {
                                    $("#tableCommandeLigne #nbreCdeClient").text(0)
                                    $("#totalHTTT").text(0)
                                    $("#totalTVATT").text(0)
                                    $("#totalTTCTT").text(0)
                                } else {
                                    $("#zoneBtnNewCmde").removeClass("d-none")
                                }

                                if ($("#IdCmde").val() == "" && VARIDCOMMANDE != "") {
                                    $('#IDBUREAUACHAT').val(commande.IDBUREAUACHAT)
                                        .change()
                                    $('#IDFAMILLEPRODUIT').val(commande.IDFAMILLEPRODUIT)
                                        .change()
                                    $('#IDMODEEXPEDITION').val(commande.IDMODEEXPEDITION)
                                        .change()
                                    $('#IDFOURNISSEUR').val(commande.IDFOURNISSEUR).change()

                                    let typeCmde = parseInt(commande.TypeCommande) == 0 ?
                                        1 : commande.TypeCommande
                                    $('#typeCmde').val(typeCmde).change()
                                    $('#dateCmde').val(explodeDate(commande.DateCommande, "h"))
                                    $('#numCmde').val(commande.NumeroCommande)
                                    $("#IdCmde").val(response.idCommande)

                                    // // console.log(response.commande.TypeCommande)
                                    // return 0
                                    // $("#lignVenteNulle").val(response.commande.IDCOMMANDE)
                                    // $("#lignVenteNulle").pro(response.commande.IDCOMMANDE)
                                    // $("#IdCmde").val(response.commande.IDCOMMANDE)
                                }

                                let tableData = {}

                                tableCommandeLigne = remplissageDataTable({
                                    obj: obj,
                                    IdentifiantDuTableau: "#tableCommandeLigne",
                                    bFilter: false,
                                    lengthChange: false,
                                    paging: false,
                                    scrollY: ajusterHauteurTableau() + "px",
                                    scrollX: true,
                                    // ordering: false,
                                    drawCallback: function(settings) {
                                        var api = settings.oInstance.api();
                                        var rows = api.rows().nodes();
                                        var last = null;
                                        let tailleDonne = api.data().length

                                        let oldAchat = ""
                                        let oldFseur = ""
                                        let oldFamille = ""

                                        let step1 = false

                                        let nbreLigne = 0
                                        let nbreLigneFamille = 0
                                        let nbreLigneBureau = 0

                                        let TxHT = 0
                                        let TxTVA = 0
                                        let TxTTC = 0
                                        let TxHTTotal = 0
                                        let TxTVATotal = 0
                                        let TxTTCTotal = 0

                                        let QteMinFseur = 0

                                        let LibelleFamilleProduit = 0
                                        let LibelleModeExpedition = 0

                                        let rupBureauAchatFseur = 0
                                        let rupFamilleExp = 0

                                        function selectLine(numLigne,
                                                            bureauAchat, fournisseur, famille,
                                                            modeExp, nbreLigne = 0, ruptBF = 0,
                                                            rupFM = 0, TxHT = 0,
                                                            TxTVA =
                                                            0, TxTTC = 0, QteMinFseur = 0,
                                                            IdBonLigne = "") {

                                            if (IdBonLigne == "") {
                                                switch (numLigne) {
                                                    case 1:
                                                        return `<tr class="group " style="background : #F9F8B4">\
                                                                        <td colspan="3" style=" font-size : 9pt" class="ps-3"> Bureau d'achat : <span style="font-weight: bold; color: #D3361D;"> ${bureauAchat  ?? ""} </span> - Fournisseur : <span style="font-weight: bold;color: #D3361D;">${fournisseur} </span> </td>\
                                                                        <td colspan="31" style="font-size : 9pt" class="ps-3">
                                                                            Nb Ligne : <span style="font-weight: bold; color: #D3361D" id="nbreLigne_${ruptBF}_${rupFM}"> ${nbreLigne} </span> &nbsp;&nbsp;&nbsp;
                                                                            <span class="ps-3">TxHT : <span style="font-weight: bold; color: #D3361D" id="totalMntTxHT_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxHT))} </span> </span>
                                                                            <span class="ps-3">TxTVA : <span style="font-weight: bold; color: #D3361D" id="totalMntTxTVA_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxTVA))} </span> </span>
                                                                            <span class="ps-3">TxTTC : <span style="font-weight: bold; color: #D3361D" id="totalMntTxTTC_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxTTC))} </span> </span>
                                                                            <span class="ps-3">Mini Fournisseur : <span style="font-weight: bold;" id="miniFser_${ruptBF}_${rupFM}"> ${formatNumberPerf(QteMinFseur)} </span> </span>
                                                                            <span class="ps-3">Ecart Fournisseur HT : <span style="font-weight: bold; color: #D3361D" id="ecartFser_${ruptBF}_${rupFM}">0</span></span>
                                                                        </td>\

                                                                    </tr>`
                                                        break;
                                                    case 2:
                                                        return `<tr class="group" style="background : #FFFFE8">\
                                                                        <td colspan="3" style="font-size : 9pt" class="ps-3"> Famille : <span style="font-weight: bold;">${famille  ?? ""}</span> - Mode : <span style="font-weight: bold;">${modeExp ?? ""} </span> </td>\
                                                                        <td colspan="31" style="font-size : 9pt" class="ps-3"> Nb Ligne : <span id="nbreLigneSR_${ruptBF}_${rupFM}"> ${nbreLigne} </span>
                                                                        <span class="ps-3"> TxHT : <span id="mntTxHT_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxHT))} </span> </span>\
                                                                        <span class="ps-3"> TxTVA : <span id="mntTxTVA_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxTVA))} </span> </span>\
                                                                        <span class="ps-3"> TxTTC : <span id="mntTxTTC_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxTTC))} </span> </span>\
                                                                        </td>\
                                                                    </tr>`
                                                        break;
                                                    case 3:
                                                        // return `<tr class="group" style="background : rgb(73, 182, 245, .1)" data-id="ligne3-${numLigne}" data-rupFM='${ruptBF}'>\
                                                        //             <td colspan="3" style="font-size : 9pt" class="ps-3"> Famille : <span style="font-weight: bold;">${famille  ?? ""}</span> - Mode : <span style="font-weight: bold;">${modeExp  ?? ""} </span></td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3"> Nb Ligne : ${nbreLigne} </td>\
                                                        //             <td colspan="2" style="font-size : 9pt" class="ps-3"> TxHT : <span id="mntTxHT-${ruptBF}-${rupFM}"> ${formatNumberPerf(parseInt(TxHT))} </span> </td>\
                                                        //             <td colspan="2" style="font-size : 9pt" class="ps-3"> TxTVA : <span id="mntTxTVA-${ruptBF}-${rupFM}"> ${formatNumberPerf(parseInt(TxTVA))} </span> </td>\
                                                        //             <td colspan="26" style="font-size : 9pt" class="ps-3"> TxTTC : <span id="mntTxTTC-${ruptBF}-${rupFM}"> ${formatNumberPerf(parseInt(TxTTC))} </span> </td>\
                                                        //         </tr>`

                                                        // `<tr class="group" style="background : rgb(73, 182, 245, .1)" data-id="ligne3-${numLigne}" data-rupFM='${ruptBF}'>\
                                                        //     Famille : <span style="font-weight: bold;">${famille  ?? ""}</span> - Mode : <span style="font-weight: bold;">${modeExp  ?? ""} </span></td>\
                                                        //     Nb Ligne : ${nbreLigne} </td>\`

                                                        tableData["nbreLigneSR_" +ruptBF + "_" +rupFM] = formatNumberPerf(parseInt(nbreLigne))
                                                        tableData["mntTxHT_" +ruptBF + "_" +rupFM] =formatNumberPerf(parseInt(TxHT))
                                                        tableData["mntTxTVA_" +ruptBF + "_" +rupFM] =formatNumberPerf(parseInt(TxTVA))
                                                        tableData["mntTxTTC_" +ruptBF + "_" +rupFM] =formatNumberPerf(parseInt(TxTTC))

                                                        break;
                                                    case 4:
                                                        // return `<tr class="group" style="background : #F3F5F6" data-rupAF='${rupFM}'>\
                                                        //             <td colspan="3" style="color: #D3361D; font-size : 9pt" class="ps-3"> Bureau d'achat : <span style="font-weight: bold;">${bureauAchat  ?? ""}</span>  - Fournisseur : <span style="font-weight: bold;">${fournisseur  ?? ""}</span></td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3"> Nb Ligne : <span style="font-weight: bold; color: #D3361D"> ${nbreLigne} </span> </td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3"> TxHT : <span style="font-weight: bold; color: #D3361D" id="totalMntTxHT_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxHT))} </span> </td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3"> TxTVA : <span style="font-weight: bold; color: #D3361D" id="totalMntTxTVA_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxTVA))} </span> </td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3"> TxTTC : <span style="font-weight: bold; color: #D3361D" id="totalMntTxTTC_${ruptBF}_${rupFM}"> ${formatNumberPerf(parseInt(TxTTC))} </span> </td>\
                                                        //             <td colspan="2" style="font-size : 9pt" class="ps-3"> Mini Fournisseur : <span style="font-weight: bold;"> ${formatNumberPerf(QteMinFseur)} </span></td>\
                                                        //             <td colspan="25" style="font-size : 9pt" class="ps-3"> Ecart HT : <span style="font-weight: bold; color: #D3361D"> </span></td>\
                                                        //         </tr>`

                                                        tableData["nbreLigne_" +ruptBF + "_" +rupFM] =formatNumberPerf(nbreLigne)
                                                        tableData["totalMntTxHT_" +ruptBF + "_" +rupFM] =formatNumberPerf(TxHT)
                                                        tableData["totalMntTxTVA_" +ruptBF + "_" +rupFM] =formatNumberPerf(TxTVA)
                                                        tableData["totalMntTxTTC_" +ruptBF + "_" +rupFM] =formatNumberPerf(TxTTC)
                                                        tableData["miniFser_" +ruptBF + "_" +rupFM] =formatNumberPerf(QteMinFseur)
                                                        tableData["ecartFser_" +ruptBF + "_" +rupFM] =formatNumberPerf(QteMinFseur)
                                                        break;
                                                }
                                            } else {
                                                switch (numLigne) {
                                                    case 1:
                                                        return `<tr class="group " style="background : #F9F8B4">\
                                                                        <td colspan="3" style="color: #D3361D; font-size : 9pt" class="ps-3"> Bureau d'achat : <span style="font-weight: bold;"> ${bureauAchat  ?? ""} </span> - Fournisseur : <span style="font-weight: bold;">${fournisseur  ?? ""} </span> </td>\
                                                                        <td colspan="31" style="font-size : 9pt" class="ps-3 text-muted"> Nb Ligne : <span style="font-weight: bold; color: #D3361D" id="nbreLigne_${ruptBF}_${rupFM}"> ${nbreLigne} </span>
                                                                            <span class="ps-3 text-muted"> TxHT : <span style="font-weight: bold; color: #D3361D" id="totalMntTxHT_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxHT))} </span> </span>\
                                                                            <span class="ps-3 text-muted"> TxTVA : <span style="font-weight: bold; color: #D3361D" id="totalMntTxTVA_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxTVA))} </span> </span>\
                                                                            <span class="ps-3 text-muted"> TxTTC : <span style="font-weight: bold; color: #D3361D" id="totalMntTxTTC_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxTTC))} </span> </span>\
                                                                            <span class="ps-3 text-muted"> Mini Fournisseur : <span style="font-weight: bold;"> ${formatNumberPerf(QteMinFseur)} </span></span>\
                                                                            <span class="ps-3 text-muted"> Ecart Fournisseur HT : <span style="font-weight: bold; color: #D3361D"> </span></span>\
                                                                        </td>\
                                                                    </tr>`
                                                        break;
                                                    case 2:
                                                        return `<tr class="group" style="background : #FFFFE8">\
                                                                        <td colspan="3" style="font-size : 9pt" class="ps-3"> Famille : <span style="font-weight: bold;">${famille  ?? ""}</span> - Mode : <span style="font-weight: bold;">${modeExp  ?? ""} </span> </td>\
                                                                        <td colspan="31" style="font-size : 9pt" class="ps-3 text-muted"> Nb Ligne : <span id="nbreLigneSR_${ruptBF}_${rupFM}"> ${nbreLigne} </span>
                                                                            <span class="ps-3 text-muted"> TxHT : <span id="mntTxHT_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxHT))} </span> </span>\
                                                                            <span class="ps-3 text-muted"> TxTVA : <span id="mntTxTVA_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxTVA))} </span> </span>\
                                                                            <span class="ps-3 text-muted"> TxTTC : <span id="mntTxTTC_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxTTC))} </span> </span>\
                                                                        </td>\
                                                                    </tr>`
                                                        break;
                                                    case 3:
                                                        // return `<tr class="group" style="background : rgb(73, 182, 245, .1)" data-id="ligne3-${numLigne}" data-rupFM='${ruptBF}'>\
                                                        //             <td colspan="3" style="font-size : 9pt" class="ps-3 text-muted"> Famille : <span style="font-weight: bold;">${famille  ?? ""}</span> - Mode : <span style="font-weight: bold;">${modeExp  ?? ""} </span></td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3 text-muted"> Nb Ligne : ${nbreLigne} </td>\
                                                        //             <td colspan="2" style="font-size : 9pt" class="ps-3 text-muted"> TxHT : <span id="mntTxHT-${ruptBF}-${rupFM}"> ${(formatNumberPerf(TxHT))} </span> </td>\
                                                        //             <td colspan="2" style="font-size : 9pt" class="ps-3 text-muted"> TxTVA : <span id="mntTxTVA-${ruptBF}-${rupFM}"> ${(formatNumberPerf(TxTVA))} </span> </td>\
                                                        //             <td colspan="26" style="font-size : 9pt" class="ps-3 text-muted"> TxTTC : <span id="mntTxTTC-${ruptBF}-${rupFM}"> ${(formatNumberPerf(TxTTC))} </span> </td>\
                                                        //         </tr>`

                                                        // _("mntTxHT-"+ruptBF+"-"+rupFM).innerText = formatNumberPerf(parseInt(TxHT))
                                                        //             _("mntTxTVA-"+ruptBF+"-"+rupFM).innerText = formatNumberPerf(parseInt(TxTVA))
                                                        //             _("mntTxTTC-"+ruptBF+"-"+rupFM).innerText = formatNumberPerf(parseInt(TxTTC))

                                                        tableData["nbreLigneSR_" +ruptBF + "_" +rupFM] =formatNumberPerf(parseInt(nbreLigne))
                                                        tableData["mntTxHT_" +ruptBF + "_" +rupFM] =formatNumberPerf(parseInt(TxHT))
                                                        tableData["mntTxTVA_" +ruptBF + "_" +rupFM] =formatNumberPerf(parseInt(TxTVA))
                                                        tableData["mntTxTTC_" +ruptBF + "_" +rupFM] =formatNumberPerf(parseInt(TxTTC))

                                                        break;
                                                    case 4:
                                                        // return `<tr class="group" style="background : #F3F5F6" data-rupAF='${(rupFM)}'>\
                                                        //             <td colspan="3" style="color: #D3361D; font-size : 9pt" class="ps-3"> Bureau d'achat : <span style="font-weight: bold;">${bureauAchat  ?? ""}</span>  - Fournisseur : <span style="font-weight: bold;">${fournisseur  ?? ""}</span></td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3 text-muted"> Nb Ligne : <span style="font-weight: bold; color: #D3361D"> ${nbreLigne} </span> </td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3 text-muted"> TxHT : <span style="font-weight: bold; color: #D3361D" id="totalMntTxHT_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxHT))} </span> </td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3 text-muted"> TxTVA : <span style="font-weight: bold; color: #D3361D" id="totalMntTxTVA_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxTVA))} </span> </td>\
                                                        //             <td colspan="1" style="font-size : 9pt" class="ps-3 text-muted"> TxTTC : <span style="font-weight: bold; color: #D3361D" id="totalMntTxTTC_${ruptBF}_${rupFM}"> ${(formatNumberPerf(TxTTC))} </span> </td>\
                                                        //             <td colspan="2" style="font-size : 9pt" class="ps-3 text-muted"> Mini Fournisseur : <span style="font-weight: bold;"> ${formatNumberPerf(QteMinFseur)} </span></td>\
                                                        //             <td colspan="25" style="font-size : 9pt" class="ps-3 text-muted"> Ecart HT : <span style="font-weight: bold; color: #D3361D"> </span></td>\
                                                        //         </tr>`


                                                        // Nb Ligne : <span style="font-weight: bold; color: #D3361D"> ${nbreLigne} </span> </td>\
                                                        tableData["nbreLigne_" +ruptBF+ "_" +rupFM] = formatNumberPerf(nbreLigne)
                                                        tableData["totalMntTxHT_" +ruptBF+ "_" +rupFM] = formatNumberPerf(TxHT)
                                                        tableData["totalMntTxTVA_" +ruptBF+ "_" +rupFM] = formatNumberPerf(TxTVA)
                                                        tableData["totalMntTxTTC_" +ruptBF+ "_" +rupFM] = formatNumberPerf(TxTTC)
                                                        tableData["miniFser_" +ruptBF + "_" +rupFM] = formatNumberPerf(QteMinFseur)
                                                        tableData["ecartFser_" +ruptBF + "_" +rupFM] = formatNumberPerf(QteMinFseur)

                                                        // Ecart HT : <span style="font-weight: bold; color: #D3361D"> </span></td>\

                                                        break;
                                                }
                                            }
                                        }

                                        let multiSR = 0

                                        api.rows().every(function() {

                                            let rowData = this.data();
                                            // // console.log(rowData.);
                                            // // console.log(rowData)
                                            let libelleTournee = rowData
                                                .LibelleTournee; // Remplacez 10 par l'index de la colonne souhaitée
                                            let HeureDepartTourneeFormat = rowData.HeureDepartTourneeFormat

                                            let dataUp = ""
                                            let dataDown = ""

                                            if (nbre == 0) {

                                                rupBureauAchatFseur++
                                                rupFamilleExp++
                                                nbreLigneFamille++
                                                nbreLigneBureau++

                                                dataUp += selectLine(1,
                                                    rowData
                                                        .NomBureauAchat ?? "",
                                                    rowData
                                                        .NomFournisseur ?? "",
                                                    rowData
                                                        .LibelleFamilleProduit ?? "",
                                                    rowData
                                                        .LibelleModeExpedition ?? "",
                                                    0,
                                                    rupBureauAchatFseur,
                                                    rupFamilleExp,
                                                )

                                                dataUp += selectLine(
                                                    2,
                                                    "",
                                                    "",
                                                    rowData
                                                        .LibelleFamilleProduit ?? "",
                                                    rowData
                                                        .LibelleModeExpedition ?? "",
                                                    0,
                                                    rupBureauAchatFseur,
                                                    rupFamilleExp,
                                                )

                                                oldAchat = rowData
                                                    .NomBureauAchat
                                                oldFseur = rowData
                                                    .NomFournisseur
                                                oldFamille = rowData
                                                    .LibelleFamilleProduit
                                                oldExpedition = rowData
                                                    .LibelleModeExpedition

                                                TxHT += parseInt(rowData
                                                    .TotalHT)
                                                TxTVA += parseInt(
                                                    rowData
                                                        .TotalTaxe)
                                                TxTTC += parseInt(
                                                    rowData.TotalTTC
                                                )

                                            }

                                            if (nbre > 0) {

                                                if (oldAchat != rowData
                                                        .NomBureauAchat ||
                                                    oldFseur != rowData
                                                        .NomFournisseur) {

                                                    // dataUp +=
                                                    selectLine(3,
                                                        "", "",
                                                        oldFamille,
                                                        LibelleModeExpedition,
                                                        nbreLigneFamille,
                                                        rupBureauAchatFseur,
                                                        rupFamilleExp,
                                                        TxHT,
                                                        TxTVA,
                                                        TxTTC,
                                                        rowData
                                                            .IDBONLIVRAISONLIGNE
                                                    )
                                                    // dataUp +=
                                                    selectLine(4,
                                                        oldAchat,
                                                        oldFseur,
                                                        "",
                                                        "",
                                                        nbreLigneBureau,
                                                        rupBureauAchatFseur,
                                                        multiSR >
                                                        1 ? 1 :
                                                            rupFamilleExp,
                                                        TxHTTotal,
                                                        TxTVATotal,
                                                        TxTTCTotal,
                                                        QteMinFseur,
                                                        rowData
                                                            .IDBONLIVRAISONLIGNE
                                                    )

                                                    rupBureauAchatFseur++
                                                    rupFamilleExp = 0
                                                    rupFamilleExp++


                                                    dataUp +=
                                                        selectLine(1,
                                                            rowData.NomBureauAchat,
                                                            rowData.NomFournisseur,
                                                            "", "",
                                                            0,
                                                            rupBureauAchatFseur,
                                                            rupFamilleExp
                                                        )

                                                    dataUp +=
                                                        selectLine(2,
                                                            "", "",
                                                            rowData
                                                                .LibelleFamilleProduit,
                                                            rowData
                                                                .LibelleModeExpedition,
                                                            0,
                                                            rupBureauAchatFseur,
                                                            rupFamilleExp
                                                        )


                                                    multiSR = 0
                                                    multiSR++
                                                    nbreLigneBureau = 0
                                                    nbreLigneFamille = 0

                                                    TxHT = 0
                                                    TxTVA = 0
                                                    TxTTC = 0

                                                    TxHTTotal = 0
                                                    TxTVATotal = 0
                                                    TxTTCTotal = 0

                                                } else if (oldFamille != rowData.LibelleFamilleProduit || oldExpedition != rowData.LibelleModeExpedition ) {
                                                    multiSR++
                                                    // dataUp +=
                                                    selectLine(3,
                                                        "", "",
                                                        oldFamille,
                                                        LibelleModeExpedition,
                                                        nbreLigneFamille,
                                                        rupBureauAchatFseur,
                                                        rupFamilleExp,
                                                        TxHT,
                                                        TxTVA,
                                                        TxTTC,
                                                        rowData
                                                            .IDBONLIVRAISONLIGNE
                                                    )

                                                    // rupFamilleExp = 0
                                                    rupFamilleExp += 1

                                                    dataUp +=
                                                        selectLine(2,
                                                            "", "",
                                                            rowData.LibelleFamilleProduit,
                                                            rowData.LibelleModeExpedition,
                                                            nbreLigneFamille,
                                                            rupBureauAchatFseur,
                                                            rupFamilleExp,
                                                            TxHT,
                                                            TxTVA,
                                                            TxTTC
                                                        )

                                                    // oldFamille = rowData.LibelleFamilleProduit
                                                    // oldExpedition =rowData.LibelleModeExpedition

                                                    nbreLigneFamille = 0

                                                    TxHT = 0
                                                    TxTVA = 0
                                                    TxTTC = 0

                                                }

                                                nbreLigneFamille += 1
                                                nbreLigneBureau += 1

                                                TxHT += parseInt(rowData.TotalHT)
                                                TxTVA += parseInt(rowData.TotalTaxe)
                                                TxTTC += parseInt(rowData.TotalTTC)
                                            }

                                            oldAchat = rowData.NomBureauAchat
                                            oldFseur = rowData.NomFournisseur
                                            oldFamille = rowData.LibelleFamilleProduit
                                            oldExpedition = rowData.LibelleModeExpedition

                                            TxHTTotal += parseInt(rowData.TotalHT)
                                            TxTVATotal += parseInt(rowData.TotalTaxe)
                                            TxTTCTotal += parseInt(rowData.TotalTTC)

                                            if (nbre == tailleDonne -1) {
                                                selectLine(3,
                                                    "", "",
                                                    oldFamille,
                                                    LibelleModeExpedition,
                                                    nbreLigneFamille,
                                                    rupBureauAchatFseur,
                                                    rupFamilleExp,
                                                    TxHT,
                                                    TxTVA,
                                                    TxTTC,
                                                    rowData
                                                        .IDBONLIVRAISONLIGNE
                                                )
                                                // dataUp +=
                                                selectLine(4,
                                                    oldAchat,
                                                    oldFseur,
                                                    "",
                                                    "",
                                                    nbreLigneBureau,
                                                    rupBureauAchatFseur,
                                                    multiSR >
                                                    1 ? 1 :
                                                        rupFamilleExp,
                                                    TxHTTotal,
                                                    TxTVATotal,
                                                    TxTTCTotal,
                                                    QteMinFseur,
                                                    rowData
                                                        .IDBONLIVRAISONLIGNE
                                                )
                                            }

                                            // QteMinFseur = rowData.QuantiteMiniFournisseur
                                            QteMinFseur = rowData
                                                .ValeurMiniCommande

                                            // // console.log(dataUp)
                                            // // console.log(dataDown)

                                            $(rows).eq(this.index()).before(dataUp);
                                            // $(rows).eq(this.index()).after(dataDown);

                                            $(rows).eq(this.index()).attr("data-rupAF-lign", rupBureauAchatFseur)
                                            $(rows).eq(this.index()).attr("data-rupFM-lign", rupFamilleExp)

                                            nbre++

                                            totalHT += parseInt(rowData
                                                .TotalHT)
                                            totalTVA += parseInt(rowData
                                                .TotalTaxe)
                                            totalTTC += parseInt(rowData
                                                .TotalTTC)

                                            LibelleFamilleProduit =
                                                rowData
                                                    .LibelleFamilleProduit
                                            LibelleModeExpedition =
                                                rowData
                                                    .LibelleModeExpedition

                                        });
                                    },
                                    createdRow: function(row, data, dataIndex) {
                                        // Ajoutez la classe personnalisée aux lignes
                                        $(row).attr('data-prod', data
                                            .IDPRODUIT);

                                        // Ajoutez la classe personnalisée aux lignes
                                        $(row).attr('data-ligne', data
                                            .IDCOMMANDELIGNE);

                                        // Ajoutez la classe personnalisée aux lignes
                                        $(row).addClass('ligneSelect');
                                        if (data.IDBONLIVRAISONLIGNE != null) {
                                            $('td', row).addClass("text-muted")
                                            $(row).removeClass('ligneSelect');
                                        }
                                    },
                                });

                                $.each(tableData, function(key, value) {
                                    // // console.log(key + " " + value)
                                    // // console.log(_(key))
                                    if (_(key) != null && _(key) != "") {
                                        _(key).innerHTML = value
                                    }
                                })

                                divShowPer = $('#tableCommandeLigne_wrapper')
                                BroDivShowPers = divShowPer.children().eq(0)
                                BroDivShowPer = BroDivShowPers.children().eq(0)
                                BroDivShowPers.children().eq(1).remove()

                                BroDivShowPer.addClass(
                                    'col-sm-4 col-md-4 col-lg-4 d-flex pt-2 d-flex pt-2'
                                )
                                BroDivShowPer.removeClass('col-sm-12 col-md-6')
                                BroDivShowPer.append(`<span class="d-flex align-items-center px-2 " id="suppLignesCochée">
                                                            <i  class="bx bxs-trash text-danger me-1" style="font-size : 18px; cursor : pointer;"></i>
                                                            <span id="labelSuppLignesCochee" class="fw-bold" style="cursor : pointer;">Sup. lignes cochées</span>
                                                        </span>
                                                        <span id="actualiseTable" class="d-flex align-items-center px-2"  style=" cursor : pointer;">
                                                        <i class='bx bx-refresh me-1 text-info' style="font-size : 18px;"></i>
                                                        <span  class="fw-bold" style="cursor : pointer;">Rafraichir le tableau</span>
                                                    </span>`)

                                $BroParent = BroDivShowPer.parent()
                                // $child = $BroParent.children().eq(1)
                                // // console.log($child)
                                BroDivShowPer.after(`<div class="col-sm-7  col-lg-7 col-md-7 d-flex pt-2 d-flex pt-2 align-items-center">
                                                <div class="col-xl-3 col-lg-3 col-sm-3 d-flex align-items-center">
                                                    <span class="text-muted fs-12">Nbre ligne : </span> &nbsp;
                                                    <p class="fs-12 mb-0 text-primary fw-semibold" id="nbreCdeClient"></p>
                                                </div>
                                                <div class="col-xl-3 col-lg-3 col-sm-3 d-flex align-items-center">
                                                    <span class="text-muted fs-12">HT : </span>&nbsp;
                                                    <p class="fs-12 mb-0 fw-semibold" id="totalHTTT"></p>
                                                </div>
                                                <div class="col-xl-3 col-lg-3 col-sm-3 d-flex align-items-center">
                                                    <span class="text-muted fs-12">TVA : </span>&nbsp;
                                                    <p class="fs-12 mb-0 text-success fw-semibold" id="totalTVATT"></p>
                                                </div>
                                                <div class="col-xl-3 col-lg-3 col-sm-3 d-flex align-items-center">
                                                    <span class="text-muted fs-12">TTC : </span>&nbsp;
                                                    <p class="fs-12 mb-0 text-info fw-semibold" id="totalTTCTT"></p>
                                                </div>
                                             </div>`)

                                {{-- $BroParent.append(`<div class="col-xl-1 d-flex align-items-center justify-content-end ps-0 ms-0">
                                                    <div class=" d-flex justify-content-end">
                                                            <div class="dropdown">
                                                                <button class="btn btn-sm btn-icon btn-outline-dark" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                                    <i class="bx bx-dots-horizontal-rounded " style="font-size : 17px;cursor : pointer;" ></i>
                                                                </button>
                                                                <ul class="dropdown-menu overflow-auto" aria-labelledby="dropdownMenuButton1" id="dropChoixCol"  style="max-height: 300px;">
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>`)


                                listeColonnes = $('.colTable')

                                $.each(listeColonnes, function(key, value) {

                                    $('#dropChoixCol').append(
                                        '\
                                                <li class="d-flex p-2"> <input type="checkbox" valeur="' +
                                        (key + 1) +
                                        '"class="me-2 showCol form-check-input" checked>' +
                                        value.innerHTML + '</a></li>')
                                })
                                function fnShowHide(iCol) {
                                    /* Get the DataTables object again - this is not a recreation, just a get of the object */
                                    var oTable = $('#tableCommandeLigne').dataTable();

                                    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
                                    oTable.fnSetColumnVis(iCol, bVis ? false : true);
                                }

                                $(document).on('click', '.showCol', function() {
                                    fnShowHide($(this).attr('valeur'))
                                }) --}}

                                $("#nbreCdeClient").text(nbre)
                                $("#totalHTTT").text(formatNumberPerf(totalHT))
                                $("#totalTVATT").text(formatNumberPerf(totalTVA))
                                $("#totalTTCTT").text(formatNumberPerf(totalTTC))

                                // tableCommandeLigne.on('draw.dt', function () {
                                //     // completeHandler()
                                // });

                                resolve(true)

                            } catch (error) {
                                // completeHandler()
                                notifError(error)
                            }
                        } else {
                            remplissageDataTable({
                                obj: [],
                                IdentifiantDuTableau: "#tableCommandeLigne",
                                bFilter: false,
                                lengthChange: false,
                                paging: false
                            })
                            // completeHandler()
                            // // console.log(response)
                            resolve(true)
                            // notifError(response.msg)
                        }

                    },
                    error: function(response, error) {
                        reject(true)
                        notifError(response.responseJSON.msg)
                        // // console.log(response)
                        // completeHandler()
                    }
                })
            });
        }
        })
    </script>
@endsection