@extends('models')
@section('titre-page',"Bon à préparer")
@section('content-body')
    <!-- Start::app-content -->

    @php
        $ModeGpharma = ModeGpharma() ?? 1;
    @endphp
    <!-- 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-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Vente</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bon à préparer</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-5 col-md-4 mt-2">
                    <div class="btn-group float-end" style="margin-top : 1px;">
                        <button type="button" class="btn btn-primary-light dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                            Autres actions
                        </button>
                        <ul class="dropdown-menu">
                            @if($ModeGpharma != 2)
                            <li>
                                <div class="dropdown1">
                                    <button class="dropdown-item text-start" id="btnAffecterTerminal">Affecter à un terminal</button>
                                </div>
                            </li>
                            @endif

                            <li>
                                <div class="dropdown1">
                                    <button class="dropdown-item text-start" id="btn-export-bon-a-preparer">Exporter en excel</button>
                                </div>
                            </li>

                            <li>
                                <hr class="dropdown-divider">
                            </li>
                        </ul>
                    </div>
                    @if($ModeGpharma == 2)
                        <div class="btn-group float-end" style="margin-top : 1px;">
                            <button type="button" class="btn btn-warning-light dropdown-toggle me-2" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                                <span class='bx bxs-printer me-1 fs-14'></span>Imprimer
                            </button>
                            <ul class="dropdown-menu">
                                <li style="display : {{ $ModeGpharma == 2 ? 'none' : '' }}">
                                    <div class="dropdown1 w-100">
                                        <button class="dropdown-item w-100" id="btnImprimerBonPrepa">
                                            Imprimer le bon de préparation
                                        </button>
                                    </div>
                                </li>
                                <li>
                                    <div class="dropdown1 w-100">
                                        <button class="dropdown-item w-100" id="btnImprimerBonPrepaSimple">
                                            Imprimer le bon de préparation simple
                                        </button>
                                    </div>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li style="{{ $ModeGpharma != 2 ? 'display: none;' : '' }}">
                                    <div class="dropdown1 w-100">
                                        <button class="dropdown-item w-100" id="btnImprimerDevisDuBon">
                                            Imprimer le bon de paiement
                                        </button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    @if($ModeGpharma != 2)
        <div class="row">
            <div class="d-flex col-xl-7 col-lg-6">
                <div class="card flex-fill border border-danger custom-card rounded-0">
                    <div class="card-header rounded-0 d-flex justify-content-center py-1" style="background:  #F22A1E !important;">
                        <span class="text-light text-center fs-16 fw-bold">Traitement de commande</span>
                    </div>
                    <div class="card-body pt-1 pb-0">
                        <form id="formTraitement">
                            <div class="row">
                                <div class="col-xl-8">
                                    <div class="row">
                                        <div class="col-xl-6 mb-2">
                                            <p class="mb-0 text-muted">Type&nbsp;:</p>
                                            <select class="form-select" id="TypeCommandeClient" name="TypeCommandeClient">
                                                <option value="1">NORMALE</option>
                                                <option value="2">URGENTE</option>
                                                <option value="3">GARDE</option>
                                                <option value="4">MISE EN PLACE</option>
                                                <option value="5">RENFORCEMENT</option>
                                                <option value="6">CALL OUT</option>
                                                <option value="0">TOUS</option>
                                            </select>
                                        </div>
                                        <div class="col-xl-6 mb-2">
                                            <p class="mb-0 text-muted">Mode&nbsp;:</p>
                                            <select class="form-select" id="ModeCommande" name="ModeCommande">
                                                <option value="1">TELEPHONE</option>
                                                <option value="2">EXTRANET</option>
                                                <option value="3">PHARMA-ML</option>
                                                <option value="4">TEDIS-DIRECT</option>
                                                <option value="0">TOUS</option>
                                            </select>
                                        </div>
                                        <div class="col-xl-6">
                                            <p class="mb-0 text-muted">Tournée&nbsp;:</p>
                                            <select name="IDTOURNEE" id="IDTOURNEE">

                                            </select>
                                        </div>
                                        <div class="col-xl-6">
                                            <p class="mb-0 text-muted">Zone de Stockage&nbsp;:</p>
                                            <select class="js-example-basic-single fs-select2" name="IDZONESTOCKAGE" id="filtreIDZONESTOCKAGE">

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 pt-xl-3  mt-xl-0 mt-lg-3">
                                    <div class="d-flex mb-1">
                                        <input type="checkbox" class="form-check-input me-1" id="checkClientGarde" name="checkClientGarde">
                                        <p class="text-muted" for="" style="cursor : pointer;">Uniquement les clients de garde</p>
                                    </div>
                                    <div class="d-flex mb-1">
                                        <input type="checkbox" class="form-check-input me-1" id="checkNonCollecte" name="checkNonCollecte">
                                        <p class="text-muted ellipsis"  title="Uniquement les bons de préparation non collecté" for="" style="cursor : pointer;">Uniquement les bons de préparation non collecté</p>
                                    </div>
                                    <div class="d-flex">
                                        <input type="checkbox" class="form-check-input me-1" id="checkCMU" name="checkCMU">
                                        <p class="text-muted" for="" style="cursor : pointer;">Uniquement les {{ ($ModeGpharma == 3) ? 'TPOM' : 'C.M.U' }}</p>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <hr>
                        <div class="d-flex justify-content-around">
                            <div class="d-flex">
                                <span class='bx bx-refresh text-primary me-1 fs-18' style="cursor:pointer" id="actualiserInterface"></span><p id="labelActualiserInterface" style="cursor:pointer" class="text-muted">Actualiser l'interface</p>
                            </div>
                            <div class="d-flex">
                                <span class='bx bx-share-alt text-warning me-1 fs-18' id="preparerCdeSelect"></span><a href="{{route('pageBonPreparationSansFacture')}}" target="_blank" style="cursor:pointer" id="labelPreparerCdeSelect" class="text-muted">Bon de préparation validé sans facture</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex col-xl-5">
                <div class="card flex-fill border border-dark custom-card rounded-0">
                    <div class="card-body pb-0">
                        <div class="d-flex justify-content-around mb-0 mt-xl-4">
                            <div class="d-flex">
                                <span style="cursor:pointer" class='bx bxs-hourglass-top text-muted me-1 fs-18'></span><p style="cursor:pointer" class="text-muted">Bac en attente</p>
                            </div>
                            <div class="d-flex">
                                <span style="cursor:pointer" class='bx bx-mobile-alt text-danger me-1 fs-18' id="btnTerminal"></span><p style="cursor:pointer" class="text-muted" id="btnTerminal2">Liste des terminaux</p>
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-around mb-0 mt-xl-4">
                            <div class="d-flex">
                                <span style="cursor:pointer" class='bx bxs-shopping-bag-alt text-orange me-1 fs-18'></span><p style="cursor:pointer" class="text-muted" id="btnModalControlePoids">Contrôle de poids</p>
                            </div>
                            <div class="d-flex">
                                <div class="btn-group float-end" style="margin-top : 1px;">
                                    <div class="d-flex dropdown-toggle" style="cursor:pointer" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                                        <span class='bx bxs-printer text-dark me-1 fs-18'></span>
                                        <p style="cursor:pointer" class="text-muted">Imprimer</p>
                                    </div>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <div class="dropdown1 w-100">
                                                <button class="dropdown-item w-100" id="btnImprimerBonPrepa">
                                                    Imprimer le bon de préparation
                                                </button>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="dropdown1 w-100">
                                                <button class="dropdown-item w-100" id="btnImprimerBonPrepaSimple">
                                                    Imprimer le bon de préparation simple
                                                </button>
                                            </div>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li style="{{ $ModeGpharma != 2 ? 'display: none;' : '' }}">
                                            <div class="dropdown1 w-100">
                                                <button class="dropdown-item w-100" id="btnImprimerDevisDuBon">
                                                    Imprimer le bon de paiement
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-around">
                            <!-- <div class="d-flex">
                                <span style="cursor:pointer" class='bx bx-check-double text-success me-1 fs-22'></span><p style="cursor:pointer" class="text-muted">Valider</p>
                            </div> -->
                            <!-- <div class="d-flex">
                                <span style="cursor:pointer" class='bx bx-refresh text-info me-1 fs-18'></span><p style="cursor:pointer" class="text-muted" id="filtrerParID">Actualiser</p>
                            </div> -->
                            <div class="d-flex">
                                <span style="cursor:pointer" class='bx bxs-package text-info me-1 fs-18'></span><p style="cursor:pointer" class="text-muted" id="filtrerParID">Autoriser colis</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <!-- End:: row-7 -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                @if($ModeGpharma == 2)
                <div class="card-header pe-0">
                    <form id="formTraitement" class="w-100">
                        <div class="row">
                            <div class="col-xl-3 mb-2">
                                <p class="mb-0 text-muted">Type&nbsp;:</p>
                                <select class="form-select" id="TypeCommandeClient" name="TypeCommandeClient">
                                    <option value="1">NORMALE</option>
                                    <option value="2">URGENTE</option>
                                    <option value="3">GARDE</option>
                                    <option value="4">MISE EN PLACE</option>
                                    <option value="5">RENFORCEMENT</option>
                                    <option value="6">CALL OUT</option>
                                    <option value="0">TOUS</option>
                                </select>
                            </div>
                            <div class="col-xl-3">
                                <p class="mb-0 text-muted">Zone de Stockage&nbsp;:</p>
                                <select class="js-example-basic-single fs-select2" name="IDZONESTOCKAGE" id="filtreIDZONESTOCKAGE">

                                </select>
                            </div>
                            <div class="col-xl-1">
                                <button class="btn btn-primary btn-wave mt-2" id="actualiserInterface" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Filtrer">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                @endif
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto w-100 tablehover" id="tableBonAPreparer">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th data-column="dateCommande" data-class="text-center" class="text-center colTable">Date</th>
                                    <th data-column="NumeroCommandeClientFormat" data-class="text-center" class="text-center colTable">N° Commande</th>
                                    <th data-column="NomClient" class="text-center colTable">Client</th>
                                    <th data-column="NumeroBonPreparation" data-class="text-center" class="text-center colTable">N° Bon de préparation</th>
                                    <th data-column="badgeEtape" data-class="text-center" class="text-center colTable">Etape</th>
                                    <th data-column="libelleType" data-class="text-center" class="text-center colTable">Type</th>
                                    <th data-column="NomZoneStockage" class="text-center colTable">Zone de Stockage</th>
                                    <th data-column="LeNombreDeLigne" data-class="text-center" class="text-center colTable">Nb ligne</th>
                                    <th data-column="MontantLigneFormat" data-class="text-end" class="text-center colTable">Montant</th>
                                    <th data-column="NomLecteur" class="text-center colTable">Terminal mobile</th>
                                    <th data-column="DateCreationBonFormat" data-class="text-center" class="text-center colTable">Date création bon</th>
                                    <th data-column="LibelleTournee" class="text-center colTable">LibelleTournee</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <div class="modal fade" id="modalInfoBonPrepa" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoBonPrepa"> Infos du bons</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mt-0 table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="tableLigneBonPrepa">
                            <thead  class="table-header-primary">
                                <tr>
                                    <th class="text-center">Désignation</th>
                                    <th class="text-center">Cartonnage</th>
                                    <th class="text-center">Qté UG</th>
                                    <th class="text-center">Carton à collecter</th>
                                    <th class="text-center">Qté à collecter</th>
                                    <th class="text-center">C</th>
                                    <th class="text-center">Carton collecté</th>
                                    <th class="text-center" >Qté collectée</th>
                                    <th class="text-center">Ecart</th>
                                    <th class="text-center">Mobile assigné</th>
                                    <th class="text-center">Mobile collecteur</th>
                                    <th class="text-center">Code</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalAffecterTerminal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Affecter au terminal</h5>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <select class="js-example-basic-single fs-select2" name="IDTerminalMobileDedie" id="IDTerminalMobileDedie">

                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="bntAffecterTermin">
                        <i class='bx bxs-check-circle'></i>
                        Valider
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- @if($ModeGpharma != 2)
    @include('pages/parametrages/modalTerminal')
    @endif --}}

    <div class="modal fade" id="modalControlePoids" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false" aria-hidden="true" data-bs-focus="false">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Contrôle de Poids</h6>

                    <div class=" ms-3">
                        <select name="IDPARAMETRE_BALANCE" id="IDPARAMETRE_BALANCE" class="form-select w-100">
                            <option value=""></option>
                            @foreach ( $PARAMETRE_BALANCE as $item)
                                <option value="{{ $item->IDPARAMETRE_BALANCE }}" @selected($item->IDPERSONNEL == session("IDPERSONNEL"))>{{ $item->NumeroSerieBalance }}</option>
                            @endforeach
                        </select>

                    </div>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="card">
                                <div class="card-body row">
                                    <div class="mb-2 col-md-6">
                                        <p class="mb-0 text-muted">N° Bon de préparation :</p>
                                        <input type="text" class="form-control" id="IDBONPREPARATION" name="IDBONPREPARATION">
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-0 text-muted">Type du bac :</p>
                                        <select name="IDTYPEBAC" id="IDTYPEBAC" class="form-select"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="card">
                                <div class="card-body row py-3">
                                    <div class="col-md-6 mb-3">
                                        N° de bac :
                                        <label class="fw-bold ms-2" id="NumeroBAC"></label>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        N° de Commande :
                                        <label class="fw-bold ms-2" id="NumeroCommandeClient"></label>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        Date commande :
                                        <label class="fw-bold ms-2" id="DateCommandeClient"></label>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        Nom du client :
                                        <label class="fw-bold ms-2" id="NomClient"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-2">
                            <div class="card custom-card border-top-card border-top-light rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Poids théorique</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            {{-- <h6 class="mb-0 fw-semibold" id="">0</h6> --}}
                                            <input type="text"  class="mb-0 fw-semibold border-0 w-100 text-center h6" name="" id="poidsTheo" value="0" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2">
                            <div class="card custom-card border-top-card border-top-info rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Poids physique (balance)</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            {{-- <h6 class="mb-0 fw-semibold" id="poidsPhysique">0</h6> --}}
                                            <input type="text"  class="mb-0 fw-semibold border-0 w-100 text-center h6" name="" id="poidsPhysique" value="0" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2">
                            <div class="card custom-card border-top-card border-top-warning rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Tare</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            {{-- <h6 class="mb-0 fw-semibold" id="">0</h6> --}}
                                            <input type="text"  class="mb-0 fw-semibold border-0 w-100 text-center h6" name="" id="PoidsBAC" value="0" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2">
                            <div class="card custom-card border-top-card border-top-danger rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Poids Net</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            {{-- <h6 class="mb-0 fw-semibold" id="">0</h6> --}}
                                            <input type="text"  class="mb-0 fw-semibold border-0 w-100 text-center h6" name="" id="poidsNet" value="0" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2">
                            <div class="card custom-card border-top-card border-top-primary rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Ecart toléré (-/+)</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            {{-- <h6 class="mb-0 fw-semibold" id="ecartTolere">0</h6> --}}
                                            <input type="text"  class="mb-0 fw-semibold border-0 w-100 text-center h6" name="" id="ecartTolere" value="{{ session("EcartTolerancePoidsGramme")}}" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2">
                            <div class="card custom-card border-top-card border-top-success rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Ecart</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            {{-- <h6 class="mb-0 fw-semibold" id="">0</h6> --}}
                                            <input type="text" class="mb-0 fw-semibold border-0 w-100 text-center h6" name="" id="ecart" value="0" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <div class="card pt-0 me-3" style="height:35px;">
                            <div class="card-body d-flex pt-2"> 
                                <input type="checkbox" class="form-check-input me-1 checkbox" type="checkbox"
                                    name="mettreBonAttente" id="mettreBonAttente" />
                                <label for="mettreBonAttente"><p class="form-check-label"  style="cursor:pointer;"
                                    title="Bénéficie escompte">  Mettre en attente</p></label>
                            </div>
                        </div>
                        <button class="btn btn-success" style="height:35px;" id="btnValiderControlePoids">
                            <i class='bx bxs-check-circle'></i>
                            Valider
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto w-100 tablehover" id="tableControlePoids">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        
                                    </th>
                                    <th data-orderable="false" class="text-center colTable">Code</th>
                                    <th data-orderable="false" class="text-center colTable">Désignations</th>
                                    <th data-orderable="false" class="text-center colTable">Qté collectée</th>
                                    <th data-orderable="false" class="text-center colTable">NTSP</th>
                                    <th data-orderable="false" class="text-center colTable">N° lot</th>
                                    <th data-orderable="false" class="text-center colTable">Date de péremption</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- modal des encaissements -->
    <div class="modal fade" id="modalDetailEncaissementAvantSupp" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="card flex-fill custom-card modal-content pb-0">
                <div class="modal-header mb-2">
                    <h6 class="modal-title" id="titleModalInfoCdeClient">Détail encaissement du bon</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="d-flex justify-content-center ">
                    <b class="text-danger align-self-center">Les encaissements liés à ce bon seront supprimés !</b>
                </div>
                <input type="number" id="IDBONPREPARATION_SupAvecEncaissement" style="display:none;">
                <div class="card-body pt-2 pb-2">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto w-100" id="tableDetailEncaissement">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="LibelleModePaiement" class="text-center">Mode</th>
                                    <th data-column="SymboleMonnaie" class="text-center" data-class="text-center">Devise</th>
                                    <th data-column="montantDeviseFormat" class="text-center" data-class="text-end pe-2">Montant devise</th>
                                    <th data-column="MontantRegleSurReleveFormat" class="text-center" data-class="text-end pe-2">Montant réglé</th>
                                    <th data-column="compteReglementClientNonRendu" class="text-center" data-width = "102"></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" id="btnSupprimerBonPrepaAvecEncaissement">
                        <i class="bx bx-trash me-2"></i>Supprimer le bon
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

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

        let ModeGpharma = '{{ $ModeGpharma }}'

        function chargerSelectMagasin() {

            $.ajax({

                url: '{{ route("listeZoneStockage") }}',
                type: 'GET',
                data : {
                    IDAGENCE: _('idSiteEnCours').value
                },
                dataType: 'json',
                success: function(response) {

                    $('#IDZONESTOCKAGE').html('')
                    $('#IDZONESTOCKAGE').append('<option value="0"> </option>')
                    $.each(response.data, function(key, value) {
                        
                        $('#IDZONESTOCKAGE').append('<option value="' + value['IDZONESTOCKAGE'] +
                            '">' + value['NomZoneStockage'] + '</option>')
                    })
                }
            })
        }

        $('#IDTOURNEE').select2()

        if (_('TypeCommandeClient')) {
            
            _('TypeCommandeClient').value = 0
        }

        if (_('ModeCommande')) {
            
            _('ModeCommande').value = 0
        }

        function listeLigneSelectionne(){

            let data = []

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

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

                if(value.checked == true){

                    data.push(value.getAttribute('data-id'))
                }
            })

            return data
        }

        function chargerSelectTournee(){

            $.ajax({

                url : '{{ route("listingTourneeSimpleParAgence")}}',
                type : 'GET',
                data : {
                    IDAGENCE : _('idSiteEnCours').value
                },
                dataType : 'json',
                success : function(response){

                    if (response.success == 0) {

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

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

                            $('#IDTOURNEE').append('<option value="'+value['IDTOURNEE']+'">'+value['LibelleTournee']+'</option>')
                        })

                        $('#IDTOURNEE').val(0).change()
                    }
                }
            })
        }

        function chargerSelectZoneStockage(){

            $.ajax({

                url : '{{ route("listeZoneStockage")}}',
                type : 'GET',
                data : {
                    IDAGENCE : _('idSiteEnCours').value
                },
                dataType : 'json',
                success : function(response){

                    if (response.success == 0) {

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

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

                            $('#filtreIDZONESTOCKAGE').append('<option value="'+value['IDZONESTOCKAGE']+'">'+value['NomZoneStockage']+'</option>')
                        })

                        $('#filtreIDZONESTOCKAGE').val(0).change()
                        $('#filtreIDZONESTOCKAGE').select2()
                    }
                }
            })
        }

        function chargerTableBonAPreparer(formTraitement){

            $.ajax({

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

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

                        tableBonAPreparer = remplissageDataTable({
                            IdentifiantDuTableau: '#tableBonAPreparer',
                            obj: obj,
                            pageLength: 100,
                            lengthChange: true,
                        })

                        @if(in_array('DV_ModifLotCollecteCdeCli', session('LISTE_DROIT_ACCESS')))

                            divShowPer = $('#tableBonAPreparer_filter')

                            // // Division des valeur totales
                            BroDivShowPer = divShowPer.parent().prev()
                            BroDivShowPer.addClass('d-flex pt-2')
                            BroDivShowPer.prepend('<i id="suppLignesCochee" class="bx bxs-trash text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelSuppLignesCochee" class="fw-bold mt-2 me-3" style="cursor : pointer;">Supprimer les lignes cochées</span>') 
                        @endif

                        placeboutonPreferenceColonne('tableBonAPreparer','bonAPreparerShowColonne',2)
                        recuperationPreferenceColonneUtilisateur('tableBonAPreparer','bonAPreparerShowColonne')

                        completeHandler()
                    }else{

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

                    notifError(error.responseText)
                }
            })
        }

        $(document).on('click', '.bonAPreparerShowColonne', function() {
            appliquerPreferenceColonne('tableBonAPreparer','Bon-a-preparer',$(this),'bonAPreparerShowColonne')
        })

        function chargerSelectTypeBac(){

            $.ajax({

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

                    if (response.success == 0) {

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

                        $('#IDTYPEBAC').html('')
                        $('#IDTYPEBAC').append('<option value="0">Sélectionner un type de bac</option>')
                        $.each(response.data, function(key, value){

                            $('#IDTYPEBAC').append('<option value="'+value['IDTYPEBAC']+'">'+value['Libelle_TypeBac']+'</option>')
                        })

                        $('#IDTYPEBAC').val(0).change()
                    }
                }
            })
        }

        chargerSelectTournee()
        chargerSelectZoneStockage()

        window.addEventListener('load', function() {

            if (_('formTraitement')) {
                
                formTraitement = new FormData(_('formTraitement') ?? [])
            }
            formTraitement = new FormData()
            formTraitement.append('IDAGENCE', _('idSiteEnCours').value)
            formTraitement.append('_token', '{{ csrf_token() }}')

            chargerTableBonAPreparer(formTraitement)
        })

    </script>

    <!-- Script d'ouverture de la liste des terminaux -->
    <script>
        if (_('btnTerminal2')) {
            
            _('btnTerminal2').addEventListener('click', function(){
    
                _('btnTerminal').click()
            })
        }
    </script>

    <!-- Script de sélection des lignes -->
    <script>

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

            let value = this.checked

            let lignes = tableBonAPreparer.rows({ 'search': 'applied' }).nodes()

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

        })

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

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

    <!-- Script actualiser l'interface -->
    <script>

        _('formTraitement').addEventListener('submit', (e) => e.preventDefault())

        if (_('actualiserInterface')) {
            _('actualiserInterface').addEventListener('click', function(){

                let formTraitement = new FormData(_('formTraitement'))
                formTraitement.append('IDAGENCE', _('idSiteEnCours').value)
                formTraitement.append('_token', '{{ csrf_token() }}')

                chargerTableBonAPreparer(formTraitement)
            })
        }
        
        if (_('labelActualiserInterface')) {
            
            _('labelActualiserInterface').addEventListener('click', function(){
    
                _('actualiserInterface').click()
            })
        }
        if (_('IDPARAMETRE_BALANCE')) {
            
            _('IDPARAMETRE_BALANCE').addEventListener('change', function(){
    
                if($(this).val() == '') return false

                confirmAction(() => {
                        $.ajax({
                            type: "get",
                            url: "{{route("changeUserBalance")}}",
                            data: {"data" : $(this).val()},
                            dataType: "json",
                            success: function (response) {
                                if(response.error == false){

                                    notifSuccess(response.messages)
                                    return false
                                }
                                notifWarning(response.messages)
                            }
                        });
                    },
                    'Voulez-vous utiliser cette balance ?',
                    ''
                )

            })
        }
    </script>

    <!-- Script de modification de site -->
    <script>

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

            _('actualiserInterface').click()
        })
    </script>

    <!-- Script affecter à un terminal -->
    <script>

        var ligneSelectionne

        // Ouverture de la modal
        _('btnAffecterTerminal').addEventListener('click', function(){

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length > 0) {
                
                $.ajax({

                    url : '{{ route("listeTerminalActif")}}',
                    type : 'GET',
                    data : {
                        IDAGENCE : _('idSiteEnCours').value
                    },
                    dataType : 'json',
                    success : function(response){
                        
                        if (response.success == 1) {
                            
                            $('#IDTerminalMobileDedie').html('<option value="0">VEUILLEZ SELECTIONNER UN TERMINAL</option>')

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

                                $('#IDTerminalMobileDedie').append('<option value="'+value['IDLECTEURCODEBARRE']+'">'+value['NomLecteur']+'</option>')
                            })
                        }

                        $('#IDTerminalMobileDedie').select2({

                            dropdownParent: $("#modalAffecterTerminal")
                        })

                        $('#modalAffecterTerminal').modal('show')
                    }
                })
            }else{

                notif('danger', 'Erreur', 'Veuillez sélectionner des bons avant')
            }
        })

        // Validation
        _('bntAffecterTermin').addEventListener('click', function(){

            if(_('IDTerminalMobileDedie').value != 0){

                $.ajax({

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

                        IDTerminalMobileDedie : _('IDTerminalMobileDedie').value,
                        ligneSelectionne : ligneSelectionne,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType : 'json',
                    success : function(response){

                        if (response.success == 1) {
                            
                            notif('success', 'Succès', 'Terminal affectés au(x) bon(s)')
                            _('actualiserInterface').click()
                            $('#modalAffecterTerminal').modal('hide')
                        }else{

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

                        notifError(error.responseText)
                    }
                })
            }
        })
    </script>

    <!-- Script de suppression de bon -->
    <script>

        var dataTableDetailEncaissement = []
        var tableDetailEncaissement

        function supprimerBons(data){

            $.ajax({

                url : '{{ route("suppBonPreparation")}}',
                type : 'POST',
                data : {
                    lignesDeBons : data,
                    _token : '{{ csrf_token() }}'
                },
                beforeSend : progressHandler,
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        notif('danger', 'Erreur', 'Aucun bon supprimé')
                    }else if(response.success == 2){

                        notif('success', 'Success', 'Suppression éffectuée avec succès '+response.rapport)
                        $('#modalDetailEncaissementAvantSupp').modal('hide')
                        _('actualiserInterface').click()
                    }else{

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

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

        function confirmSuprimeBon(data = []){

            let title = (data.length == 1) ? 'Voulez-vous supprimer la ligne cochée ?' : 'Voulez-vous supprimer les lignes cochées ?' 

            Swal.fire({

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

            }).then((result) => {

                if (result.isConfirmed) {

                    supprimerBons(data)
                }
            })
        }

        //  Supprimer plusieurs lignes
        $(document).on('click', '#suppLignesCochee', function() {

            let data = listeLigneSelectionne()

            if (data.length == 0) {

                notif('danger', 'Succès', 'Veuillez sélectionner au moins une ligne pour éffectuer une suppression')
            } else {

                if (ModeGpharma != 2) {

                    confirmSuprimeBon(data)
                }else{

                    if (data.length > 1) {

                        notifDanger('Merci de sélectionner une seule ligne à supprimer.')
                        return 0
                    }
                    confirmSuprimeBon([data[0]])
                }
            }
        })

        $('#modalDetailEncaissementAvantSupp').on('shown.bs.modal', function() {

            tableDetailEncaissement = remplissageDataTable({
                IdentifiantDuTableau: '#tableDetailEncaissement',
                obj: dataTableDetailEncaissement,
                scrollY: '350px',
                bFilter : false,
                info : false,
            });
        })

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

            let data = [_('IDBONPREPARATION_SupAvecEncaissement').value]
            confirmSuprimeBon(data)
        })

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

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

    </script>

    <!-- Script info du bon -->
    <script>

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

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

            $.ajax({

                url : '{{ route("infoBonPrepa")}}',
                type : 'GET',
                data : {
                    IDBONPREPARATION : IDBONPREPARATION,
                    ligne : true
                },
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        obj = response.data

                        $("#tableLigneBonPrepa").DataTable().destroy()
                        tableLigneBonPrepa = $("#tableLigneBonPrepa").DataTable({

                            bFilter: true,
                            language: {
                                // dom: 'Bfrtip',
                                processing: true,
                                lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                                info: "Ligne _START_ à _END_ sur _TOTAL_",
                                infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                                infoPostFix: "",
                                loadingRecords: "Chargement en cours ...",
                                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                                emptyTable: tableVide,

                                paginate: {
                                    first: "",
                                    previous: "Pr&eacute;c&eacute;dent",
                                    next: "Suivant",
                                    last: ""
                                },
                                aria: {
                                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                                },
                                search: "Rechercher&nbsp;:",
                            },
                            maxHeight: "80vh",
                            scrollCollapse: true,
                            paging: false,
                            lengthMenu: [10, 15, 25, 50, 75, 100, 150, 200],
                            "data": obj,
                            'columns': [

                                {
                                    data: 'DesignationProduit'
                                },
                                {
                                    data: 'CartonnageProduit',
                                    className: 'text-center'
                                },
                                {
                                    data: 'QuantiteUGaCollecter',
                                    className: 'text-center'
                                },
                                {
                                    data: 'cartonACollecter',
                                    className: 'text-center'
                                },
                                {
                                    data: 'QuantiteAPreparerFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'checkLigneControlDisabled',
                                    className: 'text-center'
                                },
                                {
                                    data: 'cartonCollecte',
                                    className: 'text-center'
                                },
                                {
                                    data: 'QuantitePrepareeFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'ecart',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NomLecteur'
                                },
                                {
                                    data: 'NomLecteur_COLLECTEUR'
                                },
                                {
                                    data: 'CodeCipProduit1'
                                }
                            ],
                            order: []
                        })


                        if(response.info.GestionParColisage == true){

                            tableLigneBonPrepa.column(4).visible(false);
                            tableLigneBonPrepa.column(7).visible(false);
                        }else{

                            tableLigneBonPrepa.column(3).visible(false);
                            tableLigneBonPrepa.column(6).visible(false);
                        }
                        
                        $('#modalInfoBonPrepa').modal('show')
                    }else{

                        notifError(response.msg)
                    }
                }
            })
        })
    </script>

    <!-- script pour l'ouverture du bon en collecte -->
    <script>

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

            let IDBONPREPARATION = $(this).attr('data-id')
            let url = '{{ url("/ventes/collecter_cde?IDBONPREPARATION=")}}'
            window.location.href = url+IDBONPREPARATION
        })
    </script>
    
    <!-- Script de contrôle poids -->
    <script>

        tableControlePoids = $("#tableControlePoids").DataTable({

                                bFilter: true,
                                language: languageTable,
                                columnDefs: [
                                    {
                                        targets: [0,3,4,5,6], // Les index des colonnes à centrer (commencent à 0)
                                        className: 'text-center' // Classe CSS pour centrer le texte
                                    }
                                    // Ajoutez d'autres objets pour chaque colonne à formater
                                ]
                            })

        chargerSelectTypeBac()

        if (_('btnModalControlePoids')) {
            
            _('btnModalControlePoids').addEventListener('click', function(){
    
                _('NumeroBAC').innerHTML = ''
                _('NumeroCommandeClient').innerHTML = ''
                _('DateCommandeClient').innerHTML = ''
                _('NomClient').innerHTML = ''
                $('#poidsTheo').val('0')
                $('#PoidsBAC').val('0')
                _('IDTYPEBAC').value = 0
    
                tableControlePoids.clear().draw()
    
                $('#modalControlePoids').modal('show')
            })
        }

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

            if (e.keyCode == 13) {
                
                $.ajax({

                    url : '{{ route("getInfoControlePoids")}}',
                    type : 'GET',
                    data : {
                        IDBONPREPARATION : _('IDBONPREPARATION').value,
                        IDAGENCE : _('idSiteEnCours').value
                    },
                    beforeSend : progressHandler(),
                    dataType : 'json',
                    success : function(response){
                        
                        if (response.success == 1) {
                            
                            notif('danger', 'Erreur', 'Ce bon de préparation n\'existe pas')
                        }else if(response.success == 2){

                            notif('danger', 'Erreur', 'Ce bon de préparation est déjà facturé')
                        }else if(response.success == 3){

                            notif('danger', 'Erreur', 'Ce bon de préparation n\'appartient pas au site en cours')
                        }else{

                            _('NumeroBAC').innerHTML = response.info.NumeroBAC
                            $('#IDTYPEBAC').val(response.info.IDTYPEBAC ?? 0).change()
                            _('NumeroCommandeClient').innerHTML = response.info.NumeroCommandeClient
                            _('DateCommandeClient').innerHTML = response.info.DateCommandeClient
                            _('NomClient').innerHTML = response.info.NomClient
                            $('#poidsTheo').val(formatNumberPerf(response.info.PoidsTotal) ?? 0).change()
                            $('#PoidsBAC').val(formatNumberPerf(response.info.PoidsBAC) ?? 0).change()

                            tableControlePoids.clear().draw()

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

                                tableControlePoids.row.add([value.emballe, value.CodeCipProduit1, value.DesignationProduit, value.QteCollectee, value.NumeroTracabilite, value.NumeroLotProduit, convertirFormatDate2(value.DatePeremption)]).draw()
                            })
                        }

                        completeHandler()
                    }
                })
            }
        })

        // Sélection de type de bac
        _('IDTYPEBAC').addEventListener('change', function(){

            let IDTYPEBAC = this.value

            if(IDTYPEBAC == 0){

                _('PoidsBAC').value = 0
                return 0

            }

            $.ajax({

                url : '{{ route("infoTypeBac")}}',
                type : 'GET',
                data : {

                    IDTYPEBAC : _('IDTYPEBAC').value
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        $('#PoidsBAC').val(formatNumberPerf(response.info.PoidsBac_TypeBac ?? 0)).change()
                    }else{

                        notifError(response.msg)
                    }

                    completeHandler()
                }
            })
        }) 

        function actualiseDataPoids() { 
            let poidsTheo = chaineEnNumerique($("#poidsTheo").val())
            let poidsPhysique = chaineEnNumerique($("#poidsPhysique").val())
            let PoidsBAC = chaineEnNumerique($("#PoidsBAC").val())
            let poidsNet = chaineEnNumerique($("#poidsNet").val())
            let ecartTolere = chaineEnNumerique($("#ecartTolere").val())
            let ecart = chaineEnNumerique($("#ecart").val())

            poidsNet = poidsPhysique - PoidsBAC
            ecart = poidsNet - poidsTheo

            $("#ecart").val(formatNumberPerf(ecart))
            $("#poidsNet").val(formatNumberPerf(poidsNet))

            if($("#IDBONPREPARATION").val() != "" && poidsPhysique != 0 & $("#IDTYPEBAC").val() != "0"){
                $.ajax({
                    type: "POST",
                    url: "{{ route("actualiserDonneeBonPrepaPeser") }}",
                    data: {
                        "IDBONPREPARATION" : $("#IDBONPREPARATION").val(),
                        "SAI_PoisPhysiqueBalance" : poidsPhysique,
                        "SAI_PoisPhysiqueNet" : $("#poidsNet").val(),
                        "SAI_PoidsTare" : PoidsBAC,
                        "SAI_EcartTolere" : ecartTolere,
                        "SAI_PoidsEcart" : ecart,
                        '_token' : "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function (response) {
                        if(response.error == false){
                            notifSuccess(response.messages)

                            if(response.facrureCree == true){
                                renitialiseModal()
                                return false
                            }

                            if(response.PoidsNonConforme == true){
                                $("#ecart").addClass("text-danger")
                            }else{
                                $("#ecart").addClass("text-success")
                            }
                            return false
                        }
                        notifWarning(response.messages)
                    },
                    error : function (response) { 
                        /* Une fenêtre plutôt qu'un bandeau : un refus de facturation peut
                           nommer plusieurs articles, et l'opérateur doit tous les relever. */
                        afficherRefusMetier(response.responseJSON?.messages, 'Opération refusée')
                    }
                });
            }

        }

        $(document).on("change",'#poidsTheo, #poidsPhysique, #PoidsBAC, #poidsNet, #ecartTolere, #ecart', function () { 
            actualiseDataPoids()
        })

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

            confirmMdp("{{ csrf_token() }}",
                    () => {
                        $.ajax({
                            type: "post",
                            url: "{{ route("validerBonPrepaPeser") }}",
                            data: {
                                '_token' : "{{ csrf_token() }}",
                                mettreBonAttente : $('#mettreBonAttente').is(":checked"),
                                IDBONPREPARATION : $('#IDBONPREPARATION').val(),
                            },
                            dataType: "json",
                            beforeSend : progressHandler(),
                            success: function (response) {
                                if(response.error == false){
                                    renitialiseModal()
                                    completeHandler()
                                    notifSuccess(response.messages)
                                    return false
                                }
                                completeHandler()
                                notifWarning(response.messages)
                            },
                            error : function (response) {
                                completeHandler()
                                afficherRefusMetier(response.responseJSON?.messages, 'Validation refusée')
                            }
                        });
                    },
                    null,
                    "Voulez-vous valider le poids ?", {
                        sousTitre: '',
                        infoJNL: "VALIDATION DU POIDS DU BON DE PREPA.",
                        typeJNL: 3,
                        CodeDroit: "DV_TraiteComde"
                    })

            
        })

        function renitialiseModal() { 
            $("#poidsTheo").val(0)
            $("#poidsPhysique").val(0)
            $("#PoidsBAC").val(0)
            $("#poidsNet").val(0)
            $("#ecart").val(0)
            $("#IDBONPREPARATION").val("")
            $("#IDTYPEBAC").val("0")
            $("#NumeroBAC").text("")
            $("#NumeroCommandeClient").text("")
            $("#DateCommandeClient").text("")
            $("#NomClient").text("")
            $("#ecart").removeClass("text-danger text-success");
            $("#ecart").addClass("text-black");

            tableControlePoids.clear().draw()
        }
    </script>

    <!-- Script d'impression des bons de preparation -->
    <script>

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

            let listeLigneAImprimer = listeLigneSelectionne()

            if (listeLigneAImprimer.length <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les bons à imprimer.')
                return 0
            }

            Swal.fire({

                title : 'Attention !',
                text: 'Êtes-vous sûrs De vouloir imprimer ce(s) bon(s) ?',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-success ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    listeLigneAImprimer.forEach(function(IDBONPREPARATION){

                        pdfBonPreparation(IDBONPREPARATION)
                    })
                }
            })
        })

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

            let listeIDBONPREPARATION = listeLigneSelectionne()

            if (listeIDBONPREPARATION.length <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les bons à imprimer.')
                return 0
            }

            Swal.fire({

                title : 'Attention !',
                text: 'Êtes-vous sûrs De vouloir imprimer ce(s) bon(s) ?',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-success ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    pdfBonPreparationSimple(listeIDBONPREPARATION)
                }
            })
        })
        

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

            let listeLigneAImprimer = listeLigneSelectionne()

            if (listeLigneAImprimer.length <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les bons à imprimer.')
                return 0
            }

            Swal.fire({

                title : 'Attention !',
                text: 'Êtes-vous sûrs De vouloir imprimer ce(s) bon(s) ?',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-success ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    imprimerDevisBonPrepa({listeIDBONPREPARATION: listeLigneAImprimer})
                }
            })

        })

        $(document).on('click','#btn-export-bon-a-preparer',function(){

            var data =  remplissage_avec_data_columns_DataTable('tableBonAPreparer')
            const filename =file_name("BON_A_PREPARER");
            const tabs_format = { I: '#,##0'};
            download_excel_file('{{route("export_global_excel.export")}}', data, filename,[],tabs_format)
        })

        
   
    </script>


@endsection