@extends('models')
@section('titre-page', 'Pré-réception en cours')
@section('content-body')

    @php
        $modeGPHARMA = ModeGpharma();
        $listeMonnaie = listeTauxMonnaie();
        $ValeurEuro = DB::table('PARAMETRE')->select('ValeurEuro')->first()->ValeurEuro ?? 1;
    @endphp

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

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

    <label id="btnCloseLoader" hidden> arret de loader</label>

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

                            <li class="breadcrumb-item active" aria-current="page">
                                {{ $_GET['view'] == '1' ? 'Pré-réception en cours' : 'Historique des réceptions' }}
                            </li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 mt-xl-0 mt-2 mx-0 ">
                    <div class="row justify-content-end">
                        @if ($_GET['view'] == '1')
                            
                            <div class=" col-xl-4 col-sm-4 col-md-4 pe-0 d-flex justify-content-end">
                                <button class=" btn btn-wave waves-effect waves-light btn-secondary-light "
                                        id="btnNewPreReception">
                                    <i class="bx bx-plus-circle fs-18 me-2"></i>Nouvelle pré-réception
                                </button>
                            </div>
                        @endif
                        <div class="col-xl-3 col-md-3 col-sm-4 px-1">
                            <button class=" btn btn-primary w-100" id="listeFactBL">Liste des factures</button>
                        </div>
                        <div class="col-xl-3 col-md-2 col-sm-4">
                            <div class=" d-flex justify-content-end">

                                <div class="dropdown  w-100">
                                    <button class="btn btn-primary-light dropdown-toggle w-100" type="button"
                                            id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                        Autres actions
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                        @if (ModeGpharma() == 2 && $_GET['view'] == '1')
                                            <li>
                                                <button class="dropdown-item text-start" id="btnExpedierListeBL">
                                                    <i class='bx bx-export me-1'></i>&nbsp;Valider expédition
                                                </button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-start" id="btnMettreListeBLReception">
                                                    <i class='bx bx-export me-1'></i>&nbsp;Démarrer réception
                                                </button>
                                            </li>
                                        @endif
                                        <li>
                                            <button class="dropdown-item text-start" id="btnExportAllCmde">
                                                <i class='bx bx-export me-1'></i>&nbsp;Exporter liste des BL
                                            </button>
                                        </li>

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

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

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

                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 fw-semibold" id="totalHTTT"></p>
                                <span class="text-muted fs-12">Total HT</span>
                            </div>
                        </div>
                        <div class="col-xl col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-warning-transparent">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-warning fw-semibold text-nowrap" id="totalRemiseTT">0</p>
                                <span class="text-muted fs-12 text-nowrap">Total Remise</span>
                            </div>
                        </div>
                        {{-- Les montants s'enchainent : le brut, la remise, le net qu'elle
                             laisse, la taxe assise sur ce net, puis le TTC. --}}
                        <div class="col-xl col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-secondary-transparent">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 fw-semibold text-nowrap" id="totalHTNetTT"></p>
                                <span class="text-muted fs-12 text-nowrap">Total HT Net</span>
                            </div>
                        </div>
                        <div class="col-xl col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-success-transparent">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>

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

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

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

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

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

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

                    <div class="table-responsive">
                        <table class="tablehover table text-nowrap overflow-auto" id="tableListePre">
                            <thead class="table-header-primary">
                            <tr>
                                <th data-orderable="false" class="text-center">
                                    <div style="margin-right:30px;margin-left:-10px;">
                                        <input class="form-check-input me-1" type="checkbox" id="checkSelectAllCmde">
                                        Actions
                                    </div>
                                </th>
                                <th class="text-center colTableListePre">Cree le</th>
                                <th class="text-center colTableListePre">Date BL</th>
                                <th class="text-center colTableListePre">Etape</th>
                                <th class="text-center colTableListePre">N° Facture / BL</th>
                                <th class="text-center colTableListePre">Bureau achat</th>
                                <th class="text-center colTableListePre">Fournisseur</th>
                                <th class="text-center colTableListePre">N° Vol/Conteneur</th>
                                <th class="text-center colTableListePre">Mode Expédit°</th>
                                <th class="text-center colTableListePre">Total HT </th>
                                <th class="text-center colTableListePre">Total Remise</th>
                                <th class="text-center colTableListePre">Total HT Net</th>
                                <th class="text-center colTableListePre">TVA</th>
                                <th class="text-center colTableListePre">Total TTC</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    <!-- Section modal -->
    <div class="modal fade" id="modalDetailBl" tabindex="-1" aria-labelledby="exampleModalXlLabel"
         style="display: none;" aria-hidden="true" role="dialog" data-bs-focus="false">
        <div class="modal-dialog modal-xl modal-scrolable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title d-flex align-items-center" id="exampleModalXlLabel">&nbsp;Liste produit en
                        pré-reception
                        &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">
                        <input type="text" id="nowIdCmde" hidden>
                        <div class="col-xl-12">
                            <div class="row px-2 py-0 mb-1">
                                <div class="card shadow-sm bg-white rounded py-1">
                                    <div class="card-body row py-1">
                                        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 d-flex mb-xl-0 pe-xl-3 mb-md-2"
                                             style="border-right : 1px dashed grey;">
                                            <span>N° BL&nbsp;:&nbsp;</span>
                                            <span id="NumBL" class="fw-bold ellipsis"></span>
                                        </div>
                                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 d-flex mb-xl-0 pe-xl-3 mb-md-2"
                                             style="border-right : 1px dashed grey;">
                                            <span>Nbre ligne&nbsp;:&nbsp;</span>
                                            <span id="NbreLigneBL" class="fw-bold"></span>
                                        </div>
                                        <div class="col-xl-5 col-lg-6 col-md-6 col-sm-6 d-flex mb-xl-0 mb-md-2 row">
                                            <div class="col-md-7">
                                                <span>Total TTC&nbsp;:&nbsp;</span>
                                                <span id="TotalTTCBL" class="fw-bold"></span>
                                            </div>
                                            <div class="col-md-5" id="blockBadgeEtape">
                                                <span class="" id="badgeEtape">&nbsp;</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="table-responsive">
                            <table class="tablehover w-100 table text-nowrap overflow-auto" id="tableBlLigne">
                                <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAlltableBlLigne">
                                        #
                                    </th>
                                    <th class="text-center colTableBlLigne">Code produit</th>
                                    <th class="text-center colTableBlLigne">Code Interne</th>
                                    <th class="text-center colTableBlLigne">Désignation</th>
                                    <th class="text-center colTableBlLigne">N° Commande</th>
                                    <th class="text-center colTableBlLigne">N° Palette</th>
                                    <th class="text-center colTableBlLigne">Qté Facturée</th>
                                    <th class="text-center colTableBlLigne">Qté Livrée</th>
                                    <th class="text-center colTableBlLigne">PFHT</th>
                                    <th class="text-center colTableBlLigne">PGHT</th>
                                    <th class="text-center colTableBlLigne">NTSP</th>
                                    <th class="text-center colTableBlLigne">N° Lot</th>
                                    <th class="text-center colTableBlLigne">Date Péremption</th>
                                    <th class="text-center colTableBlLigne">TVA</th>
                                    <th class="text-center colTableBlLigne">% Remise</th>
                                    <th class="text-center colTableBlLigne">P. Cession</th>
                                    <th class="text-center colTableBlLigne">P. Public </th>
                                    <th class="text-center colTableBlLigne">P. Revient</th>
                                    <th class="text-center colTableBlLigne">PRMP</th>
                                    <th class="text-center colTableBlLigne">Total Remise</th>
                                    <th class="text-center colTableBlLigne">Total HT</th>
                                    <th class="text-center colTableBlLigne">Total TVA</th>
                                    <th class="text-center colTableBlLigne">Total TTC</th>
                                    <th class="text-center colTableBlLigne">Volume Net</th>
                                    <th class="text-center colTableBlLigne">Poids Net</th>
                                    <th class="text-center colTableBlLigne">Rubrique Douane</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Section modal Edit BL-->
    <!--div class="modal fade" id="modalEditlBl" tabindex="-1" aria-labelledby="exampleModalXlLabel"
         style="display: none;" aria-hidden="true" role="dialog" data-bs-focus="false">
        <div class="modal-dialog modal-xl modal-scrolable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title d-flex align-items-center" id="exampleModalXlLabel">&nbsp;Détail BL
                        &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">
                    <form id="formInfoReception">
                                        <input type="text" name="idBonLivraison" id="idBonLivraison" hidden>
                                        <div class=" row">
                                            <div class="col-xl-7">
                                                <div class="card shadow" style="border: 1px solid #ff0000;">
                                                    <div class="card-body">
                                                        <div class="row border-danger">
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Bureau d'achat &nbsp;:</p>
                                                                <select name="bureauAchatEdit" class="form-select"
                                                                        id="bureauAchatEdit"></select>
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Mode expédition &nbsp;:</p>
                                                                <select name="modeExpEdit" class="form-select"
                                                                        id="modeExpEdit"></select>
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Taux Assurance &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="tauxAssurEdit" id="tauxAssurEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Conteneur &nbsp;:</p>
                                                                <select class="form-select" name="conteneurEdit"
                                                                        id="conteneurEdit" autocomplete="off">
                                                                </select>
                                                            </div>
                                                            <div class="col-xl-2 mb-2">
                                                                <p class="mb-0 text-muted">Coût transport :</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="CoutTpEdit" id="CoutTpEdit" autocomplete="off"
                                                                       value="0" />
                                                            </div>
                                                            <div class="col-xl-2 mb-2">
                                                                <p class="mb-0 text-muted">FOB Coefficient &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="FobCoeffEdit" id="FobCoeffEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-5 mb-2">
                                                                <p class="mb-0 text-muted">N° Conteneur / Vol &nbsp;:</p>
                                                                <input type="text" class="form-control"
                                                                       name="numContVolEdit" id="numContVolEdit"
                                                                       autocomplete="off" />
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Montant Préacheminement &nbsp;:
                                                                </p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="MontantPreAchEdit" id="MontantPreAchEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Montant Assurance Export&nbsp;:
                                                                </p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="MontantAssurExportEdit"
                                                                       id="MontantAssurExportEdit" autocomplete="off"
                                                                       value="0" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Poids Brut (Kg) &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="PoidNetEdit" id="PoidBrutEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Vol. Brut (m<sup>3</sup>)
                                                                    &nbsp;:
                                                                </p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="VolBrutEdit" id="VolBrutEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Autre Taxe 1 &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="taxe1Edit" id="taxe1Edit" autocomplete="off"
                                                                       value="0" />
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Autre Taxe 2 &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="taxe2Edit" id="taxe2Edit" autocomplete="off"
                                                                       value="0" />
                                                            </div>

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

                                            <div class="col-xl-5">
                                                <div class="card shadow" style="border: 1px solid #ff0000;">
                                                    <div class="card-body">
                                                        <div class="row border-1 border-danger">
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Date &nbsp;:</p>
                                                                <input type="date" class="form-control"
                                                                       name="dateEdit" id="dateEdit"
                                                                       value="{{ date('Y-m-d') }}" />
                                                            </div>
                                                            <div class="col-xl-4 d-flex align-item-center  mb-2">
                                                                <div
                                                                    class="form-check form-check-md d-flex align-items-center">
                                                                    <input class="form-check-input" type="checkbox"
                                                                           value="false" name="VenteSurReapp"
                                                                           id="VenteSurReapp"> &nbsp;
                                                                    <p class="mb-0 text-muted">Vente sur reappro</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Fin traitement estimé le &nbsp;:
                                                                </p>
                                                                <input type="date" class="form-control"
                                                                       name="FinTraitExtimLe" id="FinTraitExtimLe" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Date écheance &nbsp;:</p>
                                                                <input type="date" class="form-control"
                                                                       name="dateEcheance" id="dateEcheance" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Fournisseur &nbsp;:</p>
                                                                <select class="form-select" name="Fsuer"
                                                                        id="Fseur"></select>
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">N° Facture &nbsp; / N° BL:</p>
                                                                <input type="text" class="form-control"
                                                                       name="NumFacture" id="NumFacture"
                                                                       autocomplete="off" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Transitaire &nbsp;:</p>
                                                                <select class="form-select" name="TransitaireEdit"
                                                                        id="TransitaireEdit">
                                                                </select>
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Forfait Transitaire &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="ForFaitTransitaireEdit"
                                                                       id="ForFaitTransitaireEdit" autocomplete="off" />
                                                            </div>
                                                            <div class="col-xl-4 d-flex align-item-center  mb-2">
                                                                <div
                                                                    class="form-check form-check-md d-flex align-items-center">
                                                                    <input class="form-check-input" type="checkbox"
                                                                           value="false" name="ModeForfait"
                                                                           id="ModeForfait"> &nbsp;
                                                                    <p class="mb-0 text-muted">Mode Forfait</p>
                                                                </div>
                                                            </div>


                                                            <div @class(['col-xl-4', 'mb-2'])>
                                                                <p class="text-muted mb-0">Devise :</p>
                                                                <select name="IDMONNAIE" id="selIDMONNAIE" class="form-select" @disabled($modeGPHARMA != 2)>
                                                                    <option value="0"></option>
                                                                    @foreach ($listeMonnaie as $monnaie)
                                                                        <option value="{{ $monnaie->IDMONNAIE }}">
                                                                            {{ $monnaie->SymboleMonnaie }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div @class(['col-xl-4'])>
                                                                <p class="text-muted mb-0">Taux :</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="TauxMonnaie" id="inpTauxMonnaie"
                                                                       autocomplete="off" value="0" @readonly($modeGPHARMA != 2)>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="text" name="" id="IDBL" hidden>
                                        <input type="text" name="" id="etatBL" value="false" hidden>
                                        <input type="text" name="" id="ActiverPriseCommandeClient" hidden>
                                    </form>
                </div>
            </div>
        </div>
    </div-->

    {{-- Modal large edit reception --}}
    <div class="modal fade" id="modalEditAddBl" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel"
         aria-hidden="true" style="display: none;" data-bs-focus="false">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalFullscreenLabel"> Pré-Réception</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body bg-dark-transparent">

                    <div class="row mb-4 justify-content-end">

                        <div class="col-xl-5">
                            <div class="row">
                                <div class="col-xl-4">
                                    <button class=" btn btn-info-light w-100" id="btnActualiseDataPreReception"><i class='bx bx-sync'></i>
                                        &nbsp;Actualiser</button>
                                </div>
                                <div class="col-xl-4">
                                    <button class="btn btn-teal w-100" id="btnListeFactModal">
                                        <i class='bx bxs-folder-open'></i> &nbsp;Liste Facture
                                    </button>
                                </div>

                                <div class="col-xl-4">
                                    <div class=" d-flex justify-content-end w-100">

                                        <div class="dropdown w-100">
                                            <button class="btn btn-primary-light dropdown-toggle  w-100" 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="btnImprimBonReception">
                                                        <i class='bx bx-printer me-1'></i>&nbsp;Imprimer
                                                    </button>
                                                </li>
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li>
                                                    <button class="dropdown-item text-start" id="btnSupprimeLigne">
                                                        <i class='bx bx-trash me-1'></i>&nbsp;Supprimer les lignes
                                                    </button>
                                                </li>
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>

                                                <li>
                                                    <div class=" dropdown-item">
                                                        <form method="post" enctype="multipart/form-data"
                                                              id="formIntegrerCsvReception">
                                                            @csrf
                                                            <input type="file" name="integrerCsv" id="integrerCsv"
                                                                   accept="csv/*" hidden>

                                                            <label for="" id="labelIntegrerCSV"
                                                                   data-bs-toggle="tooltip"
                                                                   data-bs-custom-class="tooltip-primary"
                                                                   data-bs-placement="left"
                                                                   title="Intéger la facture globale"><i
                                                                    class='bx bx-download'></i> &nbsp;Intégrer fichier</label>

                                                            <input type="submit" value="" name="btnIntegrerCsv"
                                                                   id="btnIntegrerCsv" hidden>
                                                        </form>
                                                        <a href="" id="lienCsv" download hidden></a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li>
                                                    <button class="dropdown-item text-start" id="btnActualisePrixRevient">
                                                        <i class='bx bx-transfer me-1'></i>&nbsp;Prix Revient - Cession -
                                                        Public
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

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

                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 fw-semibold" id="totalHTReception"></p>
                                        <span class="text-muted fs-12">Total HT</span>
                                    </div>
                                </div>
                                <div class="col-xl col-lg-3 col-sm-4 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-warning-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-warning fw-semibold" id="totalRemiseReception"></p>
                                        <span class="text-muted fs-12">Total Remise</span>
                                    </div>
                                </div>
                                {{-- Apres la remise, avant la taxe : le HT net est ce qui reste
                                     du brut une fois la remise deduite, et l'assiette de la TVA. --}}
                                <div class="col-xl col-lg-3 col-sm-4 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-secondary-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 fw-semibold" id="totalHTNetReception"></p>
                                        <span class="text-muted fs-12">Total HT Net</span>
                                    </div>
                                </div>
                                <div class="col-xl col-lg-3 col-sm-4 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-success-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-success fw-semibold" id="totalTVAReception"></p>
                                        <span class="text-muted fs-12">Total TVA</span>
                                    </div>
                                </div>
                                <div class="col-xl col-lg-3 col-sm-4 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-info-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-info fw-semibold" id="totalTTCReception"></p>
                                        <span class="text-muted fs-12">Total TTC</span>
                                    </div>
                                </div>
                                <div class="col-xl col-lg-3 col-sm-4 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-info-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-info fw-semibold" id="totalTTCEuroReception"></p>
                                        <span class="text-muted fs-12">Total TTC(Devise)</span>
                                    </div>
                                </div>
                                <div class="col-xl col-lg-3 col-sm-4 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-info-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-info fw-semibold" id="fraisApprocheReception"></p>
                                        <span class="text-muted fs-12">Frais d'approche</span>
                                    </div>
                                </div>

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

                    <div class="accordion accordion-danger mb-4" id="accordionPrimaryExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingPrimaryOne">
                                <button class="accordion-button fs-14" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapsePrimaryOne" aria-expanded="true"
                                        aria-controls="collapsePrimaryOne">
                                    Info principale réception
                                </button>
                            </h2>
                            <div id="collapsePrimaryOne" class="accordion-collapse collapse show"
                                 aria-labelledby="headingPrimaryOne" data-bs-parent="#accordionPrimaryExample">
                                <div class="accordion-body">
                                    <form id="formInfoReception">
                                        <input type="text" name="idBonLivraison" id="idBonLivraison" hidden>
                                        <div class=" row">
                                            <div class="col-xl-7">
                                                <div class="card shadow" style="border: 1px solid #ff0000;">
                                                    <div class="card-body">
                                                        <div class="row border-danger">
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Bureau d'achat &nbsp;:</p>
                                                                <select name="bureauAchatEdit" class="form-select"
                                                                        id="bureauAchatEdit"></select>
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Mode expédition &nbsp;:</p>
                                                                <select name="modeExpEdit" class="form-select"
                                                                        id="modeExpEdit"></select>
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Taux Assurance &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="tauxAssurEdit" id="tauxAssurEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Conteneur &nbsp;:</p>
                                                                <select class="form-select" name="conteneurEdit"
                                                                        id="conteneurEdit" autocomplete="off">
                                                                </select>
                                                            </div>
                                                            <div class="col-xl-2 mb-2">
                                                                <p class="mb-0 text-muted">Coût transport :</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="CoutTpEdit" id="CoutTpEdit" autocomplete="off"
                                                                       value="0" />
                                                            </div>
                                                            <div class="col-xl-2 mb-2">
                                                                <p class="mb-0 text-muted">FOB Coefficient &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="FobCoeffEdit" id="FobCoeffEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-5 mb-2">
                                                                <p class="mb-0 text-muted">N° Conteneur / Vol &nbsp;:</p>
                                                                <input type="text" class="form-control"
                                                                       name="numContVolEdit" id="numContVolEdit"
                                                                       autocomplete="off" />
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Montant Préacheminement &nbsp;:
                                                                </p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="MontantPreAchEdit" id="MontantPreAchEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Montant Assurance Export&nbsp;:
                                                                </p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="MontantAssurExportEdit"
                                                                       id="MontantAssurExportEdit" autocomplete="off"
                                                                       value="0" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Poids Brut (Kg) &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="PoidNetEdit" id="PoidBrutEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Vol. Brut (m<sup>3</sup>)
                                                                    &nbsp;:
                                                                </p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="VolBrutEdit" id="VolBrutEdit"
                                                                       autocomplete="off" value="0" />
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Autre Taxe 1 &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="taxe1Edit" id="taxe1Edit" autocomplete="off"
                                                                       value="0" />
                                                            </div>
                                                            <div class="col-xl-3 mb-2">
                                                                <p class="mb-0 text-muted">Autre Taxe 2 &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="taxe2Edit" id="taxe2Edit" autocomplete="off"
                                                                       value="0" />
                                                            </div>

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

                                            <div class="col-xl-5">
                                                <div class="card shadow" style="border: 1px solid #ff0000;">
                                                    <div class="card-body">
                                                        <div class="row border-1 border-danger">
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Date &nbsp;:</p>
                                                                <input type="date" class="form-control"
                                                                       name="dateEdit" id="dateEdit"
                                                                       value="{{ date('Y-m-d') }}" />
                                                            </div>
                                                            <div class="col-xl-4 d-flex align-item-center  mb-2">
                                                                <div
                                                                    class="form-check form-check-md d-flex align-items-center">
                                                                    <input class="form-check-input" type="checkbox"
                                                                           value="false" name="VenteSurReapp"
                                                                           id="VenteSurReapp"> &nbsp;
                                                                    <p class="mb-0 text-muted">Vente sur reappro</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Fin traitement estimé le &nbsp;:
                                                                </p>
                                                                <input type="date" class="form-control"
                                                                       name="FinTraitExtimLe" id="FinTraitExtimLe" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Date écheance &nbsp;:</p>
                                                                <input type="date" class="form-control"
                                                                       name="dateEcheance" id="dateEcheance" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Fournisseur &nbsp;:</p>
                                                                <select class="form-select" name="Fsuer"
                                                                        id="Fseur"></select>
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">N° Facture &nbsp; / N° BL:</p>
                                                                <input type="text" class="form-control"
                                                                       name="NumFacture" id="NumFacture"
                                                                       autocomplete="off" />
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Transitaire &nbsp;:</p>
                                                                <select class="form-select" name="TransitaireEdit"
                                                                        id="TransitaireEdit">
                                                                </select>
                                                            </div>
                                                            <div class="col-xl-4 mb-2">
                                                                <p class="mb-0 text-muted">Forfait Transitaire &nbsp;:</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="ForFaitTransitaireEdit"
                                                                       id="ForFaitTransitaireEdit" autocomplete="off" />
                                                            </div>
                                                            <div class="col-xl-4 d-flex align-item-center  mb-2">
                                                                <div
                                                                    class="form-check form-check-md d-flex align-items-center">
                                                                    <input class="form-check-input" type="checkbox"
                                                                           value="false" name="ModeForfait"
                                                                           id="ModeForfait"> &nbsp;
                                                                    <p class="mb-0 text-muted">Mode Forfait</p>
                                                                </div>
                                                            </div>


                                                            <div @class(['col-xl-4', 'mb-2'])>
                                                                <p class="text-muted mb-0">Devise :</p>
                                                                <select name="IDMONNAIE" id="selIDMONNAIE" class="form-select" @disabled($modeGPHARMA != 2)>
                                                                    <option value="0"></option>
                                                                    @foreach ($listeMonnaie as $monnaie)
                                                                        <option value="{{ $monnaie->IDMONNAIE }}">
                                                                            {{ $monnaie->SymboleMonnaie }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div @class(['col-xl-4'])>
                                                                <p class="text-muted mb-0">Taux :</p>
                                                                <input type="text" class="form-control numberInput"
                                                                       name="TauxMonnaie" id="inpTauxMonnaie"
                                                                       autocomplete="off" value="0" @readonly($modeGPHARMA != 2)>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="text" name="" id="IDBL" hidden>
                                        <input type="text" name="" id="etatBL" value="false" hidden>
                                        <input type="text" name="" id="ActiverPriseCommandeClient" hidden>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card custom-card">
                        <div class="card-body">
                            <form id="formAddProdBl">
                                <div class=" row mb-4">
                                    <div class=" col-xl-11">
                                        <div class=" row">
                                            <div class="col-xl-2">
                                                <div class=" row">
                                                    <div class=" col-xl-9">
                                                        <p class="mb-0 text-muted">N° Commande &nbsp;:</p>
                                                        <input type="text" class="form-control" name="numCmdeEdit"
                                                               id="numCmdeEdit" autocomplete="off" />
                                                    </div>
                                                    <div
                                                        class=" col-xl-3 d-flex align-items-center justify-content-start p-0">
                                                        <div
                                                            class="form-check form-check-md d-flex align-items-center pt-3">
                                                            <input class="form-check-input" type="checkbox"
                                                                   name="UGEdit" id="UGEdit" value="false">
                                                            <label class="form-check-label" for="UGEdit">
                                                                UG
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <p class="mb-0 text-muted">Produit &nbsp;:</p>
                                                <select name="produitEdit" class="form-select" id="produitEdit"></select>
                                            </div>
                                            <div class="col-xl-1">
                                                <p class="mb-0 text-muted">Qtée Fturée :</p>
                                                <input type="text" class="form-control" name="qteFactureEdit"
                                                       id="qteFactureEdit" autocomplete="off" value="0"  />
                                            </div>
                                            <div class="col-xl-2">
                                                <p class="mb-0 text-muted">PGHT &nbsp;:</p>
                                                <input type="text" class="form-control" name="pghtEdit"
                                                       id="pghtEdit" autocomplete="off" value="0" />
                                            </div>
                                            <div class="col-xl-2">
                                                <p class="mb-0 text-muted">Numéro lot &nbsp;:</p>
                                                <input type="text" class="form-control" name="NumLotEdit"
                                                       id="NumLotEdit" autocomplete="off"  />
                                            </div>
                                            <div class="col-xl-2">
                                                <p class="mb-0 text-muted">Date péremption &nbsp;:</p>
                                                <input type="date" class="form-control" name="datePerempEdit"
                                                       id="datePerempEdit" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" col-xl-1">
                                        <input type="submit" name="" id="btnAddProdBl" hidden>
                                        <label for="btnAddProdBl" class="w-100 mt-3 btn btn-info d-flex justify-content-center align-items-center">
                                            <i class='bx bxs-plus-circle fs-18'></i>
                                        </label>
                                    </div>
                                </div>
                                <input type="text" name="CommandeLigne" id="CommandeLigne" hidden>
                                <input type="text" name="QteCommandee" id="QteCommandee" hidden>
                            </form>

                            <div class="row">
                                <div class="table-responsive">
                                    <table class="tablehover w-100 table text-nowrap overflow-auto openModalProduit "
                                           id="tableDetailBl">
                                        <thead class="table-header-primary">
                                        <tr>
                                            <th data-orderable="false" data-column="action">
                                                <input class="form-check-input me-4" type="checkbox"
                                                       id="checkSelectAllEdit">
                                            </th>

                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CCodeCIPIntegration">Code Interne</th>
                                            <th class="text-center colTableDetailBl" data-class="text-start"
                                                data-column="CDesignationProduit">Désignation</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CNumeroCommandeBL">N° Commande</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CQteCommandeeBL">Qté Cmdée</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CQteFactureeBL">Qté <br> Facturée</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CQteLivreeBL">Qté <br> Livrée</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CEcartFactureeLivree">Ecart <br> Facturée-Livrée</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CPrixGHTBL">
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PGHT
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CTauxRemiseBLL">% Remise</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CNumeroTracabilite">NTSP</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CNumeroLotProduit">Numéro Lot</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CDatePeremption">Date Péremption</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixGHTBLDevise">PGHT ( <span id="enteteDevise"></span>
                                                ) </th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CAccordLaboPeremption">Accord Labo <br> péremption</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CTauxTVABL">TVA</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CTauxTVADouaneBL">TVA Douane</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixGHTAncien">PGHT Fiche <br> Produit</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CEvolPrixGHT">Evol. PGHT <br> Fiche Produit</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixGHTAncienReception">PGHT Dernière <br> Réception</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CEvolPrixGHTAncienReception">Evol. PGHT <br> Dernière
                                                Réception</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixCessionHT">P. Cession</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixCessionHTAncien">P. Cession Dernier</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CEvolPrixCession">Evol. P. Cession</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixPublicBL">P. Public</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixPublicAncien">P. Public Dernier</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CEvolPrixPublic">Evol. P. Public</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixRevientHT">P. Revient</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixRevientHTAncien">P. Revient Dernier</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CEvolPrixRevient">Evol. P. Revient</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixRMP">PRMP</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CPrixRMPAncien">PRMP Dernier</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CEvolPRMP">Evol. PRMP</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CTotalRemiseBLL">Total Remise</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CTotalHTBL">Total HT</th>
                                            <th class="text-center colTableRecep text-end"
                                                data-column="CTotalHTNetBLL">Total HT Net</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CTotalTaxeBL">Total TVA</th>
                                            <th class="text-center colTableDetailBl" data-class="text-end"
                                                data-column="CTotalTTCBL">Total TTC</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CVolumeNetLigne">Volume Net</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CPoidsNetLigne">Poids Net</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CLibelleRubriqueDouane">Rubrique Douane</th>
                                            <th class="text-center colTableDetailBl" data-class="text-center"
                                                data-column="CCodeCipProduit1">Code produit</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer d-block">
                    <div class=" row">
                        <div class=" col-xl-8">
                            <div class=" row">
                                <div class="col-xl-4">
                                    <button class=" btn btn-teal w-100" id="btnEnregistreReception"><i
                                            class='bx bxs-save'></i>&nbsp; Enregistrer
                                        Pré-Réception</button>
                                </div>
                                <div class="col-xl-4">
                                    <button class=" btn btn-success-light w-100" id="btnValiderReception"><i
                                            class='bx bxs-check-circle'></i>&nbsp;
                                        Valider Réception</button>
                                </div>
                                <div class="col-xl-2">
                                    <button class=" btn btn-danger w-100">
                                        <i class='bx bxs-x-circle'></i>&nbsp;Annuler
                                    </button>
                                </div>
                                <div class="col-xl-1">
                                    <button class=" btn btn-secondary" id="btnEstimeReel" data-bs-toggle="tooltip" title="Estimé réel"> <i
                                            class="ri-sound-module-fill fs-12 mb-1"></i></button>
                                </div>
                            </div>
                        </div>

                        <div class="offset-xl-3 col-xl-1">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal ESTIME ET REEL --}}
    <div class="modal fade" id="modalEstimeReel" tabindex="-1" aria-labelledby="exampleModalXlLabel"
         style="display: none;" aria-hidden="true" role="dialog" data-bs-focus="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title d-flex align-items-center" id="exampleModalXlLabel">&nbsp;Estimes réels
                        &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="card custom-card border-top-card border-top-info rounded-0 shadow-0">
                        <h3 class=" fs-14">FRAIS DE DOUANE : ESTIME REEL</h3>
                        <div class="card-body">
                            <div class=" row">
                                <input type="text" id="nowIdCmde" hidden>

                                <div class="table-responsive">
                                    <table class="tablehover table text-nowrap overflow-auto" id="tableBEstimeReelDouane">
                                        <thead class="table-header-primary">
                                        <tr>
                                            <th class="text-center">Rubrique</th>
                                            <th class="text-center">Estimé</th>
                                            <th class="text-center">Réel</th>
                                            <th class="text-center">Ecart</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card custom-card border-top-card border-top-warning rounded-0 shadow-0">
                        <h3 class=" fs-14">FRAIS TRANSIT LOCAL : ESTIME REEL</h3>
                        <div class="card-body">
                            <div class=" row">
                                <div class="table-responsive">
                                    <table class="tablehover table text-nowrap overflow-auto" id="tableBEstimeReelLocal">
                                        <thead class="table-header-primary">
                                        <tr>
                                            <th class="text-center">Famille</th>
                                            <th class="text-center">Estimé</th>
                                            <th class="text-center">Réel</th>
                                            <th class="text-center">Ecart</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-block">
                    <div class=" row ">
                        <div class="offset-xl-7 col-xl-5 text-end">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                            <button class=" btn btn-success-light" id="btnSaveEstimeReel">
                                <i class='bx bxs-check-circle'></i>&nbsp;
                                Enregister
                            </button>

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

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

    <div class="modal fade " id="modalMotifEcart" tabindex="-1" aria-labelledby="exampleModalScrollable2"
         data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content shadow-lg">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Réclamation
                    </h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body bd-gray-100">
                    <div class=" row">
                        <div class="col-xl-12 mb-2">
                            <p class="mb-0 text-muted">Ecart de livraison :</p>
                            <input type="text" class="form-control text-danger fw-bold fs-18 text-center"
                                   name="valEcart" id="valEcart" readonly>
                        </div>
                        <div class="col-xl-12 mb-2">
                            <p class="mb-0 text-muted">Produit :</p>
                            <input type="text" class="form-control" name="libelleProduitEcart"
                                   id="libelleProduitEcart" readonly>
                        </div>
                        <div class="col-xl-12 mb-2">
                            <p class="mb-0 text-muted">Motif :</p>
                            <select name="retourFseurSelect" class="form-select" id="retourFseurSelect"></select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnValidMotif">
                        <i class='bx bxs-check-circle'></i>&nbsp;Enregistrer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade " id="modalChangeProduiut" tabindex="-1" aria-labelledby="exampleModalScrollable2"
         data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content shadow-lg">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Changer le produit
                    </h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body bd-gray-100">
                    <div class=" row">
                        <input type="text" name="" id="idLigne" hidden>
                        <div class="col-xl-12 mb-2">
                            <p class="mb-0 text-muted">Produit :</p>
                            <select class="js-example-basic-single form-select" name="changeProduit" id="changeProduit">

                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
                            class='bx bxs-x-circle'></i> &nbsp; Fermer</button>
                    <button type="button" class="btn btn-success" id="validChangeProduit"> <i
                            class='bx bxs-check-circle'></i> &nbsp;
                        Enregistrer</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <!-- Script exécuté au chargement de la page -->
    <script src="{{ assetVersionne("assets/js/axios.min.js") }}"></script>

    <script>
        $(function() {
            dateRangeInput('input[name="datetimes"]', true, "DD/MM/YYYY HH:mm")
        })

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

        var tableCommandeLigne = ""

        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($IDBUREAUACHAT = null) {

            $.ajax({

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

                    if (response.success == 0) {

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

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

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

                        if ($IDBUREAUACHAT != null) {
                            $('#IDBUREAUACHAT').val($IDBUREAUACHAT).change()
                        }
                    }
                    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($IDMODEEXPEDITION = null) {

            $.ajax({

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

                    if (response.success == 0) {

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

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

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

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

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectFournisseur($IDFOURNISSEUR = null) {

            $.ajax({

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

                    if (response.success == 0) {

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

                        $('#IDFOURNISSEUR').html('')
                        $('#IDFOURNISSEURSUG').html('')
                        $('#Fseur').html('')
                        $('#IDFOURNISSEUR').append('<option value="0">TOUS</option>')
                        $('#IDFOURNISSEURSUG').append('<option value="0">TOUS</option>')
                        $('#Fseur').append('<option value="0"></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>')
                            $('#Fseur').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                        })

                        $('#IDFOURNISSEUR').select2()
                        $('#IDFOURNISSEURSUG').select2()
                        $('#Fseur').select2({
                            dropdownParent: $("#modalEditAddBl")
                        })

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectlisteConteneur() {

            $.ajax({

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

                    if (response.error == true) {

                        notifError(response.messages)
                    } else {

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

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectRetourFseur() {

            $.ajax({

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

                    $('#retourFseurSelect').html('')

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

        function chargerSelectTransitaire() {

            $.ajax({

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

                    $('#TransitaireEdit').html('')
                    $('#TransitaireEdit').append(`<option value="0">AUCUN</option>`)

                    $.each(response.data, function(key, value) {
                        $('#TransitaireEdit').append(
                            `<option value="${value.IDTRANSITAIRE}"> ${value.NomTransitaire}</option>`
                        )
                    })
                }
            })
        }

        $('.js-example-basic-single').select2();
        // $('#changeProduit').select2();
        $('#changeProduit').select2({
            dropdownParent: $("#modalChangeProduiut")
        })

        function chargerSelectProduit() {

            $.ajax({

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

                    $('#changeProduit').html('')
                    $('#changeProduit').append('<option value="0">TOUS LES PRODUITS</option>')

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

                        $('#changeProduit').append('<option value="' + value["IDPRODUIT"] + '">' +
                            value[
                                "DesignationProduit"] + '</option>')
                    })
                    // $('#changeProduit').select2()
                    // $('.js-example-basic-single').select2();
                }
            })
        }

        chargerSelectTransitaire()
        chargerSelectlisteConteneur()
        chargerSelectProduit()
        chargerSelectLaboratoire()

        chargerSelectFamilleProduit()

        chargerSelectRetourFseur()
        // chargerTableCommandeLigne(VARIDCOMMANDE)



        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(0)
            $("#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>

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

            var modeGPHARMA = @json($modeGPHARMA);
            var listeMonnaie = @json($listeMonnaie);
            var ValeurEuro = @json($ValeurEuro);
            const urlParams = new URLSearchParams(window.location.search);
            const viewParam = urlParams.get('view');

            var dataRecup = null
            await recupererValeurSession('filterMemory.filtreListeBonlivraison')
                .then(async (data) => {
                    dataRecup = data
                    if(data != null && data != undefined){
                        $("#filtrePeriode").val(data.filtrePeriode)
                        await chargerSelectBureauAchat(data.buroSele)
                        await chargerSelectFournisseur(data.fseurSelc)
                        await chargerSelectModeExpedition(data.expSele)
                        return false
                    }
                    await chargerSelectBureauAchat()
                    await chargerSelectFournisseur()
                    await chargerSelectModeExpedition()
                })


            $("#selIDMONNAIE").on("change", function(evt) {

                if (parseInt(modeGPHARMA) != 2) {
                    _("enteteDevise").innerHTML = " €"
                    $("#inpTauxMonnaie").val(ValeurEuro)
                    // $("#inpTauxMonnaie").val(1 / parseFloat(ValeurEuro))
                    return false
                }

                //console.log(listeMonnaie)

                let itemsMonnie = listeMonnaie.filter((item) => item.IDMONNAIE == $(this).val())
                //console.log(itemsMonnie)

                if (itemsMonnie.length > 0) {
                    $("#inpTauxMonnaie").val(itemsMonnie[0].TauxMonnaieInverse)
                    _("enteteDevise").innerHTML = itemsMonnie[0].SymboleMonnaie
                }
            })
            $("#modeExpEdit").on("change", function(evt) {
                $("#tauxAssurEdit").val($(this).find(':selected').data('taux'))
            })

            $("#modalEditAddBl").on('shown.bs.modal', function(e) {
                if (parseInt(modeGPHARMA) != 2) {
                    $("#selIDMONNAIE").val(1).trigger("change")
                }
            });


            window.Echo.channel('DeconnectAllUsers')
                .listen('DeconnectAllUsers', () => {
                    // alert("Tous les utilisateurs ont été déconnectés !");
                    window.location.href = "{{ route('deconnexion.view') }}";
                });

            var tableListePre = $("#tableListePre").DataTable({
                language: languageTable,
                columnDefs: [{
                    targets: [0, 1, 2, 4, 7, 8],
                    className: "text-center"
                },
                    {
                        targets: [6, 4],
                        className: "text-start"
                    },
                    {
                        /* Les cinq colonnes de montants : HT, remise, HT net, TVA, TTC.
                           Le HT net puis la remise s'y sont inseres, decalant la TVA et le
                           TTC de deux rangs depuis l'origine. */
                        targets: [9, 10, 11, 12, 13],
                        className: "text-end"
                    },
                ],
                // pagingType: 'full_numbers',
                pageLength: 25,
                lengthChange: true,
                order: [],

            })

            let divShowPerPre = $('#tableListePre_filter')
            let BroDivShowPerPre = divShowPerPre.parent().parent()
            let childPre = BroDivShowPerPre.children().eq(0)


            childPre.addClass('d-flex pt-2')

            let lineAppend = ""

            if (parseInt(viewParam) == 1){
                lineAppend +=`<span class="d-flex align-items-center px-2" id="suppLignesCochéeCmde">
                    <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;">Supp. lignes cochées</span>
                </span>`
            }

            lineAppend +=`<span class=" d-flex align-items-center px-2 dropdown-toggle" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bx bxs-printer text-primary me-1" style="font-size : 18px; cursor : pointer;"></i>
                    <span id="labelSuppLignesCochee" class="fw-bold" style="cursor : pointer;">Imprimer</span>
                </span>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li>
                        <button class="dropdown-item text-start" id="btnImprimBorderoPreRecep">
                            Bordereau de (Pré)-Réception
                        </button>
                    </li>
                    <li>
                        <button class="dropdown-item text-start" id="btnImprimBorderoReceptZone">
                            Bordereau de réception par zone
                        </button>
                    </li>
                    <li>
                        <button class="dropdown-item text-start" id="btnImprimEtatRuptReappro">
                            Etat des ruptures réapprovisionnées
                        </button>
                    </li>
                    <li>
                        <button class="dropdown-item text-start" id="btnImprimEtatRuptReappro2">
                            Etat des ruptures réapprovisionnées (Modèle 2)
                        </button>
                    </li>
                    <li>
                        <button class="dropdown-item text-start" id="btnImprimBordereauxEvolution">
                            Bordereaux des évolutions de prix
                        </button>
                    </li>
                    <li>
                        <button class="dropdown-item text-start" id="btnImprimEtatDedoune">
                          Etats estimé dédouanement
                        </button>
                    </li>
                </ul>`
                childPre.append(lineAppend)

            placeboutonPreferenceColonne('tableListePre', 'ListePreShowColonne', 2)
            recuperationPreferenceColonneUtilisateur('tableListePre','ListePreShowColonne')
            $(document).on('click', '.ListePreShowColonne', function() {
                appliquerPreferenceColonne('tableListePre', 'Pre-reception-en-cours', $(this),'ListePreShowColonne')
            })
            // colonne disparaître
            let tableBlLigne = $("#tableBlLigne").DataTable({
                bFilter: false,
                language: languageTable,
                columnDefs: [{
                    targets: [0, 4, 5, 6, 2, 7,  11, 12, 20, 21, 22],
                    className: "text-center"
                },
                    {
                        targets: [4, 3, 1],
                        className: "text-start"
                    },
                    {
                        targets: [8, 9, 10,  13, 14, 15, 16, 17, 18, 19],
                        className: "text-end"
                    },
                ],
                pageLength: 25,

            })

            divShowPer = $('#tableBlLigne_length')
            let BroDivShowPer = divShowPer.parent().parent()

            let rightChild = BroDivShowPer.children().eq(1).removeClass('col-md-6')
            rightChild.addClass('col-md-1')
            rightChild.append(`<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="dropChoixColBlLigne"  style="max-height: 300px;">
                                        </ul>
                                    </div>
                                </div>`)

            let child = BroDivShowPer.children().eq(0).removeClass('col-md-6')
            child.addClass('d-flex pt-2 col-md-11')
            child.append(
                ` <span class="d-flex align-items-center px-2" id="createNewPreRecption">
                    <i class='bx bxs-layer-plus text-info me-1 fs-22' style="cursor : pointer;"></i>
                    <span id="" class="fw-bold" style="cursor : pointer;">Imprimer les étiquettes produit</span>
                </span>
               `
            )

            // colonne disparaître
            listeColonnes = $('.colTableBlLigne')

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

                $('#dropChoixColBlLigne').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>`
                )
            })


            $("#modalDetailBl").on('click', '.showCol', function() {
                fnShowHideGeneral($(this).attr('valeur'), "tableBlLigne")
            })

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

                $("#NumBL").text("")
                $("#NbreLigneBL").text("")
                $("#TotalTTCBL").text("")
                $("#badgeEtape").text("")
                // resetForm()
            });

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

            // Suppression de lignes de la commande sur la modal de detail
            $("#tableCommandeLigne").on("click", "#supCmdeLigne", function() {

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

                confirmMdp('{{ csrf_token() }}', () => {
                        deleteCommandeLigne(IDCOMMANDELIGNE)
                        _('checkSelectAll').checked = false
                    }, null,
                    "Veuillez saisir votre mot de passe pour confirmer la suppresion de la commande"
                )
            })

            // selection de tout les elements du tableau sur modal

            // selection de tout les elements du tableau commande
            _('checkSelectAllCmde').addEventListener('click', function() {
                let value = this.checked
                let lignes = tableListePre.rows().nodes()
                $(lignes).find('#checkSelectLigneCmde').prop('checked', value)
            })

            _('checkSelectAlltableBlLigne').addEventListener('click', function() {
                let value = this.checked
                let lignes = tableBlLigne.rows().nodes()
                $(lignes).find('#checkSelectBlLigne').prop('checked', value)
            })


            $(document).on('click', '#checkSelectBlLigne', function() {
                if (_('checkSelectAlltableBlLigne').checked == true) {
                    _('checkSelectAlltableBlLigne').checked = false
                }
            })

            // Tout selection sur la modal Edit
            _('checkSelectAllEdit').addEventListener('click', function() {
                let value = this.checked
                let lignes = tableDetailBl.rows().nodes()
                $(lignes).find('#checkSelectLigneEdit').prop('checked', value)
            })

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

            // selection d'une ligne de commande
            $(document).on('click', '#checkSelectLigneCmde', function() {
                if (_('checkSelectAllCmde').checked == true) {
                    _('checkSelectAllCmde').checked = false
                }
            })

            // Supprimer les lignes cochées sur tableau ligne commande
            $(document).on('click', '#btnSupprimeLigne', function() {

                let tabIdCmdeClientLigne = listeLigneSelectionneLigneEdit()

                if (tabIdCmdeClientLigne.length == 0) {
                    notif('danger', 'Attention',
                        'Veuillez cocher au moins une ligne pour éffectuer une suppression !!')
                } else {

                    $.ajax({
                        url: "{{ route('deleteBlLigne') }}",
                        type: 'delete',
                        data: {
                            LISTE_IDBL: tabIdCmdeClientLigne,
                            _token: "{{ csrf_token() }}"
                        },
                        dataType: 'json',
                        success: function(response) {
                            // console.log(response)
                            if (response.error == false) {

                                listingReception($("#IDBL").val())
                                _('checkSelectAllEdit').checked = false
                                notifSuccess(response.messages)
                            }
                            notifWarning(response.messages)
                        },
                        error: function(response) {
                            // console.log(response)
                            notifError(response.messages)
                        }
                    })
                }
            })

            function listeLigneSelectionneLigneEdit() {

                let dataIdCmdeLigne = []
                let dataPack = []
                let valNow = ""
                let lignes = tableDetailBl.rows().nodes()

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

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

            // Generer bon multiple
            $(document).on('click', '#printBonLignesCochee', function() {

                let tabIdCmdeClientLigne = listeLigneSelectionne()

                if (tabIdCmdeClientLigne.length == 0) {
                    notif('danger', 'Attention',
                        'Veuillez cocher au moins une ligne pour éffectuer une impression !!')
                } else {
                    ImprimerBonAchat(tabIdCmdeClientLigne)
                }
            })

            $(document).on('click', '#genererMatriceLignesCochée', function() {

                let tabIdCmde = listeLigneSelectionne()

                if (tabIdCmde.length == 0) {
                    notifError('Veuillez coder au moind une ligne pour générer les matrices !!')
                } else {
                    genererMatrice(tabIdCmde)
                }
            })

            

            ListePreReception(
                $("#filtrePeriode").val(),
                $("#IDBUREAUACHAT").val(),
                $("#IDFOURNISSEUR").val(),
                $("#IDMODEEXPEDITION").val(),
                viewParam
            )

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

                let input = $("#tableListePre_filter input").val()
                let session = 'filterMemory.filtreListeBonlivraison'
                let valeurSession = {
                    "filtrePeriode": $("#filtrePeriode").val(),
                    "buroSele": $("#IDBUREAUACHAT").val(),
                    "fseurSelc": $("#IDFOURNISSEUR").val(),
                    "expSele": $("#IDMODEEXPEDITION").val(),
                    "viewParam": 1,
                    "versBl": input == "" ? false : true
                }

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

                        ListePreReception(
                            $("#filtrePeriode").val(),
                            $("#IDBUREAUACHAT").val(),
                            $("#IDFOURNISSEUR").val(),
                            $("#IDMODEEXPEDITION").val(),
                            viewParam
                        )

                    })
            })

            $("#tableListePre").on("click", ".btn-view", function() {
                let ID = $(this).attr("data-id")
                $("#nowIdCmde").val(ID)

                chargerTableBLLigne(ID)

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

            // supprimer une ligne de commande
            $("#tableListePre").on("click", ".btn-trash", function() {
                let LIST_IDBL = []
                LIST_IDBL.push($(this).attr("data-id"))

                confirmMdp('{{ csrf_token() }}', () => {
                        deleteBL(LIST_IDBL)
                    }, null,
                    "Veuillez saisir votre mot de passe pour confirmer la suppresion du BL",
                    {
                        sousTitre: '',
                        infoJNL: "SUPPRESSION DE BON DE LIVRAISON",
                        typeJNL: 3,
                        CodeDroit: "DG_PeutSuppirmer"
                    }
                )
            })

            $("#tableListeCmde").on("click", "#imprimeBon", function() {
                let Id = []
                Id.push($(this).attr("data-id"))
                ImprimerBonAchat(Id)
            })

            $("#tableListeCmde").on("click", "#ExportCmdee", function() {
                let Id = []
                Id.push($(this).attr("data-id"))
                $.ajax({
                    url: "{{ route('exporterCmde') }}",
                    type: 'POST',
                    data: {
                        IDCOMMANDES: $(this).attr("data-id"),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            var blob = b64toBlob(response.lienFile,
                                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                            );
                            var downloadLink = $('<a>')
                                .attr('href', URL.createObjectURL(blob))
                                // .attr('hidden', "hidden")
                                .attr('id', 'downloadListeCmdeListe')
                                // Ajouter l'attribut download pour indiquer que c'est un lien de téléchargement
                                .attr('download', response.nameFile)
                                .text('Télécharger'); // Texte du lien de téléchargement

                            // Ajouter le lien de téléchargement au conteneur
                            $('#formFiltre').append(downloadLink);
                            _('downloadListeCmdeListe').click()
                            _('downloadListeCmdeListe').remove()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            })

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

                if (tableListePre.rows().count() == 0) {
                    alertSwal("Veuillez cocher une/plusieurs BL avant d'exporter")
                    return 0
                }

                $.ajax({
                    url: "{{ route('exporterBL') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: $("#filtrePeriode").val(),
                        IDBUREAUACHAT: $("#IDBUREAUACHAT").val(),
                        IDFOURNISSEUR: $("#IDFOURNISSEUR").val(),
                        IDMODEEXPEDITION: $("#IDMODEEXPEDITION").val(),
                        viewParam: viewParam,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            var blob = b64toBlob(response.lienFile,
                                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                            );
                            var downloadLink = $('<a>')
                                .attr('href', URL.createObjectURL(blob))
                                // .attr('hidden', "hidden")
                                .attr('id', 'downloadListeCmde')
                                // Ajouter l'attribut download pour indiquer que c'est un lien de téléchargement
                                .attr('download', response.nameFile)
                                .text('Télécharger'); // Texte du lien de téléchargement

                            // Ajouter le lien de téléchargement au conteneur
                            $('#formFiltre').append(downloadLink);
                            _('downloadListeCmde').click()
                            _('downloadListeCmde').remove()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            })

            $("#btnExpedierListeBL").on("click", function() {
                let tabIdCmde = listeLigneSelectionne()

                if (tabIdCmde.length == 0) {
                    alertSwal("Veuillez cocher une/plusieurs BL avant d'expédier")
                    return 0
                }

                confirmAction(() => {
                        $.ajax({
                            url: "{{ route('ExpedierListeBL') }}",
                            type: 'POST',
                            data: {
                                LISTE_IDBL: tabIdCmde,
                                viewParam: viewParam,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: 'json',
                            success: function(response) {
                                // console.log(response)

                                if (response.error == false) {
                                    ListePreReception(
                                        $("#filtrePeriode").val(),
                                        $("#IDBUREAUACHAT").val(),
                                        $("#IDFOURNISSEUR").val(),
                                        $("#IDMODEEXPEDITION").val(),
                                        viewParam
                                    )
                                    notifSuccess(response.messages)
                                    return false
                                }
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                console.log(response)
                                notifError(response.responseJSON.messages)
                            }
                        })
                    },
                    'Voulez-vous expédier  la/les ligne(s) cochées ?',
                )

            })

            $("#btnMettreListeBLReception").on("click", function() {
                let tabIdCmde = listeLigneSelectionne()

                if (tabIdCmde.length == 0) {
                    alertSwal("Veuillez cocher une/plusieurs BL avant de mettre en réception")
                    return 0
                }

                confirmAction(() => {
                        $.ajax({
                            url: "{{ route('MettreEnReception') }}",
                            type: 'POST',
                            data: {
                                LISTE_IDBL: tabIdCmde,
                                viewParam: viewParam,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: 'json',
                            success: function(response) {
                                // console.log(response)

                                if (response.error == false) {
                                    ListePreReception(
                                        $("#filtrePeriode").val(),
                                        $("#IDBUREAUACHAT").val(),
                                        $("#IDFOURNISSEUR").val(),
                                        $("#IDMODEEXPEDITION").val(),
                                        viewParam
                                    )
                                    notifSuccess(response.messages)
                                    return false
                                }
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                // console.log(response)
                                notifError(response.messages)
                            }
                        })
                    },
                    'Voulez-vous mettre la/les ligne(s) cochées en réception ?',
                    'Seules les BL expédié seront mis en réception.'
                )
            })

            $(document).on("click",
                "#btnImprimBorderoPreRecep, #btnImprimEtatRuptReappro, #btnImprimEtatRuptReappro2",
                function(evt) {
                    evt.preventDefault();

                    let listeID = listeLigneSelectionne()

                    if (listeID.length <= 0) {
                        alertSwal("Veuillez cocher une/plusieurs lignes !!")
                        return false
                    }

                    if (evt.target.id == "btnImprimBorderoPreRecep") {
                        impression(listeID, "{{ route('impressionGroupe1') }}", 1)
                    } else if (evt.target.id == "btnImprimEtatRuptReappro") {
                        impression(listeID, "{{ route('impressionGroupe1') }}", 2)
                    } else if (evt.target.id == "btnImprimEtatRuptReappro2") {
                        impression(listeID, "{{ route('impressionGroupe1') }}", 3)
                    }

                });

            $(document).on("click",
                "#btnImprimBorderoReceptZone, #btnImprimBordereauxEvolution, #btnImprimEtatDedoune",
                function(evt) {
                    evt.preventDefault();

                    let listeID = listeLigneSelectionne()

                    if (listeID.length <= 0) {
                        alertSwal("Veuillez cocher une/plusieurs lignes !!")
                        return false
                    }

                    let route = "{{ route('impressionGroupe2') }}"

                    if (evt.target.id == "btnImprimBorderoReceptZone") {
                        impression(listeID, route, 1)
                    } else if (evt.target.id == "btnImprimBordereauxEvolution") {
                        let route = "{{ route('impressionEvolutionprix') }}"
                        impression(listeID, route, 2)
                    } else if (evt.target.id == "btnImprimEtatDedoune") {
                        let route = "{{ route('impressionDedouanement') }}"
                        impression(listeID, route, 3)
                    }

                });

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

                        if (response.error == false) {

                            var pdfBase64 = response.tablePDF;
                            var blob = b64toBlob(pdfBase64, 'application/pdf');
                            var blobUrl = URL.createObjectURL(blob);
                            var printWindow = window.open(blobUrl);
                            // printWindow.print();
                        } else {
                            notif("warning", "Attention", response.messages)
                        }
                        completeHandler()
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.messages)
                    }
                });
            }

            // :::::::::::::::::: Full MOdal ::::::::::::::::::::*/

            var QteFactureNormal = 0
            let tableDetailBl = remplissageDataTable({
                IdentifiantDuTableau: '#tableDetailBl',
                obj: [],
                bFilter: true,
                paging: false,
                scrollX: true,
                scrollY: "600px"
            })

            // let tableDetailBl = $("#tableDetailBl").DataTable({

            //     language: languageTable,
            //     columnDefs: [{
            //             targets: [0, 4, 5, 6, 7, 12, 13, 14, 18, 21, 24, 27],
            //             className: "text-center"
            //         },
            //         {
            //             targets: [4, 1, 2, 3],
            //             className: "text-start"
            //         },
            //         {
            //             targets: [8, 9, 10, 11, 15, 16, 17, 19, 20, 22, 23, 25, 26, ],
            //             className: "text-end"
            //         },
            //     ],
            //     pageLength: 25,
            //     drawCallback: function(settings) {
            //         // var api = this.api();
            //         var api = settings.oInstance.api();;
            //         var rows = api.rows().nodes();
            //         var last = null;
            //         let tailleDonne = api.data().length

            //         let nbre = 0
            //         let NumeroPalette = ""

            //         let PoidsBrut = 0
            //         let VolumeBrut = 0
            //         let VolumeNet = 0
            //         let PoidsNet = 0
            //         let TxEmballage = 0

            //         let ligne = 1

            //         api.rows().every(function(value, index) {

            //             let rowData = this.data();

            //             if (nbre == 0) {
            //                 $(rows).eq(this.index()).before(
            //                     `<tr style="background-color:#f2eefc;" class="rupture">
            //                         <td colspan="38">
            //                             Facture N° : <span class="text-danger bold">${rowData[39]?? ""}</span>
            //                             ${rowData[40] != null ? "- Date Facture : <span class='text-danger bold'>"+explodeDate(rowData[40])+"</span>" : ""}
            //                             - Palette / Colis N° : <span class="text-danger bold">${rowData[38] ?? ""} </pan>
            //                         </td>
            //                     </tr>
            //                     `
            //                 );
            //                 NumeroPalette = rowData[38]
            //             }

            //             if (nbre > 0) {

            //                 if (NumeroPalette != rowData[38]) {
            //                     if (VolumeNet > 0) TxEmballage = VolumeBrut / VolumeNet
            //                     EcartPoids = PoidsBrut - PoidsNet

            //                     $(rows).eq(this.index()).before(
            //                         `
            //                     <tr style="background-color:#f2eefc;" class="rupture">
            //                         <td colspan="38">V. Brut : <span class="text-danger" id="VolumeBrut-${ligne}"> ${formatNumber(VolumeBrut) + ' m3'} </span> &nbsp;&nbsp;
            //                         V. Net : <span class="text-danger" id="VolumeNet-${ligne}">${formatNumber(VolumeNet) + ' m3'}</span> &nbsp;&nbsp;
            //                         Taux Emb. : <span class="text-danger" id="TxEmballage-${ligne}"> ${formatNumber(TxEmballage) + ' %'} </span> &nbsp;&nbsp;
            //                         Poids Brut : <span class="text-danger" id="PoidsBrut-${ligne}"> ${formatNumber(PoidsBrut) + ' Kg'} </span> &nbsp;&nbsp;
            //                         Poids Net : <span class="text-danger" id="PoidsNet-${ligne}">${formatNumber(PoidsNet) + ' Kg'}</span> &nbsp;&nbsp;
            //                         Ecart Poids : <span class="text-danger" id="EcartPoids-${ligne}"> ${formatNumber(EcartPoids) +' Kg'} </span></td>

            //                     </tr>
            //                     <tr style="background-color:#f2eefc;" class="rupture">
            //                         <td colspan="38">
            //                             Facture N° : <span class="text-danger bold">${rowData[39]?? ""}</span>
            //                             ${rowData[40] != null ? "- Date Facture : <span class='text-danger bold'>"+explodeDate(rowData[40])+"</span>" : ""}
            //                             - Palette / Colis N° : <span class="text-danger bold">${NumeroPalette} </pan>
            //                         </td>
            //                     </tr>
            //                     `
            //                     );

            //                     NumeroPalette = rowData[38]
            //                     VolumeNet = 0
            //                     PoidsNet = 0
            //                     PoidsBrut = 0
            //                     VolumeBrut = 0

            //                     ligne++
            //                 }
            //             }

            //             VolumeNet += parseFloat(rowData[45])
            //             PoidsNet += parseFloat(rowData[46])
            //             // VolumeNet += parseFloat(rowData[35])
            //             // PoidsNet += parseFloat(rowData[36])
            //             PoidsBrut += parseFloat(rowData[43])
            //             VolumeBrut += parseFloat(rowData[44])
            //             if (nbre == tailleDonne - 1) {

            //                 if (VolumeNet > 0) TxEmballage = VolumeBrut / VolumeNet
            //                 EcartPoids = PoidsBrut - PoidsNet

            //                 $(rows).eq(this.index()).after(
            //                     `
            //                     <tr style="background-color:#f2eefc;" class="rupture">
            //                         <td colspan="38">V. Brut : <span class="text-danger" id="VolumeBrut-${ligne}"> ${formatNumber(VolumeBrut) + ' m3'} </span> &nbsp;&nbsp;
            //                         V. Net : <span class="text-danger" id="VolumeNet-${ligne}">${formatNumber(VolumeNet) + ' m3'}</span> &nbsp;&nbsp;
            //                         Taux Emb. : <span class="text-danger" id="TxEmballage-${ligne}"> ${formatNumber(TxEmballage) + ' %'} </span> &nbsp;&nbsp;
            //                         Poids Brut : <span class="text-danger" id="PoidsBrut-${ligne}"> ${formatNumber(PoidsBrut) + ' Kg'} </span> &nbsp;&nbsp;
            //                         Poids Net : <span class="text-danger" id="PoidsNet-${ligne}">${formatNumber(PoidsNet) + ' Kg'}</span> &nbsp;&nbsp;
            //                         Ecart Poids : <span class="text-danger" id="EcartPoids-${ligne}"> ${formatNumber(EcartPoids) +' Kg'} </span></td>
            //                     </tr>
            //                     `
            //                 );
            //             }


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

            //             nbre++

            //             $(rows).eq(this.index()).attr("id", "ligne-" + nbre);
            //         });
            //     }
            // })

            {{-- divShowPer = $('#tableDetailBl_filter')
            let BroDivShowPBL = divShowPer.parent().parent()
            let childDetailBl = BroDivShowPBL.children().eq(0)
            let child2DetailBl = BroDivShowPBL.children().eq(1)
            child2DetailBl.html("")
            child2DetailBl.append(`<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="dropChoixColDetailBl"  style="max-height: 300px;">\
                                            </ul>\
                                        </div>
                                        \
                                    </div>`) --}}


            {{-- laceboutonPreferenceColonne('tableDetailBl', 'DetailBlShowColonne', 2)
            recuperationPreferenceColonneUtilisateur('tableDetailBl','DetailBlShowColonne') --}}

            {{-- listeColonnesDetailBl = $('.colTableDetailBl')

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

                $('#dropChoixColDetailBl').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>`)
            }) --}}

            {{-- $("#modalEditAddBl").on('click', '.showCol', function() {
                fnShowHideGeneral($(this).attr('valeur'), "tableDetailBl")
            }) --}}

            var IDBL_CL
            $("#tableListePre").on("click", ".btn-edit", function() {
                let ID = $(this).attr("data-id")
                $("#IDBL").val(ID)

                listingReception(ID, "#modalEditAddBl")
            })

            /**** Modification des infos du BL apres validation*/
            $("#tableListePre").on("click", ".btn-editBl", function() {
                let ID = $(this).attr("data-id")
                $("#IDBL").val(ID)

                $("#modalEditlBl").modal("show")
                // $.ajax({
                //     type: "method",
                //     url: "url",
                //     data: "data",
                //     dataType: "json",
                //     success: function (response) {
                        
                //     },
                //     error : function (response) {
                        
                //     }
                // });
            })

            $("#btnActualiseDataPreReception").on("click",function() {
                listingReception($("#IDBL").val(), "", true)
            })

            // changer la couluer de la ligne selectionnée
            $("#tableListePre tbody").on("click", "tr", function() {
                $("#tableListePre tbody tr").removeClass("bg-danger-transparent")
                $(this).addClass("bg-danger-transparent")
            })
            $(document).on("change", "#UGEdit", function () {
                if($(this).val() == "true"){
                    $("#pghtEdit").val("0")
                }else{
                    $("#pghtEdit").val(pghtEdit_value)
                }
            })

            $(document).on("submit", "#formAddProdBl", function(evt) {
                evt.preventDefault();

                let timer = 15000
                if ($("#numCmdeEdit").val() == "") {
                    alertSwal("Veuillez renseigner le numéro de commande SVP !")

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

                if ($("#produitEdit").val() == "") {
                    alertSwal("Veuillez selectionner un produit SVP !")
                    $("#produitEdit").focus()
                    return 0
                }

                if (parseInt($("#qteFactureEdit").val()) == 0 || $("#qteFactureEdit").val() == "") {
                    alertSwal("Veuillez renseigner la quantité facturée SVP !")

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

                if ((parseInt($("#qteFactureEdit").val()) <= 0 || $("#qteFactureEdit").val() == "")) {
                    alertSwal("Veuillez renseigner la quantité facturée SVP !")

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

                if (parseInt($("#qteFactureEdit").val()) > QteFactureNormal && $("#UGEdit").val() ==
                    "false") {
                    alertSwal(
                        `La quantité facturée ne peut excéder","la quantité restante à livrer soit : ${QteFactureNormal} unité(s) !`
                    )

                    $("#qteFactureEdit").val(QteFactureNormal)
                    $("#qteFactureEdit").select()
                    $("#qteFactureEdit").focus()
                    return 0
                }

                if ($("#NumLotEdit").val() == "") {
                    alertSwal("Veuillez renseigner le numéro de lot SVP !")

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

                if ($("#datePerempEdit").val() == "") {
                    alertSwal("Veuillez renseigner la date de péremption du lot SVP !")

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

                if($("#UGEdit").val() == "true"){
                    $("#pghtEdit").val("0")
                }

                // let ID = $(this).attr("data-id")

                let formData = new FormData(_("formAddProdBl"))
                formData.append("_token", "{{ csrf_token() }}")
                formData.append("BLenCours", $("#IDBL").val())
                formData.append("qteFactureEdit", $("#qteFactureEdit").val())
                formData.append("pghtEdit", $("#pghtEdit").val())
                formData.append("NumLotEdit", $("#NumLotEdit").val())
                formData.append("datePerempEdit", $("#datePerempEdit").val())
                formData.append("bureauAchatEdit", $("#bureauAchatEdit").val())
                formData.append("modeExpEdit", $("#modeExpEdit").val())
                formData.append("tauxAssurEdit", demasquerFormatInput($("#tauxAssurEdit").val()))
                formData.append("conteneurEdit", $("#conteneurEdit").val())
                formData.append("CoutTpEdit", demasquerFormatInput($("#CoutTpEdit").val()))
                formData.append("FobCoeffEdit", demasquerFormatInput($("#FobCoeffEdit").val()))
                formData.append("numContVolEdit", $("#numContVolEdit").val())
                formData.append("MontantPreAchEdit", demasquerFormatInput($("#MontantPreAchEdit")
                    .val()))
                formData.append("MontantAssurExportEdit", demasquerFormatInput($(
                    "#MontantAssurExportEdit")
                    .val()))
                formData.append("PoidNetEdit", demasquerFormatInput($("#PoidBrutEdit").val()))
                formData.append("VolNetEdit", demasquerFormatInput($("#VolBrutEdit").val()))
                formData.append("taxe1Edit", demasquerFormatInput($("#taxe1Edit").val()))
                formData.append("taxe2Edit", demasquerFormatInput($("#taxe2Edit").val()))

                formData.append("dateEdit", $("#dateEdit").val())
                formData.append("VenteSurReapp", $("#VenteSurReapp").val())
                formData.append("FinTraitExtimLe", $("#FinTraitExtimLe").val())
                formData.append("dateEcheance", $("#dateEcheance").val())
                formData.append("Fseur", $("#Fseur").val())
                formData.append("NumFacture", $("#NumFacture").val())
                formData.append("TransitaireEdit", $("#TransitaireEdit").val())
                formData.append("ForFaitTransitaireEdit", $("#ForFaitTransitaireEdit").val())
                formData.append("ModeForfait", $("#ModeForfait").val())
                formData.append("IDMONNAIE", _('selIDMONNAIE').value)
                formData.append("TauxMonnaie", _("inpTauxMonnaie").value)


                $.ajax({
                    url: "{{ route('addProdReception') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {
                            $("#IDBL").val(response.data)
                            $("#idBonLivraison").val(response.data)

                            $("#qteFactureEdit").val(0)
                            $("#pghtEdit").val(0)
                            $("#NumLotEdit").val("")
                            $("#datePerempEdit").val("")
                            $("#produitEdit").val("").change()
                            listingReception($("#IDBL").val())
                            return false
                        }
                        notifWarning(response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#modalEditAddBl").on("change", "#numCmdeEdit", function(evt) {
                if ($(this).val() == "") {
                    $(this).val("")
                    return 0
                }

                $.ajax({
                    url: "{{ route('produitByNumCmde') }}",
                    type: 'POST',
                    data: {
                        PNumCmde: $(this).val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            $("#produitEdit").html("")
                            $("#produitEdit").append(`<option value=""></option>`)
                            $.each(response.data, function(key, value) {
                                $("#produitEdit").append(
                                    `<option value="${value.IDPRODUIT}">${value.DesignationProduit} <br> --> <span class="text-danger">${value.QuantiteCommandee}</span> </option>`
                                )
                            })

                            $("#produitEdit").select2({
                                dropdownParent: $("#modalEditAddBl")
                            })
                            return false
                        }
                        notif("warning", "Attention", response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            })

            var pghtEdit_value = 0
            $("#modalEditAddBl").on("change", "#produitEdit", function(evt) {

                if ($(this).val() == "") {
                    $("#qteFactureEdit").prop("disabled", true)
                    $("#pghtEdit").prop("disabled", true)
                    $("#QteCommandee").prop("disabled", true)
                    $("#NumLotEdit").prop("disabled", true)

                    return false
                }

                $.ajax({
                    url: "{{ route('selectDetailProdByNumCmde') }}",
                    type: 'POST',
                    data: {
                        IDProd: $(this).val(),
                        PNumCmde: $("#numCmdeEdit").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {
                            $("#qteFactureEdit").val(response.QteLivre)
                            if($("#UGEdit").val() == "true"){
                                $("#pghtEdit").val(0)
                            }else{
                                $("#pghtEdit").val(response.PGHT)
                            }
                            $("#CommandeLigne").val(response.IDCOMMANDELIGNE)
                            $("#QteCommandee").val(response.QuantiteCommandee)
                            pghtEdit_value = response.PGHT

                            $("#qteFactureEdit").prop("disabled", false)
                            $("#pghtEdit").prop("disabled", false)
                            $("#QteCommandee").prop("disabled", false)
                            $("#NumLotEdit").prop("disabled", false)
                            $("#datePerempEdit").prop("disabled", false)
                            $("#NumLotEdit").focus()
                            QteFactureNormal = response.QteLivre
                            return false
                        }
                        $("#qteFactureEdit").prop("disabled", true)
                        $("#pghtEdit").prop("disabled", true)
                        $("#QteCommandee").prop("disabled", true)
                        $("#NumLotEdit").prop("disabled", true)
                        $("#datePerempEdit").prop("disabled", true)
                        notifWarning(response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        $("#produitEdit").val("").change()
                        notifError(response.responseJSON.messages)
                    }
                })
            })


            $("#tableDetailBl").on("change", ".inputQteLivreeBL", function(evt) {

                let id = evt.target.id
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligneRupt = idExplode[1]

                let IdBlLigne = $("#IdBlLigne-" + key).text()

                let inputQteFactureeBL = chaineEnNumerique($("#inputQteFactureeBL-" + ligneRupt + "-" + key).val())
                let inputQteLivreeBL = chaineEnNumerique($("#" + id).val())

                let Ecart = parseInt(inputQteLivreeBL) - parseInt(inputQteFactureeBL)

                let retourFseurSelect = 0

                param.id = id
                param.key = key
                param.ligne = ligneRupt
                param.inputQteLivreeBL = inputQteLivreeBL
                param.inputQteFactureeBL = inputQteFactureeBL
                param.IdBlLigne = IdBlLigne
                param.value = "qtelivre"

                if (Ecart != 0) {
                    $("#valEcart").val(Ecart)
                    $("#libelleProduitEcart").val($("#DesignationProduit-" + key).text())
                    $("#retourFseurSelect").select()

                    retourFseurSelect = $("#retourFseurSelect").val()

                    $("#modalMotifEcart").modal("show")

                }else{
                    saveQteLivreeBLChange(param.IdBlLigne, param.inputQteLivreeBL, param.ligne, param.key)
                }

            })

            $("#tableDetailBl").on("change", ".inputQteFactureeBL", function(evt) {

                let id = evt.target.id
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligneRupt = idExplode[1]

                let IdBlLigne = $("#IdBlLigne-" + key).text()

                let inputQteLivreeBL = chaineEnNumerique($("#inputQteLivreeBL-" + ligneRupt + "-" + key).val())
                let inputPrixGHTBL = $("#inputPrixGHTBL-" + ligneRupt + "-" + key).val()
                let inputQteFactureeBL = chaineEnNumerique($("#" + id).val())

                let Ecart = parseInt(inputQteLivreeBL) - parseInt(inputQteFactureeBL)

                let retourFseurSelect = 0

                param.id = id
                param.key = key
                param.ligne = ligneRupt
                param.inputQteLivreeBL = inputQteLivreeBL
                param.inputQteFactureeBL = inputQteFactureeBL
                param.IdBlLigne = IdBlLigne
                param.value = "qtefact"

                if (Ecart != 0) {
                    $("#valEcart").val(Ecart)
                    $("#libelleProduitEcart").val($("#DesignationProduit-" + key).text())
                    $("#retourFseurSelect").select()
                    retourFseurSelect = $("#retourFseurSelect").val()

                    $("#modalMotifEcart").modal("show")

                }else{
                    saveQteFactureeBL(param.IdBlLigne, param.inputQteFactureeBL, param.ligne, param.key)
                }

            })

            function saveQteFactureeBL(IdBlLigne, inputQteFactureeBL, ligneRupt, key) {
                if (!quantiteValide(IdBlLigne, inputQteFactureeBL, "facturée")) {
                    return
                }
                $.ajax({
                    url: "{{ route('inputQteFactureeBLChange') }}",
                    type: 'POST',
                    data: {
                        BLenLigneCours: IdBlLigne,
                        QteFactureeBL: inputQteFactureeBL,
                        taux: $("#inpTauxMonnaie").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            $("#TotalHTBL-" + ligneRupt + "-" + key).text(formatNumberPerf(
                                response.TotalHT))
                            $("#TotalHTNetBLL-" + ligneRupt + "-" + key).text(formatNumberPerf(
                                response.TotalHTNet))
                            $("#TotalTaxeBL-" + ligneRupt + "-" + key).text(formatNumberPerf(
                                response.TotalTva))
                            $("#TotalTTCBL-" + ligneRupt + "-" + key).text(formatNumberPerf(
                                response.TotalTTC))

                            $("#TotalRemiseBLL-" + ligneRupt + "-" + key).text(
                                formatNumberPerf(response.TotalRemise))

                            $("#EcartFactureeLivree-" + ligneRupt + "-" + key).text(
                                formatNumberPerf(response.EcratFActLivree))

                            // $("#totalHTReception").text(formatNumberPerf())
                            // $("#totalTVAReception").text(formatNumberPerf())
                            // $("#totalTTCReception").text(formatNumberPerf())
                            // $("#totalTTCEuroReception").text(formatNumberPerf())
                            // $("#fraisApprocheReception").text(formatNumberPerf())

                            changeTotaux(
                                response.TotauxBl.TxHTBL,
                                response.TotauxBl.TxTaxeBL,
                                response.TotauxBl.TxTTCBL,
                                response.TotauxBl.Tx_TTCEuro,
                                response.TotauxBl.FraisApproche,
                                response.TotauxBl.TxRemiseBLL,
                                response.TotauxBl.TxHTNetBL
                            )

                            return 0

                        }
                        notifWarning(response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            function saveQteLivreeBLChange(BLenLigneCours, QteLivreeBL, ligne, key) {
                if (!quantiteValide(BLenLigneCours, QteLivreeBL, "livrée")) {
                    return
                }
                $.ajax({
                    url: "{{ route('inputQteLivreeBLChange') }}",
                    type: 'POST',
                    data: {
                        BLenLigneCours: BLenLigneCours,
                        QteLivreeBL: QteLivreeBL,
                        retourFseurSelect: $("#retourFseurSelect").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {

                            changeRuptInfo(
                                ligne,
                                response.TotauxRup.SomVolumeBrut,
                                response.TotauxRup.SomVolumeNetRup,
                                response.TotauxRup.TxEmballage,
                                response.TotauxRup.SomPoidsBrut,
                                response.TotauxRup.SomPoidsNetRup,
                                response.TotauxRup.EcartPoids
                            )

                            let ids = ligne + "-" + key

                            $("#EcartFactureeLivree-" + ids).text(formatNumberPerf(response
                                .EcartFactureLivree))
                            $("#CVolumeNetLigne-" + ids).text(formatNumberPerf(response
                                .VolumeNet))
                            $("#CPoidsNetLigne-" + ids).text(formatNumberPerf(response
                                .PoidsNet))

                            return 0
                        }
                        notifWarning(response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            }

            var param = {}
            var MotifEstAjouté = false
            var QinputQteLivreeFacture = 0
            var IDinputQteLivreeFacture = ""

            // Empêche l'envoi d'une quantité vide / non numérique : sans ce contrôle le
            // serveur recevait "" et enregistrait 0 sur la ligne.
            function quantiteValide(IdBlLigne, quantite, libelle) {
                if (IdBlLigne === undefined || IdBlLigne === null || IdBlLigne === "") {
                    notifWarning("Ligne du bon de livraison introuvable : rien n'a été enregistré.")
                    return false
                }
                if (quantite === undefined || quantite === null || quantite === "" || isNaN(quantite)) {
                    notifWarning("Quantité " + libelle + " invalide : la ligne n'a pas été enregistrée.")
                    return false
                }
                return true
            }

            $("#modalEditAddBl").on("focusin select", ".inputQteLivreeBL, .inputQteFactureeBL", function() {
                QinputQteLivreeFacture = $(this).val()
                IDinputQteLivreeFacture = $(this).attr("id")
            })

            $(document).on('hidden.bs.modal', '#modalMotifEcart', function() {

                if(MotifEstAjouté == false){
                    $("#tableDetailBl #" +IDinputQteLivreeFacture).val(QinputQteLivreeFacture)
                }else{
                    IDinputQteLivreeFacture = ""
                    QinputQteLivreeFacture = 0
                    MotifEstAjouté = false
                }

                if(Object.keys(param).length > 0){
                    if(param.value == "qtefact"){
                        $("#inputQteFactureeBL-" + param.ligne + "-" + param.key).focus()
                        $("#inputQteFactureeBL-" + param.ligne + "-" + param.key).select()
                    }else{
                        $("#tableDetailBl #" + param.id).focus()
                        $("#tableDetailBl #" + param.id).select()
                    }
                }

                param = {}
            });

            $(document).on("click","#btnValidMotif", function () {
                $.ajax({
                    url: "{{ route('updateMotifRetour') }}",
                    type: 'POST',
                    data: {
                        BLenLigneCours: param.IdBlLigne,
                        retourFseurSelect: $("#retourFseurSelect").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {

                            if(param.value == "qtefact"){
                                saveQteFactureeBL(param.IdBlLigne, param.inputQteFactureeBL, param.ligne, param.key)
                            }else{
                                saveQteLivreeBLChange(param.IdBlLigne, param.inputQteLivreeBL, param.ligne, param.key)
                            }
                            notif("success", "Félicitation", response.messages)
                            param = {}
                            MotifEstAjouté = true
                            $('#modalMotifEcart').modal("hide")
                            // Sécurité : si hidden.bs.modal ne se déclenche pas, le drapeau
                            // resterait bloqué à true et masquerait l'annulation suivante.
                            setTimeout(function() { MotifEstAjouté = false }, 1000)

                            return 0
                        }
                        notif("warning", "Attention", response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            })

            $("#modalEditAddBl").on("click", "input[type=text]", function() {
                $(this).select()
            })

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

            // Quand la modal large se ferme
            $('#modalEditAddBl').on('hidden.bs.modal', function() {
                $("#modalEditAddBl input[type=checkbox]").prop("checked", false);
                $("#modalEditAddBl input[type=checkbox]").val(false);
                $("#etatBL").val("false")
                $("#IDBL").val("")
            });

            $("#tableDetailBl").on("change", ".inputPrixGHTBL", function(evt) {
                let id = evt.target.id
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligneRupt = idExplode[1]

                let IdBlLigne = $("#IdBlLigne-" + key).text()

                $.ajax({
                    url: "{{ route('inputPrixGHTBLChange') }}",
                    type: 'POST',
                    data: {
                        BLenLigneCours: IdBlLigne,
                        PrixGHTBL: $("#" + id).val(),
                        IdBUroAchat: $("#bureauAchatEdit").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            let ids = ligneRupt + "-" + key
                            let resp = response.TotauxRup
                            $("#EvolPrixGHT-" + ids).text(formatNumberPerf(resp
                                .EvolPrixGHT))
                            $("#EvolPrixGHTAncienReception-" + ids).text(formatNumberPerf(
                                resp.EvolPrixGHTAncienReception))
                            $("#TotalRemiseBLL-" + ids).text(formatNumberPerf(resp
                                .TotalRemise))
                            $("#TotalHTBL-" + ids).text(formatNumberPerf(resp.TotalHT))
                            $("#TotalHTNetBLL-" + ids).text(formatNumberPerf(resp.TotalHTNet))
                            $("#TotalTaxeBL-" + ids).text(formatNumberPerf(resp.TotalTaxe))
                            $("#TotalTTCBL-" + ids).text(formatNumberPerf(resp.TotatTTC))
                            $("#PrixGHTBLDevise-" + ids).text(formatNumberPerf(resp
                                .PrixGHTBLDevise))

                            changeTotaux(
                                response.TotalBl.TxHTBL,
                                response.TotalBl.TxTaxeBL,
                                response.TotalBl.TxTTCBL,
                                response.TotalBl.Tx_TTCEuro,
                                response.TotalBl.FraisApproche,
                                response.TotalBl.TxRemiseBLL,
                                response.TotalBl.TxHTNetBL
                            )

                            allerAuChampSuivant(id)
                            notifSuccess(response.messages)
                            return 0
                        }
                        notifWarning(response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })

            })

            $("#tableDetailBl").on("change", ".inputTauxRemiseBLL", function(evt) {
                let id = evt.target.id
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligneRupt = idExplode[1]

                let IdBlLigne = $("#IdBlLigne-" + key).text()

                $.ajax({
                    url: "{{ route('inputTauxRemiseBLLChange') }}",
                    type: 'POST',
                    data: {
                        BLenLigneCours: IdBlLigne,
                        TauxRemiseBLL: $("#" + id).val(),
                        IdBUroAchat: $("#bureauAchatEdit").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {
                            let ids = ligneRupt + "-" + key
                            let resp = response.TotauxRup

                            $("#TotalRemiseBLL-" + ids).text(formatNumberPerf(resp.TotalRemiseBLL))
                            $("#TotalHTBL-" + ids).text(formatNumberPerf(resp.TotalHTBL))
                            $("#TotalHTNetBLL-" + ids).text(formatNumberPerf(resp.TotalHTNetBLL))
                            $("#TotalTaxeBL-" + ids).text(formatNumberPerf(resp.TotalTaxeBL))
                            $("#TotalTTCBL-" + ids).text(formatNumberPerf(resp.TotalTTCBL))

                            changeTotaux(
                                response.TotalBl.TxHTBL,
                                response.TotalBl.TxTaxeBL,
                                response.TotalBl.TxTTCBL,
                                response.TotalBl.Tx_TTCEuro,
                                response.TotalBl.FraisApproche,
                                response.TotalBl.TxRemiseBLL,
                                response.TotalBl.TxHTNetBL
                            )

                            allerAuChampSuivant(id)
                            notifSuccess(response.messages)
                            return 0
                        }
                        notifWarning(response.messages)

                    },
                    error: function(response) {
                        notifError(response.responseJSON.messages)
                    }
                })

            })

            function changeTotaux(TxHTBL, TxTaxeBL, TxTTCBL, Tx_TTCEuro, FraisApproche, TxRemiseBL = null,
                                  TxHTNetBL = null) {
                if (TxRemiseBL !== null) $("#totalRemiseReception").text(formatNumberPerf(TxRemiseBL))
                $("#totalHTReception").text(formatNumberPerf(TxHTBL))
                /* Le net vient en dernier parametre, facultatif : les appels qui ne le
                   connaissent pas laissent le bloc tel qu'il est, plutot que d'y afficher
                   un zero qui serait faux. */
                if (TxHTNetBL !== null) $("#totalHTNetReception").text(formatNumberPerf(TxHTNetBL))
                $("#totalTVAReception").text(formatNumberPerf(TxTaxeBL))
                $("#totalTTCReception").text(formatNumberPerf(TxTTCBL))
                $("#totalTTCEuroReception").text(formatNumberPerf(Tx_TTCEuro))
                $("#fraisApprocheReception").text(formatNumberPerf(FraisApproche))
            }

            /* Passe au meme champ de la ligne suivante. L'ancien calcul reconstruisait
               un id "{champ}-{rupture}-{cle+1}" : a la derniere ligne d'une palette le
               rang de rupture change, l'element n'existe pas et le focus restait sur place.
               Le prefixe de l'id est aussi le nom de la classe du champ. */
            function allerAuChampSuivant(idCourant) {
                let classe = idCourant.split("-")[0]
                let champs = $("#tableDetailBl tbody ." + classe)
                let position = champs.index($("#tableDetailBl tbody #" + idCourant))

                if (position < 0 || position + 1 >= champs.length) return

                let suivant = champs.eq(position + 1)
                suivant.focus()
                if (suivant.attr("type") === "text") suivant.select()
            }

            function changeRuptInfo(ligne, SomVolumeBrut, SomVolumeNetRup, TxEmballage, SomPoidsBrut,
                                    SomPoidsNetRup, EcartPoids) {
                $("#VolumeBrut-" + ligne).text(formatNumberPerf(SomVolumeBrut) + " m3")
                $("#VolumeNet-" + ligne).text(formatNumberPerf(SomVolumeNetRup) + " m3")
                $("#TxEmballage-" + ligne).text(formatNumberPerf(TxEmballage))
                $("#PoidsBrut-" + ligne).text(formatNumberPerf(SomPoidsBrut) + " kg")
                $("#PoidsNet-" + ligne).text(formatNumberPerf(SomPoidsNetRup) + " kg")
                $("#EcartPoids-" + ligne).text(formatNumberPerf(EcartPoids) + " kg")
            }

            $("#tableDetailBl").on("change", ".inputNumeroLotProduit", function(evt) {
                let id = evt.target.id
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligneRupt = idExplode[1]

                let IdBlLigne = $("#IdBlLigne-" + key).text()

                // console.log($("#" + id).val())
                $.ajax({
                    url: "{{ route('inputNumeroLotDateProduitChange') }}",
                    type: 'POST',
                    data: {
                        BLenLigneCours: IdBlLigne,
                        numLot: $("#" + id).val(),
                        isNumLot: true,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            $("#" + id).val(response.numLot)
                            notifSuccess("Numéro lot ajouté !!")
                            allerAuChampSuivant(id)
                            return 0
                        }
                        // Restaure la valeur precedente plutot que de vider la cellule.
                        $("#" + id).val(response.ancien ?? "")
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })

            })


            var valDatePeremp = ""
            $("#tableDetailBl").on("focus", ".inputDatePeremption", function(evt) {
                valDatePeremp = $(this).val()
            })

            $("#tableDetailBl").on("blur", ".inputDatePeremption", function(evt) {
                if (valDatePeremp == $(this).val()) return false
                let id = evt.target.id
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligneRupt = idExplode[1]

                let IdBlLigne = $("#IdBlLigne-" + key).text()
                $.ajax({
                    url: "{{ route('inputNumeroLotDateProduitChange') }}",
                    type: 'POST',
                    data: {
                        BLenLigneCours: IdBlLigne,
                        DatePeremption: $("#" + id).val(),
                        isNumLot: false,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            notifSuccess("Date péremption ajoutée/modifiée !!")
                            if (response.perimee) {
                                notif("warning", "Attention",
                                    "Cette date de péremption est déjà dépassée : un accord laboratoire est nécessaire.")
                            }
                            allerAuChampSuivant(id)
                            return 0
                        }
                        // Restaure la date precedente plutot que de vider la cellule.
                        $("#" + id).val(response.ancien ?? valDatePeremp)
                        notif("warning", "Attention", response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#tableDetailBl").on("change", ".checkAccordLaboPeremption", function (evt) {
                let checked = $(this).prop("checked");
                // if (valDatePeremp == $(this).val()) return false
                let id = evt.target.id
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligneRupt = idExplode[1]

                let IdBlLigne = $("#IdBlLigne-" + key).text()
                // let idSuivant = idExplode[0] + "-" + idExplode[1] + "-" + (parseInt(idExplode[2]) + 1)
                $.ajax({
                    url: "{{ route('checkAccordLaboPeremption') }}",
                    type: 'POST',
                    data: {
                        BLenLigneCours: IdBlLigne,
                        checked:checked,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            notifSuccess(response.messages)
                            return false
                        }
                        notifWarning(response.messages)

                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#tableDetailBl").on("click", ".btnChgeProd", function(evt) {
                let id = evt.target.id
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligneRupt = idExplode[1]

                let IdBlLigne = $("#IdBlLigne-" + key).text()

                $("#changeProduit option").each(function() {
                    if ($(this).text().trim() === $("#DesignationProduit-" + key).text()) {
                        $(this).prop("selected", true);
                        $(this).change();
                        return false; // Sortez de la boucle une fois que l'option est sélectionnée
                    }
                });

                $("#idLigne").val(id)
                $("#modalChangeProduiut").modal("show")
            })

            $(document).on("click", "#validChangeProduit", function(param) {
                let id = $("#idLigne").val()
                let idExplode = id.split("-")
                let key = idExplode[2]
                let ligne = idExplode[1]
                let IDPRODUIT = $("#changeProduit").val()
                let IdBlLigne = $("#IdBlLigne-" + key).text()
                var parentId = $("#DesignationProduit-" + key).parent().parent().attr("id");
                // console.log(parentId)

                // var table = $('#tableId').DataTable();

                $.ajax({
                    url: "{{ route('changeProduitReception') }}",
                    type: 'POST',
                    data: {
                        DesigProd: $("#DesignationProduit-" + key).text(),
                        IDPRODUITCHANGE: IDPRODUIT,
                        IDBLL: IdBlLigne,
                        IdBUroAchat: $("#bureauAchatEdit").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            let value = response.data
                            var rowIndex = tableDetailBl.row($('#' + parentId)).index();
                            // console.log("Index de la ligne :", rowIndex);

                            var newData = {
                                action: value.ProduitAI_BL == true ? `<button class="btn btn-sm btn-icon color-ai-outline" style="" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-secondary"
                                                        data-bs-placement="right" title="Num AI : ${value.NumeroAI_BL ?? ""} - Date Validité : ${value.DateValiditeAIP_BL ?? ""}">
                                                        <span class="" style="cursor : pointer;">AI</span>
                                                    </button>
                                                    ` : "",
                                CCodeCIPIntegration: value.CodeCIPIntegration,
                                CDesignationProduit: `<div class="d-flex align-items-center"> <i class="ri-exchange-fill btnChgeProd text-teal fs-22" title="Remplacer le produit" style="cursor:pointer" id="btnChangeProd-${ligne}-${key}"></i>&nbsp; <span id="DesignationProduit-${key}">${value.DesignationProduit}</span></div>` +
                                    `<span class="" id="IdBlLigne-${key}" hidden>${value.IDBONLIVRAISONLIGNE}</span>`,
                                CNumeroCommandeBL: value.NumeroCommandeBL,
                                CQteCommandeeBL: formatNumberPerf(value.QteCommandeeBL),
                                CQteFactureeBL: `<input type="text" name="" id="inputQteFactureeBL-${ligne}-${key}" class="form-control inputQteFactureeBL numberInput input-edit" value="${value.QteFactureeBL}" style="background: #F1F7CF;">`,
                                CQteLivreeBL: `<input type="text" name="" id="inputQteLivreeBL-${ligne}-${key}" class="form-control inputQteLivreeBL numberInput input-edit" value="${value.QteLivreeBL}" style="background: #F1F7CF;">`,
                                CEcartFactureeLivree: `<span id="EcartFactureeLivree-${ligne}-${key}">${formatNumberPerf(response.dataLigne.EcartFactureeLivree)}</span>`,
                                CPrixGHTBL: `<input type="text" name="" id="inputPrixGHTBL-${ligne}-${key}" class="form-control inputPrixGHTBL numberInput input-edit" value="${parseFloat(formatNumber(value.PrixGHTBL))}" style="background: #F1F7CF;">`,
                                CNumeroTracabilite: value.NumeroTracabilite,
                                CNumeroLotProduit: `<input type="text" name="" id="inputNumeroLotProduit-${ligne}-${key}" class="form-control inputNumeroLotProduit input-edit" value="${value.NumeroLotProduit ?? ""}" style="background: #F1F7CF;">`,
                                CDatePeremption: `<input type="date" name="" id="inputDatePeremption-${ligne}-${key}" class="form-control inputDatePeremption input-edit" value="${value.DatePeremption}" style="background: #F1F7CF;">`,
                                // Sans la classe checkAccordLaboPeremption ni un id porteur de
                                // la ligne, la case ne declenchait plus aucun enregistrement.
                                CAccordLaboPeremption: `<input class="form-check-input border border-1 checkAccordLaboPeremption" type="checkbox" value="${value.AccordLaboPeremption}" id="checkAccordLaboPeremption-${ligne}-${key}" ${value.AccordLaboPeremption == true ? "checked" : ""}>`,
                                CTauxTVABL: value.TauxTVABL + " %",
                                CTauxTVADouaneBL: formatNumberPerf(value
                                    .TauxTVADouaneBL) + " %",
                                CPrixGHTAncien: formatNumberPerf(value.PrixGHTAncien),
                                CEvolPrixGHT: `<span id="EvolPrixGHT-${ligne}-${key}">${formatNumberPerf(response.dataLigne.EvolPrixGHT)}</span>`,
                                CPrixGHTAncienReception: formatNumberPerf(value
                                    .PrixGHTAncienReception),
                                CEvolPrixGHTAncienReception: `<span id="EvolPrixGHTAncienReception-${ligne}-${key}">${formatNumberPerf(response.dataLigne.EvolPrixGHTAncienReception)}</span>`,
                                CPrixCessionHT: formatNumberPerf(value.PrixCessionHT),
                                CPrixCessionHTAncien: formatNumberPerf(value
                                    .PrixCessionHTAncien),
                                CEvolPrixCession: formatNumberPerf(response.dataLigne
                                    .EvolPrixCession),
                                CPrixPublicBL: formatNumberPerf(value.PrixPublicBL),
                                CPrixPublicAncien: formatNumberPerf(value
                                    .PrixPublicAncien),
                                CEvolPrixPublic: formatNumberPerf(response.dataLigne
                                    .EvolPrixPublic),
                                CPrixRevientHT: formatNumberPerf(value.PrixRevientHT),
                                CPrixRevientHTAncien: formatNumberPerf(value
                                    .PrixRevientHTAncien),
                                CEvolPrixRevient: formatNumberPerf(response.dataLigne
                                    .EvolPrixRevient),
                                CPrixRMP: formatNumberPerf(value.PrixRMP),
                                CPrixRMPAncien: formatNumberPerf(value.PrixRMPAncien),
                                CEvolPRMP: formatNumberPerf(response.dataLigne
                                    .EvolPRMP),
                                CPrixGHTBLDevise: `<span id="PrixGHTBLDevise-${ligne}-${key}">${formatNumberPerf(value.PrixGHTBLDevise)}</span>`,
                                CTauxRemiseBLL: `<input type="text" name="" id="inputTauxRemiseBLL-${ligne}-${key}" class="form-control inputTauxRemiseBLL numberInput input-edit" value="${parseFloat(formatNumber(value.TauxRemiseBLL))}" style="background: #F1F7CF;">`,
                                CTotalRemiseBLL: `<span id="TotalRemiseBLL-${ligne}-${key}">${formatNumberPerf(value.TotalRemiseBLL)}</span>`,
                                CTotalHTBL: `<span id="TotalHTBL-${ligne}-${key}">${formatNumberPerf(value.TotalHTBL)}</span>`,
                                CTotalHTNetBLL: `<span id="TotalHTNetBLL-${ligne}-${key}">${formatNumberPerf(value.TotalHTNetBLL)}</span>`,
                                CTotalTaxeBL: `<span id="TotalTaxeBL-${ligne}-${key}">${formatNumberPerf(value.TotalTaxeBL)}</span>`,
                                CTotalTTCBL: `<span id="TotalTTCBL-${ligne}-${key}">${formatNumberPerf(value.TotalTTCBL)}</span>`,
                                CVolumeNetLigne: `<span id="CVolumeNetLigne-${ligne}-${key}">${response.dataLigne.CVolumeNetLigne}</span>`,
                                CPoidsNetLigne: `<span id="CPoidsNetLigne-${ligne}-${key}">${response.dataLigne.CPoidsNetLigne}</span>`,
                                CLibelleRubriqueDouane: value.LibelleRubriqueDouane,
                                CCodeCipProduit1: value.CodeCipProduit1,

                                CNumeroPalette: value.NumeroPalette,
                                CNumeroFactureFseur: value.NumeroFactureFseur,
                                CDateFactureFseur: value.DateFactureFseur,
                                CPoidsBrutPalette: value.PoidsBrutPalette,
                                CVolumeBrutPalette: value.VolumeBrutPalette
                            }

                            // Remplacez les données de la ligne existante par les nouvelles données
                            tableDetailBl.row(rowIndex).data(newData).draw();

                            changeTotaux(
                                response.TotauBl.TxHTBL,
                                response.TotauBl.TxTaxeBL,
                                response.TotauBl.TxTTCBL,
                                response.TotauBl.Tx_TTCEuro,
                                response.TotauBl.FraisApproche,
                                response.TotauBl.TxRemiseBLL,
                                response.TotauBl.TxHTNetBL
                            )

                            changeRuptInfo(
                                ligne,
                                response.rupture.SomVolumeBrut,
                                response.rupture.SomVolumeNetRup,
                                response.rupture.TxEmballage,
                                response.rupture.SomPoidsBrut,
                                response.rupture.SomPoidsNetRup,
                                response.rupture.EcartPoids
                            )

                            $("#modalChangeProduiut").modal("hide")
                            notifSuccess(response.messages)
                            return false
                        }

                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            })

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

                if ($("#idSiteEnCours").val() != "1") {
                    alertSwal(
                        'Aucun enrégistrement ne peut être fait sur un site autre que la centrale')
                    return 0;
                }

                if ($("#etatBL").val() == "false") {
                    // // console.log($("#ActiverPriseCommandeClient").val(), $("#FinTraitExtimLe").val())
                    // return
                    if ($("#VenteSurReapp").val() == "true" && $("#FinTraitExtimLe").val() ==
                        "") {
                        alertSwal('Veuillez saisir la date estimée de Fin de traitement estimée')

                        $("#FinTraitExtimLe").select()
                        $("#FinTraitExtimLe").focus()
                        return 0;
                    }

                    confirmAction(() => {
                        let formData = new FormData(_("formInfoReception"))
                        formData.append("_token", "{{ csrf_token() }}")
                        formData.append("VenteSurReapp", $("#VenteSurReapp").val())
                        formData.append("ModeForfait", $("#ModeForfait").val())
                        formData.append("IDMONNAIE", _('selIDMONNAIE').value)
                        formData.append("TauxMonnaie", _("inpTauxMonnaie").value)


                        demasquerFormatInputAll("numberInput", "formInfoReception", formData)
                        $.ajax({
                            url: "{{ route('EnregistreReception') }}",
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            beforeSend: progressHandler(),
                            dataType: 'json',
                            success: function(response) {
                                // console.log(response)

                                if (response.error == false) {
                                    // notif("success", "Félicitation", response.messages)
                                    $("#dateEdit").val(response.date).change()
                                    $("#formInfoReception")[0].reset()
                                    $("#formAddProdBl")[0].reset()
                                    tableDetailBl.clear().draw()
                                    $("#modalEditAddBl").modal("hide")
                                    ListePreReception($("#filtrePeriode").val(),
                                        $("#IDBUREAUACHAT").val(),
                                        $("#IDFOURNISSEUR").val(),
                                        $("#IDMODEEXPEDITION").val(),
                                        viewParam
                                    )
                                    completeHandler()
                                    return 0
                                }
                                completeHandler()
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                completeHandler()
                                // console.log(response)
                                notifError(response.responseJSON.messages)
                            }
                        })
                    }, "Voulez-vous enregistrer la pré-réception en cours ?")
                    return 0
                }
                alertSwal('Impossible de mettre une commande déjà réceptionnée en pré-réception !')

            })

            // Valider le Bl
            $("#btnValiderReception").click(function() {
                let minute = 15000

                if ($("#idSiteEnCours").val() != "1") {
                    alertSwal('Aucune validation ne peut être lancée sur un site autre que la centrale')
                    return 0;
                }

                if (parseInt($("#bureauAchatEdit").val()) <= 0) {
                    alertSwal('Veuillez renseigner le bureau d\'achat !')
                    return 0;
                }

                if (parseInt($("#Fseur").val()) == 0) {
                    alertSwal('Veuillez renseigner le fournisseur !')
                    return 0;
                }

                if ($("#NumFacture").val() == "") {
                    alertSwal("Veuillez renseigner le numéro de bon de livraison SVP !")
                    return 0;
                }

                if (parseInt($("#selIDMONNAIE").val()) == 0) {
                    alertSwal("Veuillez selectionner une devise SVP !")
                    return 0;
                }

                confirmMdp("{{ csrf_token() }}", () => {
                        let formData = new FormData(_("formInfoReception"))
                        formData.append("_token", "{{ csrf_token() }}")
                        formData.append("VenteSurReapp", $("#VenteSurReapp").val())
                        formData.append("ModeForfait", $("#ModeForfait").val())
                        formData.append("AgenceEnCours", $("#idSiteEnCours").val())
                        formData.append("IDMONNAIE", _('selIDMONNAIE').value)
                        formData.append("TauxMonnaie", _("inpTauxMonnaie").value)

                        demasquerFormatInputAll("numberInput", "formInfoReception", formData)

                        axios.post("{{ route('validerBonReception') }}",
                            formData, {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                },
                                onUploadProgress: progressHandler() // Appelé pendant l'envoi
                            })
                            .then(response => {
                                if (response.data.error == false) {
                                    $("#modalEditAddBl").modal("hide")
                                    completeHandler()

                                    alertSwal(response.data.messages)
                                    // notifSuccess(response.data.messages)
                                    return false
                                }

                                completeHandler()
                                notifWarning(response.data.messages)
                            })
                            .catch(response => {
                                completeHandler()
                                // console.log(response)
                                let message = 'Une erreur est survenue'
                                if(response.responseJSON == undefined ){
                                    message = response.response.data.messages
                                }else{
                                    message = response.responseJSON.messages
                                }
                                notifError(message)
                            })
                    }, null,
                    "Voulez-vous valider la réception ?", {
                        sousTitre: '',
                        infoJNL: "ENREGISTREMENT DU BON DE RECEPTION",
                        typeJNL: 3,
                        CodeDroit: "DA_ReceptionValider"
                    })
            })

            $(document).on("click", "#btnCloseLoader", function() {
                completeHandler()

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


            // ------------ Integration de produit par excel
            $("#integrerCsv").on("change", function() {

                if (parseInt($("#bureauAchatEdit").val()) <= 0) {

                    alertSwal('Veuillez renseigner le bureau d\'achat !')
                    $(this).val("")
                    return 0;
                }
                if ($(this).val()) {
                    $("#btnIntegrerCsv").trigger("click")
                    $(this).val("")
                }
            })

            $(document).on("click", "#labelIntegrerCSV", function() {

                if (parseInt($("#bureauAchatEdit").val()) == 0 || $("#bureauAchatEdit").val() == "") {
                    alertSwal("Veuiller choisir un bureau d'achat avant d'éffectuer cette opération !")
                    return false
                }

                if (parseInt($("#selIDMONNAIE").val()) == 0) {
                    alertSwal("Veuillez selectionner une devise SVP !")
                    return 0;
                }
                $("#integrerCsv").trigger("click")
            })

            $("#formIntegrerCsvReception").on("submit", function(evt) {
                evt.preventDefault()



                let formData = new FormData(_("formIntegrerCsvReception"))
                formData.append("_token", "{{ csrf_token() }}")
                formData.append("VenteSurReapp", $("#VenteSurReapp").val())

                formData.append("IDBL", $("#IDBL").val())
                formData.append("INT_BLValidee", $("#etatBL").val())
                formData.append("BuroAchatFseur", $("#bureauAchatEdit").val())
                formData.append("AgenceSelect", $("#idSiteEnCours").val())
                formData.append("IDMONNAIE", $("#selIDMONNAIE").val())
                formData.append("TauxMonnaie", $("#inpTauxMonnaie").val())
                $("#integrerCsv").val("")
                $.ajax({
                    url: "{{ route('integerCsvPreReception') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {

                            if (response.lien != "") {
                                // $("#lienCsv").attr("href",
                                //     `{{ asset('${response.lien}') }}`)
                                // _("lienCsv").click()

                                downloadExcel(response.lien, response.filePath)
                            }

                            completeHandler()
                            notifSuccess( response.messages)

                            if(response.notif != ""){
                                $("#IDBL").val(response.notif)
                                listingReception($("#IDBL").val(), "", true)
                            }

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

            // ---------- Afficher le montant du transitaire selon sont choix
            $("#TransitaireEdit").on("change", function() {
                let modeExpEdit = $("#modeExpEdit").val()

                if ($(this).val() == "" || $(this).val() == null || $(this).val() == 0) {
                    $("#TransitaireEdit option:eq(0)").prop("selected", true);
                    return 0
                }

                $.ajax({
                    url: "{{ route('transitaire.getMontant') }}",
                    type: 'GET',
                    data: {
                        IDTRANSIT: $(this).val(),
                        modeExpEdit: modeExpEdit,
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            if (response.turn == false) {
                                notif("warning", "Attention", response.messages)
                                return 0
                            }
                            $("#ForFaitTransitaireEdit").val(response.data).trigger("input")
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            })

            // ----------------- Actualisation du prix de revient cession public
            $("#btnActualisePrixRevient").on("click", function() {

                confirmMdp("{{ csrf_token() }}",
                    () => {
                        let formData = new FormData(_("formInfoReception"));
                        demasquerFormatInputAll("numberInput", "formInfoReception", formData)
                        formData.append('IDBL', $("#IDBL").val())
                        formData.append('VolumeExpedition', demasquerFormatInput($("#VolBrutEdit")
                            .val()))
                        formData.append('AV_CoefficientFob', demasquerFormatInput($("#FobCoeffEdit")
                            .val()))
                        formData.append('CoutTransport', demasquerFormatInput($("#CoutTpEdit")
                            .val()))
                        formData.append('TauxAssurances', demasquerFormatInput($("#tauxAssurEdit")
                            .val()))
                        formData.append('MontantPreacheminement', demasquerFormatInput($(
                            "#MontantPreAchEdit").val()))
                        formData.append('Mont_AssuranceExpMaritime', demasquerFormatInput($(
                            "#MontantAssurExportEdit").val()))
                        formData.append('MontantForfaitTransit', demasquerFormatInput($(
                            "#ForFaitTransitaireEdit").val()))
                        formData.append('ModeForfait', $("#ModeForfait").val())
                        formData.append('VenteSurReapp', $("#VenteSurReapp").val())
                        formData.append('AutresTaxe1', demasquerFormatInput($("#taxe1Edit").val()))
                        formData.append('AutresTaxe2', demasquerFormatInput($("#taxe2Edit").val()))
                        formData.append('_token', "{{ csrf_token() }}")

                        $.ajax({
                            url: "{{ route('actualisePrixCessionRevient') }}",
                            type: 'POST',
                            data: formData,
                            beforeSend: progressHandler(),
                            processData: false,
                            contentType: false,
                            dataType: 'json',
                            success: function(response) {
                                // console.log(response)

                                if (response.error == false) {

                                    listingReception($("#IDBL").val(), "", true)
                                    notif("success", "Félicitation", response.messages)
                                    completeHandler()
                                    return 0
                                }
                                notif("warning", "Attention", response.messages)
                                completeHandler()

                            },
                            error: function(response) {
                                // console.log(response)
                                completeHandler()
                                notifError(response.messages)
                            }
                        })
                    }, null,
                    "Veuillez saisir votre mot de passe pour confirmer l'actualisation des prix !!", {
                        sousTitre: '',
                        infoJNL: "ACTUALISTION PRIX REVIENT - CESSION - PUBLIC",
                        typeJNL: 3,
                        CodeDroit: "DM_Achats"
                    }
                )
            })

            $("#modalEditAddBl").on("click", "#btnImprimBonReception", function() {
                let IDBL = $("#idBonLivraison").val()
                ImprimerBonAchat(IDBL, route = `{{ route('ImprimBonReception') }}`)
            })

            // $('#modalEditAddBl').on('input', ".numberInput", function() {
            //     handleInput($(this));
            // });


            /*::::::::::::::::::::::::::::::::::: DEBUT MODAL ESTIME REELS ::::::::::::::::::::::::::::::::::::::::::::::*/

            let tableBEstimeReelDouane = $("#tableBEstimeReelDouane").DataTable({
                bFilter: false,
                language: languageTable,
                columnDefs: [{
                    targets: [1, 2, 3],
                    className: "text-center"
                }, ],
                pageLength: 10,
                lengthChange: false

            })

            let tableBEstimeReelLocal = $("#tableBEstimeReelLocal").DataTable({
                bFilter: false,
                language: languageTable,
                columnDefs: [{
                    targets: [1, 2, 3],
                    className: "text-center"
                }, ],
                pageLength: 10,
                lengthChange: false
            })

            $("#btnNewPreReception").click(function() {
                $("#idBonLivraison").val("")

                $("#nbreLigneReception").text(0)
                // $("#totalHTReception").text(0)
                // $("#totalTVAReception").text(0)
                // $("#totalTTCReception").text(0)
                // $("#totalTTCEuroReception").text(0 + " €")
                // $("#fraisApprocheReception").text(0)

                changeTotaux(0, 0, 0, 0, 0, 0, 0)

                tableDetailBl.clear().draw()
                $("#formInfoReception")[0].reset()
                $("#modalEditAddBl").modal("show")
            })

            $("#modalEstimeReel").on("hide.bs.modal", function() {
                $("#modalEditAddBl").modal("show")
            })

            $("#modalEditAddBl").on("click", "#btnEstimeReel", function() {

                if ($("#idBonLivraison").val() == "") {
                    Swal.fire({
                        position: 'center',
                        icon: 'warning',
                        title: "Aucun BL disponible !!",
                        showConfirmButton: false,
                        timer: 3000
                    })
                    return 0;
                }

                $("#modalEstimeReel").modal("show")
                $("#modalEditAddBl").modal("hide")


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

                        if (response.error == false) {

                            tableBEstimeReelDouane.clear().draw()
                            tableBEstimeReelLocal.clear().draw()

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

                                tableBEstimeReelDouane.row.add([
                                    value.libelle,
                                    formatNumber(value.Estime),
                                    `<input type="text" name="" id="reelDouane-${key+1}" class="form-control inputReelDouane" value="${formatNumber(value.Reel)}" style="background: #F1F7CF;">`,
                                    formatNumber(value.Ecart),
                                ])
                            })

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

                                let reel = ""

                                switch (value.IDFAMILLEPRODUIT) {
                                    case 1:
                                        reel = parseFloat(response.donne
                                            .MontantMedicament)
                                        break;

                                    case 2:
                                        reel = parseFloat(response.donne
                                            .MontantParaphamacie)
                                        break;

                                    case 3:
                                        reel = parseFloat(response.donne
                                            .MontantLaitFarine)
                                        break;

                                    case 4:
                                        reel = parseFloat(response.donne
                                            .MontantDivers)
                                        break;
                                }

                                let ecart = reel - parseFloat(value
                                    .la_somme_MontTransitLocal_Famille)

                                tableBEstimeReelLocal.row.add([
                                    value.LibelleFamilleProduit,
                                    formatNumber(value
                                        .la_somme_MontTransitLocal_Famille),
                                    `<input type="text" name="" class="form-control inputEstimeLocal" id="reelLocal-${key+1}" value="${formatNumber(reel)}" style="background: #F1F7CF;">`,
                                    formatNumber(ecart)
                                ])
                            })

                            tableBEstimeReelDouane.draw()
                            tableBEstimeReelLocal.draw()
                        } else {
                            notif("warning", "Attention", response.messages)
                        }
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            })

            $("#modalEstimeReel").on("click", "#btnSaveEstimeReel", function() {

                progressHandler()

                let input = $(".inputReelDouane")

                var dataDouane = new Object()
                var dataLocal = new Object()
                let ligne = 1
                tableBEstimeReelDouane.rows().every(function() {
                    var data = this.data();
                    var column2Value = data[
                        0]; // Suppose the value you want is in the second column

                    dataDouane.column2Value = demasquerFormatInput($("#reelDouane-" + ligne)
                        .val())
                    renameKey(dataDouane, 'column2Value',
                        `${column2Value.replace(/\s+/g, '')}`);
                    ligne++
                });

                let lignes = 1
                tableBEstimeReelLocal.rows().every(function() {
                    var data = this.data();
                    var column2Values = data[0];
                    dataLocal.column2Value = demasquerFormatInput($("#reelLocal-" + lignes)
                        .val())
                    renameKey(dataLocal, 'column2Value', `${column2Values}`);
                    lignes++
                });

                $.ajax({
                    url: "{{ route('SaveEstimeReel') }}",
                    type: 'POST',
                    data: {
                        BLenCours: $("#idBonLivraison").val(),
                        dataDouane: dataDouane,
                        dataLocal: dataLocal,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            $("#modalEditAddBl").modal("show")
                            $("#modalEstimeReel").modal("hide")
                            notif("success", "Felicitation", response.messages)
                            completeHandler()
                            return 0
                        }
                        completeHandler()
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.messages)
                    }
                })
            })

            $("#modalEstimeReel").on("click", "input", function() {
                $(this).select()
            })

            function renameKey(obj, oldKey, newKey) {
                if (oldKey !== newKey) {
                    Object.defineProperty(obj, newKey,
                        Object.getOwnPropertyDescriptor(obj, oldKey));
                    delete obj[oldKey];
                }
            }

            var dataBl = ""
            $("#modalEditAddBl").on("shown.bs.modal", function(){
                if(dataBl != ""){
                    remplissageTbaleModalBl(dataBl)
                }
            })

            function remplissageTbaleModalBl(dataBlParam){
                tableDetailBl = remplissageDataTable({
                    IdentifiantDuTableau: '#tableDetailBl',
                    obj: dataBlParam,
                    bFilter: true,
                    paging: false,
                    scrollX: true,
                    scrollY: "600px",
                    drawCallback: function(settings) {
                        // var api = this.api();
                        var api = settings.oInstance.api();;
                        var rows = api.rows().nodes();
                        var last = null;
                        let tailleDonne = api.data().length

                        let nbre = 0
                        let NumeroPalette = ""

                        let PoidsBrut = 0
                        let VolumeBrut = 0
                        let VolumeNet = 0
                        let PoidsNet = 0
                        let TxEmballage = 0

                        let ligne = 1

                        api.rows().every(function(value, index) {

                            let rowData = this.data();

                            if (nbre == 0) {
                                $(rows).eq(this.index()).before(
                                    `<tr style="background-color:#FFFFE8;" class="rupture">
                                                <td colspan="41">
                                                    Facture N° : <span class="text-danger bold">${rowData.CNumeroFactureFseur ?? ""}</span>
                                                    ${rowData.CDateFactureFseur != null ? "- Date Facture : <span class='text-danger bold'>"+explodeDate(rowData.CDateFactureFseur)+"</span>" : ""}
                                                    - Palette / Colis N° : <span class="text-danger bold">${rowData.CNumeroPalette ?? ""} </pan>
                                                </td>
                                            </tr>
                                            `
                                );
                                NumeroPalette = rowData
                                    .CNumeroPalette
                            }

                            if (nbre > 0) {

                                if (NumeroPalette != rowData
                                    .CNumeroPalette) {
                                    if (VolumeNet > 0) TxEmballage =
                                        VolumeBrut / VolumeNet
                                    EcartPoids = PoidsBrut -
                                        PoidsNet

                                    $(rows).eq(this.index()).before(
                                        `
                                            <tr style="background-color:#f2eefc;" class="rupture">
                                                <td colspan="41">V. Brut : <span class="text-danger" id="VolumeBrut-${ligne}"> ${formatNumberPerf(VolumeBrut) + ' m3'} </span> &nbsp;&nbsp;
                                                V. Net : <span class="text-danger" id="VolumeNet-${ligne}">${formatNumberPerf(VolumeNet) + ' m3'}</span> &nbsp;&nbsp;
                                                Taux Emb. : <span class="text-danger" id="TxEmballage-${ligne}"> ${formatNumberPerf(TxEmballage) + ' %'} </span> &nbsp;&nbsp;
                                                Poids Brut : <span class="text-danger" id="PoidsBrut-${ligne}"> ${formatNumberPerf(PoidsBrut) + ' Kg'} </span> &nbsp;&nbsp;
                                                Poids Net : <span class="text-danger" id="PoidsNet-${ligne}">${formatNumberPerf(PoidsNet) + ' Kg'}</span> &nbsp;&nbsp;
                                                Ecart Poids : <span class="text-danger" id="EcartPoids-${ligne}"> ${formatNumberPerf(EcartPoids) +' Kg'} </span></td>

                                            </tr>
                                            <tr style="background-color:#FFFFE8;" class="rupture">
                                                <td colspan="41">
                                                    Facture N° : <span class="text-danger bold">${rowData.CNumeroFactureFseur?? ""}</span>
                                                    ${rowData.CDateFactureFseur != null ? "- Date Facture : <span class='text-danger bold'>"+explodeDate(rowData.CDateFactureFseur)+"</span>" : ""}
                                                    - Palette / Colis N° : <span class="text-danger bold">${NumeroPalette} </pan>
                                                </td>
                                            </tr>
                                            `
                                    );

                                    NumeroPalette = rowData
                                        .CNumeroPalette
                                    VolumeNet = 0
                                    PoidsNet = 0
                                    PoidsBrut = 0
                                    VolumeBrut = 0

                                    ligne++
                                }
                            }

                            VolumeNet += (rowData.QteLivreeBL *
                                rowData.VolumeProduitcmcube)
                            PoidsNet += (rowData.QteLivreeBL *
                                rowData.PoidsProduitg)
                            // VolumeNet += parseFloat(rowData[35])
                            // PoidsNet += parseFloat(rowData[36])
                            PoidsBrut += parseFloat(rowData
                                .PoidsBrutPalette)
                            VolumeBrut += parseFloat(rowData
                                .VolumeBrutPalette)
                            if (nbre == tailleDonne - 1) {

                                if (VolumeNet > 0) TxEmballage =
                                    VolumeBrut / VolumeNet
                                EcartPoids = PoidsBrut - PoidsNet

                                $(rows).eq(this.index()).after(
                                    `
                                            <tr style="background-color:#f2eefc;" class="rupture">
                                                <td colspan="41">V. Brut : <span class="text-danger" id="VolumeBrut-${ligne}"> ${formatNumber(VolumeBrut) + ' m3'} </span> &nbsp;&nbsp;
                                                V. Net : <span class="text-danger" id="VolumeNet-${ligne}">${formatNumber(VolumeNet) + ' m3'}</span> &nbsp;&nbsp;
                                                Taux Emb. : <span class="text-danger" id="TxEmballage-${ligne}"> ${formatNumber(TxEmballage) + ' %'} </span> &nbsp;&nbsp;
                                                Poids Brut : <span class="text-danger" id="PoidsBrut-${ligne}"> ${formatNumber(PoidsBrut) + ' Kg'} </span> &nbsp;&nbsp;
                                                Poids Net : <span class="text-danger" id="PoidsNet-${ligne}">${formatNumber(PoidsNet) + ' Kg'}</span> &nbsp;&nbsp;
                                                Ecart Poids : <span class="text-danger" id="EcartPoids-${ligne}"> ${formatNumber(EcartPoids) +' Kg'} </span></td>
                                            </tr>
                                            `
                                );
                            }
                            // $(rows).eq(this.index()).after(dataDown);

                            nbre++
                            $(rows).eq(this.index()).attr("id",
                                "ligne-" + nbre);
                        });
                    }
                })

                {{-- divShowPer = $('#tableDetailBl_filter')
                let BroDivShowPBL = divShowPer.parent().parent()
                let childDetailBl = BroDivShowPBL.children().eq(0)
                let child2DetailBl = BroDivShowPBL.children().eq(1)
                child2DetailBl.html("")
                child2DetailBl.append(`<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="dropChoixColDetailBl"  style="max-height: 300px;">\
                                                </ul>\
                                            </div>\
                                        </div>`)

                listeColonnesDetailBl = $('.colTableDetailBl')

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

                    $('#dropChoixColDetailBl').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>`)
                }) --}}

                {{-- $("#modalEditAddBl").on('click', '.showCol', function() {
                    fnShowHideGeneral($(this).attr('valeur'), "tableDetailBl")
                }) --}}
            }

            /*::::::::::::::::::::::::::::::::::: FIN MODAL ESTIME REELS ::::::::::::::::::::::::::::::::::::::::::::::*/


            //::::::::::::: FONCTIONS :::::::::::::::::::::::::::::://

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

                        if (response.error == false) {


                            totalTTCEuroReception = formatNumberPerf(response.totaux
                                .totalTTCDeviseReception) + " " + response.symbMponnaie

                            // tableDetailBl.draw()

                            $("#nbreLigneReception").text(formatNumberPerf(response.data.length))
                            // $("#totalHTReception").text(formatNumberPerf(response.totaux.totalHTReception))
                            // $("#totalTVAReception").text(formatNumberPerf(response.totaux.totalTVAReception))
                            // $("#totalTTCReception").text(formatNumberPerf(response.totaux.totalTTCReception))
                            // $("#totalTTCEuroReception").text(totalTTCEuroReception)
                            // $("#fraisApprocheReception").text(formatNumberPerf(response.totaux.fraisApprocheReception))

                            changeTotaux(
                                response.totaux.totalHTReception,
                                response.totaux.totalTVAReception,
                                response.totaux.totalTTCReception,
                                response.totaux.totalTTCDeviseReception,
                                response.totaux.fraisApprocheReception,
                                response.totaux.totalRemiseReception,
                                response.totaux.totalHTNetReception
                            )


                            if ($("#modalEditAddBl").hasClass("show")) {
                                remplissageTbaleModalBl(response.data)
                            }else{
                                dataBl = response.data
                            }


                            if (param != "" || actualiseInfoBL == true) {
                                // $("#modalEditAddBl").modal("show")
                                $("#bureauAchatEdit").val(response.dataBl.IDBUREAUACHAT).change()
                                $("#modeExpEdit").val(response.dataBl.IDMODEEXPEDITION).change()
                                $("#conteneurEdit").val(response.dataBl.TypeConteneur).change()
                                $("#etatBL").val(response.dataBl.BonLivraisonValide)
                                $("#idBonLivraison").val(response.dataBl.IDBONLIVRAISON)
                                let MontantPreacheminement = parseFloat(response.dataBl
                                    .MontantPreacheminement) ?? 0
                                let MontantAssuranceExport = parseFloat(response.dataBl
                                    .MontantAssuranceExport) ?? 0
                                let CalculMontantTransitEnModeForfait = response.dataBl
                                    .CalculMontantTransitEnModeForfait
                                let AutresTaxe2 = parseInt(response.dataBl.AutresTaxe2) ?? 0
                                let AutresTaxe1 = parseInt(response.dataBl.AutresTaxe1) ?? 0
                                let VolumeBrutBonLivraison = parseFloat(response.dataBl
                                    .VolumeBrutBonLivraison) ?? 0
                                let TauxAssurance = parseFloat(response.dataBl.TauxAssurance) ?? 0
                                let CoutTransportBonLivraison = parseFloat(response.dataBl
                                    .CoutTransportBonLivraison) ?? 0
                                let ActiverPriseCommandeClient = response.dataBl
                                    .ActiverPriseCommandeClient
                                $("#MontantAssurExportEdit").val(MontantAssuranceExport).trigger(
                                    "input")
                                $("#MontantPreAchEdit").val(MontantPreacheminement).trigger("input")
                                $("#ModeForfait").prop("checked", CalculMontantTransitEnModeForfait)

                                $("#taxe2Edit").val(AutresTaxe2).trigger("input")
                                $("#taxe1Edit").val(AutresTaxe1).trigger("input")
                                $("#VolBrutEdit").val(VolumeBrutBonLivraison).trigger("input")
                                $("#PoidBrutEdit").val(response.dataBl.PoidsBrutBonLivraison)
                                    .trigger(
                                        "input")
                                $("#numContVolEdit").val(response.dataBl.NumeroConteneurOuVol)
                                $("#tauxAssurEdit").val(TauxAssurance).trigger("input")
                                $("#CoutTpEdit").val(CoutTransportBonLivraison).trigger("input")
                                $("#FobCoeffEdit").val(response.dataBl.CoefficientFOB)

                                $("#Fseur").val(response.dataBl.IDFOURNISSEUR).change()
                                $("#NumFacture").val(response.dataBl.NumeroBonLivraison)
                                $("#VenteSurReapp").val(response.dataBl.ActiverPriseCommandeClient)

                                $("#VenteSurReapp").prop("checked", ActiverPriseCommandeClient)

                                $("#dateEdit").val(response.dataBl.DateBonLivraison)
                                $("#dateEcheance").val(response.dataBl.DateEcheanceBL)
                                $("#FinTraitExtimLe").val(response.dataBl.DateFinTraitementEstimee)
                                let IDMONNAIE = response.dataBl.IDMONNAIE
                                if (IDMONNAIE == null || IDMONNAIE == "") {
                                    IDMONNAIE = 0
                                }
                                $("#selIDMONNAIE").val(IDMONNAIE).trigger("change")
                                $("#inpTauxMonnaie").val(response.dataBl.TauxMonnaieBL)
                                $("#TransitaireEdit").val(response.dataBl.IDTRANSITAIRE).change()
                                let MontantForfaitTransit = parseFloat(response.dataBl
                                    .MontantForfaitTransit) ?? 0
                                $("#ForFaitTransitaireEdit").val(MontantForfaitTransit).trigger(
                                    "input")
                                if (response.dataBl.CalculMontantTransitEnModeForfait == true) {
                                    $("#ModeForfait").prop("checked", true)
                                }

                                if (param != "") $(param).modal("show")
                            }

                        } else {
                            notifWarning(response.messages)
                        }

                        completeHandler()
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.messages)
                    }
                })
            }

            function ImprimerBonAchat(TABID, route = `{{ route('imprimeBonAchatCmde') }}`) {
                $.ajax({
                    url: route,
                    type: 'POST',
                    beforeSend: progressHandler(),
                    data: {
                        LISTE_IDCOMMANDES: TABID,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    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
                            // window.open(blobUrl);
                            var printWindow = window.open(blobUrl);
                            // printWindow.print();
                        } else {
                            notif("warning", "Attention", response.messages)
                        }
                        completeHandler()
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.messages)
                    }
                })
            }

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

                        if (response.error == false) {

                            // Pour chaque fichier dans la réponse
                            $.each(response.fichier, function(key, value) {
                                // Créer un lien de téléchargement pour le fichier
                                var blob = b64toBlob(value,
                                    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                                );
                                var downloadLink = $('<a>')
                                    .attr('href', URL.createObjectURL(blob))
                                    // .attr('hidden', "hidden")
                                    .attr('id', 'download' + key)
                                    // Ajouter l'attribut download pour indiquer que c'est un lien de téléchargement
                                    .attr('download', response.listeNom[key])
                                    .text('Télécharger' +
                                        key); // Texte du lien de téléchargement

                                // Ajouter le lien de téléchargement au conteneur
                                $('#formFiltre').append(downloadLink);
                                _('download' + key).click()
                                _('download' + key).remove()
                            });

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

            function deleteBL(IDBL) {
                $.ajax({
                    url: "{{ route('deletePreReceptionEncours') }}",
                    type: 'POST',
                    data: {
                        LISTE_IDBL: IDBL,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {
                            ListePreReception(
                                $("#filtrePeriode").val(),
                                $("#IDBUREAUACHAT").val(),
                                $("#IDFOURNISSEUR").val(),
                                $("#IDMODEEXPEDITION").val(),
                                viewParam
                            )
                        }
                        notif(response.etat, response.info, response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON ? response.responseJSON.messages : response.statusText)
                    }
                })
            }

            function chargerTableBLLigne(IDBL) {

                $.ajax({

                    url: '{{ route('detailPreReceptionEncours') }}',
                    beforeSend: progressHandler(),
                    type: 'POST',
                    data: {
                        IDBL: IDBL,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {

                            tableBlLigne.clear().draw()

                            let ttc = 0


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

                                let bntAI = value.ProduitAI_BL == true ? `<button class="btn btn-sm btn-icon color-ai-outline" style="" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-secondary"
                                             data-bs-placement="right" title="Num AI : ${value.NumeroAI_BL ?? ""} - Date Validité : ${value.DateValiditeAIP_BL ?? ""}">
                                             <span class="" style="cursor : pointer;">AI</span>
                                                </button>
                                                ` : ""

                                tableBlLigne.row.add([
                                    `<div class="d-flex align-items-center">
                                                    <input class="form-check-input ms-1 tableActionsizeCheckbox"  type="checkbox" id="checkSelectBlLigne" data-id ="${value.IDBONLIVRAISONLIGNE}">
                                                    ${bntAI}
                                                </div> `,
                                    value.CodeCipProduit1,
                                    value.CodeTedisProduit,
                                    value.DesignationProduit,
                                    value.NumeroCommandeBL,
                                    value.NumeroPalette,
                                    formatNumberPerf(value.QteFactureeBL),
                                    formatNumberPerf(value.QteLivreeBL),
                                    formatNumberPerf(value.PrixFHTBL),
                                    formatNumberPerf(value.PrixGHTBL),
                                    value.NumeroTracabilite,
                                    value.NumeroLotProduit,
                                    value.DatePeremption,
                                    value.TauxTVABL,
                                    formatNumberPerf(value.TauxRemiseBLL) + " %",
                                    formatNumberPerf(value.PrixCessionHT),
                                    formatNumberPerf(value.PrixPublicBL),
                                    formatNumberPerf(value.PrixRevientHT),
                                    formatNumberPerf(value.PrixRMP),
                                    formatNumberPerf(value.TotalRemiseBLL),
                                    formatNumberPerf(value.TotalHTBL),
                                    formatNumberPerf(value.TotalTaxeBL),
                                    formatNumberPerf(value.TotalTTCBL),
                                    formatNumberPerf(value.VolumeProduitcmcube),
                                    value.PoidsProduitg,
                                    value.LibelleRubriqueDouane ?? ''
                                ])

                                ttc += parseFloat(value.TotalTTCBL)
                            })

                            if (response.data.length > 0) {
                                $("#NumBL").text(response.data[0].NumeroBonLivraison)
                                $("#NbreLigneBL").text(response.data.length)
                                $("#TotalTTCBL").text(formatNumber(ttc))
                                $("#badgeEtape").html(etapeBl(response.data[0].EtapeBL))
                            }

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

                        notifError(error)
                        completeHandler()
                    }
                })
            }

            /**
             * @returns {Array} la liste des commandes slectionnées
             **/
            function listeLigneSelectionne() {

                let dataIdCmdeLigne = []
                let dataPack = []
                let valNow = ""
                let lignes = tableListePre.rows().nodes()

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

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

            // Supprimer les lignes cochées sur tableau PreReception
            $(document).on('click', '#suppLignesCochéeCmde', function() {

                let tabIdCmde = listeLigneSelectionne()

                if (tabIdCmde.length == 0) {
                    notifDanger('Veuillez cocher au moins une ligne pour éffectuer une suppression')
                    return false
                }

                confirmMdp('{{ csrf_token() }}', () => {
                        deleteBL(tabIdCmde);
                        _('checkSelectAllCmde').checked = false
                    }, null,
                    "Veuillez saisir votre mot de passe pour confirmer la suppresion de/des BL",
                    {
                        sousTitre: '',
                        infoJNL: "SUPPRESSION DE BON DE LIVRAISON",
                        typeJNL: 3,
                        CodeDroit: "DG_PeutSuppirmer"
                    }
                )

            })

            // Valorisation des totaux
            ignoreChangeSessionIDMONNAIEAffichage = true
            _('IDMONNAIEAffichage').addEventListener('change', function() {
                $.ajax({
                    url: "{{ route('listePreReceptionEncours') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: $("#filtrePeriode").val(),
                        buroSele: $("#IDBUREAUACHAT").val(),
                        fseurSelc: $("#IDFOURNISSEUR").val(),
                        expSele: $("#IDMODEEXPEDITION").val(),
                        viewParam: viewParam,
                        devise: $(this).val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            // $("#nbreBL").text(formatNumberPerf(response.data.length))
                            $("#totalHTTT").text(formatNumberPerf(response.totaux.TotalHT))
                            $("#totalRemiseTT").text(formatNumberPerf(response.totaux.TotalRemise))
                            $("#totalHTNetTT").text(formatNumberPerf(response.totaux.TotalHTNet))
                            $("#totalTVATT").text(formatNumberPerf(response.totaux
                                .TotalTaxe))
                            $("#totalTTCTT").text(formatNumberPerf(response.totaux
                                .TotalTTC))
                        }
                    },
                    error: function(response) {
                        notifError(response.messages)
                    }
                });

            })

            function ListePreReception(filtrePeriode, IDBUREAUACHAT, IDFOURNISSEUR, IDMODEEXPEDITION,
                                       viewParam) {
                $.ajax({
                    url: "{{ route('listePreReceptionEncours') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: filtrePeriode,
                        buroSele: IDBUREAUACHAT,
                        fseurSelc: IDFOURNISSEUR,
                        expSele: IDMODEEXPEDITION,
                        viewParam: viewParam,
                        devise: _("IDMONNAIEAffichage").value,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {

                            tableListePre.clear().draw()

                            let totalHTTT = 0
                            let totalTVATT = 0
                            let totalTTCTT = 0

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

                                let IDBONLIVRAISON = value.IDBONLIVRAISON
                                let action = `<div class="d-flex align-items-center">
                                    <input class="form-check-input me-2 tableActionsizeCheckbox" type="checkbox" id="checkSelectLigneCmde" data-id ="${IDBONLIVRAISON}">
                                         &nbsp;
                                         <div class=" btn btn-sm btn-outline-info btn-view btn-icon me-1" data-id ="${IDBONLIVRAISON}" >
                                        <i class="ri-eye-line" style='font-size:14px'></i>
                                    </div>
                                    `

                                if (parseInt(viewParam) == 1) {
                                    action += `
                                    <div class=" btn btn-sm btn-outline-warning btn-edit btn-icon me-1" data-id ="${IDBONLIVRAISON}" >
                                        <i class="bx bxs-edit" style='font-size:14px'></i>
                                    </div>
                                    <div class=" btn btn-sm btn-outline-danger btn-trash btn-icon me-1" data-id ="${IDBONLIVRAISON}" >
                                        <i class='bx bxs-trash' style='font-size:14px'></i>
                                    </div>`
                                }else{
                                    action += `
                                    <div class=" btn btn-sm btn-outline-success btn-icon me-1 btn-editBl" data-id ="${IDBONLIVRAISON}" >
                                        <i class='bx bxs-edit' style='font-size:14px'></i>
                                    </div>`
                                }

                                action += `</div>`

                                tableListePre.row.add([
                                    action,
                                    value.CreeLeFormat,
                                    explodeDate(value.DateBonLivraison),
                                    etapeBl(value.EtapeBL),
                                    value.NumeroBonLivraison,
                                    value.NomBureauAchat,
                                    value.NomFournisseur,
                                    value.NumeroConteneurOuVol,
                                    value.LibelleModeExpedition,
                                    formatNumberPerf(value.TotalHTBonLivraison),
                                    formatNumberPerf(value.TotalRemiseBL),
                                    formatNumberPerf(value.TotalHTNetBL),
                                    formatNumberPerf(value.TotalTaxeBonLivraison),
                                    formatNumberPerf(value.TotalTTCBonLivraison)
                                ])
                            })

                            tableListePre.draw()

                            if (dataRecup != null && (dataRecup.versBl == "true" || dataRecup
                                .versBl == true)) {
                                $("#tableListePre_filter input").val(dataRecup.numeroBl).trigger(
                                    "input")
                            }

                            $("#nbreBL").text(formatNumberPerf(response.data.length))
                            $("#totalHTTT").text(formatNumberPerf(response.totaux.TotalHT))
                            $("#totalRemiseTT").text(formatNumberPerf(response.totaux.TotalRemise))
                            $("#totalHTNetTT").text(formatNumberPerf(response.totaux.TotalHTNet))
                            $("#totalTVATT").text(formatNumberPerf(response.totaux.TotalTaxe))
                            $("#totalTTCTT").text(formatNumberPerf(response.totaux.TotalTTC))

                            completeHandler()
                            return 0
                        }
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        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 etapeBl(EtapeBL) {
                switch (EtapeBL) {
                    case 0:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">EN PREPARATION</span>';
                        break;

                    case 1:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">EN PRE-RECEPTION</span>';
                        break;

                    case 2:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">EXPEDIEE</span>';
                        break;

                    case 3:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">EN RECEPTION</span>';
                        break;

                    case 4:
                        return '<span class="badge bg-success-transparent" style="font-size:.78rem; width:170px;">BL VALIDE</span>';
                        break;

                    case 5:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">COMPTABILISE</span>';
                        break;
                    default:
                        return '<span class="badge bg-dark-transparent" style="font-size:.78rem; width:170px;">NON DEFINIE</span>';
                        break;
                }
            }

            // ::::::::::::::::::: Debut Modal liste facture BL

            var tableListeFactureBL = $("#tableListeFactureBL").DataTable({
                bFilter: false,
                language: languageTable,
                columnDefs: [
                    // {
                    //     targets: [0, 4, 5, 6, ],
                    //     className: "text-center"
                    // },
                    // {
                    //     targets: [],
                    //     className: "text-start"
                    // },
                    // {
                    //     targets: [],
                    //     className: "text-end"
                    // },
                ],
                pageLength: 25,

            })

            $("#listeFactBL").on("click", function() {
                let listeSelect = listeLigneSelectionne()

                if (listeSelect.length < 1 || listeSelect.length > 1) {
                    alertSwal('Veuillez cocher un seul BL !')
                    return 0
                }

                listeFactureBL(listeSelect[0])
                $("#modalFactureBL").modal("show")
            })
            $("#btnListeFactModal").on("click", function() {
                listeFactureBL($("#IDBL").val())
                $("#modalFactureBL").modal("show")
            })

            $("#tableListeFactureBL").on("focus", ".inputFactureeBL", function() {
                $(this).select()
            })

            $("#tableListeFactureBL").on("change", ".inputFactureeBL", function() {

                let id = $(this).attr("id").split("-")[1]
                // // console.log(demasquerFormatInput($("#MontantPreach-"+id).val()))
                $.ajax({
                    url: `{{ route('updateFactureBl') }}`,
                    type: 'POST',
                    data: {
                        familleFactBL: $("#familleFactBL-" + id).val(),
                        MontantPreach: demasquerFormatInput($("#MontantPreach-" + id).val()),
                        MontantFraisExp: demasquerFormatInput($("#MontantFraisExp-" + id)
                            .val()),
                        MontantAssurance: demasquerFormatInput($("#MontantAssurance-" + id)
                            .val()),
                        MontantFraisTransit: demasquerFormatInput($("#MontantFraisTransit-" +
                            id)
                            .val()),
                        TotalHT: demasquerFormatInput($("#TotalHT-" + id).val()),
                        TotalTaxe: demasquerFormatInput($("#TotalTaxe-" + id).val()),
                        PieceObservation: demasquerFormatInput($("#PieceObservation-" + id)
                            .val()),
                        id: id,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            let listeSelect = listeLigneSelectionne()
                            listeFactureBL(listeSelect[0])
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.messages)
                    }
                })
            })

            /*:::::::::::::::::::::: Fonctions :::::::::::::::::::::::::::::::*/

            function listeFactureBL(param) {

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

                        if (response.error == false) {

                            tableListeFactureBL.clear().draw()

                            $.each(response.donne, function(key, value) {
                                $option =
                                    `<option value="0" ${value.IDFAMILLEPRODUIT == 0 ? "selected":""} </option>`
                                $.each(response.famille, function(key, values) {
                                    $option +=
                                        `<option value="${values.IDFAMILLEPRODUIT}" ${value.IDFAMILLEPRODUIT == values.IDFAMILLEPRODUIT ? "selected":""}>${values.LibelleFamilleProduit}</option>`
                                })

                                tableListeFactureBL.row.add([
                                    value.NumeroFactureFseur,
                                    `<select class="form-select input-edit inputFactureeBL" id="familleFactBL-${value.IDFACTUREFSEUR}">
                                        ${$option}
                                    </select>`,
                                    `<input type="text" name="" id="MontantPreach-${value.IDFACTUREFSEUR}" class="form-control inputFactureeBL input-edit" value="${formatNumber(value.MontantPreach)}">`,
                                    `<input type="text" name="" id="MontantFraisExp-${value.IDFACTUREFSEUR}" class="form-control inputFactureeBL input-edit" value="${formatNumber(value.MontantFraisExp)}">`,
                                    `<input type="text" name="" id="MontantAssurance-${value.IDFACTUREFSEUR}" class="form-control inputFactureeBL input-edit" value="${formatNumber(value.MontantAssurance)}">`,
                                    `<input type="text" name="" id="MontantFraisTransit-${value.IDFACTUREFSEUR}" class="form-control inputFactureeBL input-edit" value="${formatNumber(value.MontantFraisTransit)}">`,
                                    `<input type="text" name="" id="TotalHT-${value.IDFACTUREFSEUR}" class="form-control inputFactureeBL input-edit" value="${formatNumber(value.TotalHT)}">`,
                                    `<input type="text" name="" id="TotalTaxe-${value.IDFACTUREFSEUR}" class="form-control inputFactureeBL input-edit" value="${formatNumber(value.TotalTaxe)}">`,
                                    formatNumber(value.TotalTTC),
                                    `<input type="text" name="" id="PieceObservation-${value.IDFACTUREFSEUR}" class="form-control inputFactureeBL input-edit" value="${value.PieceObservation}">`,
                                ])
                            })
                            if (response.donne.length > 0) {
                                $("#LFBLnumeroBL").text(response.donne[0].NumeroBonLivraison)
                            }

                            tableListeFactureBL.draw()

                            completeHandler()

                            return 0
                        }
                        completeHandler()
                        notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.messages)
                    }
                })
            }
        })
    </script>
@endsection