@extends('models')
@section('titre-page',"Commandes reappro")
@section('content-body')
    <!-- 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-6 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Ventes</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Commandes reappro</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-6">
                    <div class="d-flex justify-content-end">
                        <div class="col-xl-4 mt-md-0 mt-3 m-0  ">
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex"
                                id="btnMettreEnPreparation">
                                <i class="ri-export-line me-1"></i>Mettre en préparation
                            </button>
                        </div>
                        <div class="col-xl-5 mt-md-0 mt-3 m-0  me-1 ">
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex"
                                id="btnExport">
                                <i class="ri-export-line me-1"></i>Exporter les cmdes
                                                cochées
                            </button>
                        </div>
                        <div class="col-xl-3 mt-md-0 mt-3 m-0">
                            <button type="button" class="btn btn-warning-light d-flex w-100 justify-content-center"
                                id="bntModalNewClient" style="font-size:15px">
                                <i class="ri-printer-line me-2"></i>Imprimer
                            </button>
                        </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-3 col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                    <i class="bx bx-dice-3" style="font-size: 24px"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-primary fw-semibold" id="nbreCdeClient"></p>
                                <span class="text-muted fs-12">Nbre Cde</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-light text-default">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>

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

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

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header pe-0 pe-0">
                    <form id="formFiltre" class="w-100">
                        <div class="row w-100">
                            <div class="col-xl-3 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Site&nbsp;:</p>
                                <select name="IDAGENCE" id="IDAGENCE" class="form-select" name="IDAGENCE" @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                </select>
                            </div>
                            <div class="col-xl-3 col-md-3 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-md-3 mb-0">
                                <p class="mb-0 text-muted">Client&nbsp;:</p>
                                <select class="js-example-basic-single form-select" id="IDCLIENT" name="IDCLIENT">

                                </select>
                            </div>
                            <div class="col-xl-2 col-md-2 mb-2">
                                <p class="mb-0 text-muted">Etape de traitement&nbsp;:</p>
                                <select class="form-select" id="etapeTraitement" name="etapeTraitement">
                                    <option value="1">EN SAISIE</option>
                                    <option value="2">NON COLLECTEE</option>
                                    <option value="3">EN COLLECTE</option>
                                    <option value="4">FACTUREE</option>
                                    <option value="5">EXPEDIEE</option>
                                    <option value="6">LIVREE</option>
                                    <option value="7">DEJA LIVREE</option>
                                    <option value="0">TOUTES</option>
                                </select>
                            </div>
                            <div class="col-xl-1 col-md-1 mb-0 pt-1">
                                <button type="button" class="btn btn-primary btn-wave mt-2  float-end"
                                    id="btnFiltreTable">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>
                            <div class="accordion accordion-flush mt-2" id="accordionFlushExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingOne">
                                        <button class="accordion-button collapsed pb-2" type="button"
                                            style="background: #FFD7DA;font-size : .78rem;" data-bs-toggle="collapse"
                                            data-bs-target="#flush-collapseOne" aria-expanded="false"
                                            aria-controls="flush-collapseOne">
                                            Autres options de filtre
                                        </button>
                                    </h2>
                                    <div id="flush-collapseOne" class="accordion-collapse collapse"
                                        aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body bg-tabs">

                                            <div class="row">

                                                <div class="col-xl-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Type&nbsp;:</p>
                                                    <select class="form-select" id="type" name="type">
                                                        <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 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Produit&nbsp;:</p>
                                                    <select class="js-example-basic-single form-select" id="IDPRODUIT"
                                                        name="IDPRODUIT">

                                                    </select>
                                                </div>

                                                <div class="col-xl-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Mode&nbsp;:</p>
                                                    <select class="form-select" id="mode" name="mode">
                                                        <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-3 col-md-3 mb-2 pt-2">
                                                    <div class="card pt-0 mt-2" style="height:35px;">
                                                        <div class="card-body d-flex pt-2 ps-2">
                                                            <input type="checkbox" class="form-check-input me-2"
                                                                type="checkbox" name="uniquementCmu"
                                                                id="uniquementCmu" />
                                                            <p class="form-check-label" for="uniquementCmu"
                                                                style="cursor:pointer;">Uniquement les commandes C.M.U</p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-xl-2 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Progression&nbsp;:</p>
                                                    <select class="form-select" id="progression" name="progression">
                                                        <option value="0">TOUS</option>
                                                        <option value="1">></option>
                                                        <option value="2">>=</option>
                                                        <option value="3"><</option>
                                                        <option value="4"><=</option>
                                                        <option value="5">=</option>
                                                        <option value="6"><></option>
                                                    </select>
                                                </div>
                                                 <div class="col-xl-1 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Taux&nbsp;:</p>
                                                    <input type="text" class="form-control text-center" name="taux"
                                                        id="taux" value="0"/>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableCommandeClient">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        <input class="form-check-input me-1" style="margin-left:-47px" type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th class="text-center colTable">%</th>
                                    <th class="text-center colTable">Date</th>
                                    <th class="text-center colTable">Heure</th>
                                    <th class="text-center colTable">Mode</th>
                                    <th class="text-center colTable">Type commande</th>
                                    <th class="text-center colTable">N° de commande</th>
                                    <th class="text-center colTable">Client</th>
                                    <th class="text-center colTable">Etape traitement</th>
                                    <th class="text-center colTable">Total HT</th>
                                    <th class="text-center colTable">TVA</th>
                                    <th class="text-center colTable">Total TTC</th>
                                    <th class="text-center colTable">Nbre ligne</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Section modal --}}
    <div class="modal fade" id="modalInfoCommandeClient" 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="titleModalInfoCdeClient"> Infos de la commande</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 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-2 col-lg-6 col-md-6 col-sm-6 px-0 justify-content-betwen d-flex mb-xl-0 mb-md-2"
                                    style="border-right : 1px dashed grey;">
                                    <span class="bx bx-calendar fs-18"></span>&nbsp;
                                    <span id="dateCdeClient" class="fw-bold"></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>N° cde&nbsp;:&nbsp;</span>
                                    <span id="numCdeClient" 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>Client&nbsp;:&nbsp;</span>
                                    <span id="nomClient" class="fw-bold"></span>
                                </div>
                                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 d-flex mb-xl-0 mb-md-2 row">
                                    <div class="col-md-8">
                                        <span>Total TTC&nbsp;:&nbsp;</span>
                                        <span id="TotalTTCCde" class="fw-bold"></span>
                                    </div>
                                    <div class="col-md-4" id="blockBadgeEtape">
                                        <span class="" id="badgeEtape">&nbsp;</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-0 table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100 openModalProduit" id="tableLigneCdeClient">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center" data-class="text-center" data-column="CodeCipProduit1">Code CIP</th>
                                    <th class="text-center" data-class="text-start" data-column="DesignationProduit">Désignation</th>
                                    <th class="text-center" data-class="text-center" data-column="QteCommandee">Qté cdée</th>
                                    <th class="text-center" data-class="text-center" data-column="QteAffectee">Qté affectée</th>
                                    <th class="text-center" data-class="text-center" data-column="prixCessionFormat">P. cession HT</th>
                                    <th class="text-center" data-class="text-center" data-column="QteUniteGratuiteFormat">Quantité UG</th>
                                    <th class="text-center" data-class="text-end" data-column="TotalHTFormat">Total HT</th>
                                    <th class="text-center" data-class="text-center" data-column="tauxRemisePercent">Remise</th>
                                    <th class="text-center" data-class="text-center" data-column="tauxTVAPercent">TVA</th>
                                    <th class="text-center" data-class="text-end" data-column="TotalTTCFormat">Total TTC</th>
                                    <th class="text-center" data-class="text-start" data-column="LibelleFormeProduit">Forme</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Debut de modal du PDF -->
    <div class="modal fade bd-example-modal-lg" id="modalPdf" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">PDF </h3>
                    <button class="btn-close" type="button" id="fermeValidation" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="cdeClientPdf" style="font-size : 11px;">
                        <div class="row d-flex p-0">
                            <div class="col-md-7 p-0">
                                <img src="{{ returnLogoSociete() }}" style="height:150px">
                            </div>
                            <div class="col-md-5 pt-4">
                                <div>
                                    <i id="DateCommandeClient" style="font-style: italic;">30/08/2023 18:50:22</i>
                                </div>
                                <div>
                                    <span class="fw-bold fs-12 mt-2" id="NumeroCommandeClient">BON DE COMMANDE
                                        N°2302427798-VRI-E</span>
                                </div>
                                <div>
                                    <img id="codeBarIdCdeClient" />
                                </div>
                                <div class="d-flex mt-2">
                                    <span class="fw-bold fs-12">N°CLIENT : </span>
                                    <span class="fw-bold fs-12" id="CodeClient"></span>
                                </div>
                                <div class="d-flex mt-2">
                                    <span class="fw-bold fs-12">N°CLIENT&nbsp;:&nbsp;</span>
                                    <span class="fw-bold fs-12 " id="NomClient"></span>
                                </div>
                                <div class="d-flex">
                                    <span class="fw-bold fs-12" id="RepresentantLegalClient"></span>
                                </div>
                                <div class="d-flex">
                                    <span class="fs-12" id="AdressePostaleClient"></span>
                                </div>
                                <div class="d-flex">
                                    <span class="fs-12" id="NumeroCC"></span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-2">
                            <table class="tablehover table table-striped w-100">
                                <thead style="background:#CDCBCB;">
                                    <tr>
                                        <th class="text-dark text-center py-2 fw-bold" style="font-size : 10px;">N°</th>
                                        <th class="text-dark text-center py-1 fw-bold" style="font-size : 10px;">
                                            EMPLACEMENT</th>
                                        <th class="text-dark text-center py-1 fw-bold" style="font-size : 10px;">CIP</th>
                                        <th class="text-dark text-center py-1 fw-bold" style="font-size : 10px;">
                                            DESIGNATION PRODUIT</th>
                                        <th class="text-dark text-center py-1 fw-bold" style="font-size : 10px;">QTE A
                                            COLLECTER</th>
                                        <th class="text-dark text-center py-1 fw-bold" style="font-size : 10px;">QTE
                                            FACTUREE</th>
                                        <th class="text-dark text-center py-1 fw-bold" style="font-size : 10px;">UG</th>
                                    </tr>
                                </thead>
                                <tbody id="bodyPdfCdeClient">

                                </tbody>
                            </table>
                        </div>

                        <div style="display:none">
                            <table id="tableExcel">
                                <thead>
                                    <tr>
                                        <th>Code CIP</th>
                                        <th>Qté Commandée</th>
                                        <th>Désignation produit</th>
                                    </tr>
                                </thead>
                                <tbody id="bodyExcel">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Fin de modal du PDF -->

    
@endsection
@section('script')
    <!-- Script exécuté au chargement -->
    <script>
        var listeDesAgences = []

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

        function chargerSelectAgence(valeur) {

            $.ajax({

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

                    $('#IDAGENCE').html('')

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

                        $('#IDAGENCE').append('<option value="' + value["IDAGENCE"] + '">' + value[
                            "NomAgence"] + '</option>')

                        listeDesAgences.push({
                            text: value["NomAgence"],
                            value: value["IDAGENCE"]
                        })
                    })

                    // $('#IDAGENCE').val(valeur).trigger('change')
                }
            })
        }

        function chargerSelectClient(valeur) {

            $.ajax({

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

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

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

                        $('#IDCLIENT').append('<option value="' + value[" IDCLIENT"] + '">' + value[
                            "NomClient"] + '</option>')
                    })
                    $('#IDCLIENT').select2()
                    // $('#IDCLIENT').val(valeur).trigger('change')
                }
            })
        }

        function chargerSelectProduit(valeur) {
            $.ajax({
                url: '{{ route('listingProduitSimple') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#IDPRODUIT').html('')
                    $('#IDPRODUIT').append('<option value="0">TOUS LES PRODUITS</option>')

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

                        $('#IDPRODUIT').append('<option value="' + value[" IDPRODUIT"] + '">' + value[
                            "DesignationProduit"] + '</option>')
                    })
                    // $('#IDPRODUIT').val(valeur).trigger('change')
                    $('#IDPRODUIT').select2()
                }
            })
        }

        function chargerSelectTournee(valeur, IDAGENCE) {
            $.ajax({
                url: '{{ route('listingTourneeSimpleParAgence') }}',
                type: 'GET',
                data: {
                    IDAGENCE: IDAGENCE
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success == 2) {
                        $('#IDTOURNEE').html('')
                        $('#IDTOURNEE').append('<option value="0">TOUTES LES TOURNEES</option>')

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

                            $('#IDTOURNEE').append('<option value="' + value[" IDTOURNEE"] + '">' +
                                value["LibelleTournee"] + '</option>')
                        })
                        $('#IDTOURNEE').val(valeur).trigger('change')
                        $('#IDTOURNEE').select2()
                    } else {
                        notifError(response.msg)
                    }
                },
                error: function(error) {
                    notifError(error)
                }
            })
        }

        function chargerTableCdeClient() {
            let Periode = convertirFormatDate2(_('filtrePeriode').value)

            $.ajax({
                url: '{{ route('listingCommandeClientReappro') }}',
                type: 'GET',
                data: {
                    'IDAGENCE': _('IDAGENCE').value,
                    'debutPeriode': Periode[0],
                    'finPeriode': Periode[1],
                    'IDCLIENT': _('IDCLIENT').value,
                    'IDPRODUIT': _('IDPRODUIT').value,
                    'etapeTraitement': _('etapeTraitement').value,
                    'type': _('type').value,
                    'mode': _('mode').value,
                    'ValeurProgressionFiltre': _('taux').value,
                    'CritereProgression': _('progression').value,
                    'uniquementCmu': (_('uniquementCmu').checked == true) ? 1 : 0,
                },
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {
                    if (response.success == 1) {
                        let obj = response.data
                        _('nbreCdeClient').innerHTML = response.nbreCdeClient
                        _('totalHTTT').innerHTML = response.totalHTTT
                        _('totalTVATT').innerHTML = response.totalTVATT
                        _('totalTTCTT').innerHTML = response.totalTTCTT
                        $("#tableCommandeClient").DataTable().destroy()
                        tableCommandeClient = $("#tableCommandeClient").DataTable({
                            bFilter: true,
                            language: languageTable,
                            pageLength: 25,
                            "data": obj,
                            'columns': [{
                                    data: 'action',
                                    className: 'text-center'
                                },
                                {
                                    data: 'PourcentageProgression',
                                    className: 'text-center'
                                },
                                {
                                    data: 'date',
                                    className: 'text-center'
                                },
                                {
                                    data: 'heure',
                                    className: 'text-center'
                                },
                                {
                                    data: 'mode',
                                    className: 'text-center'
                                },
                                {
                                    data: 'type',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NumeroCommandeClient',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NomClient'
                                }, {
                                    data: 'etape',
                                    className: 'text-center'
                                },
                                {
                                    data: 'totalHTFormat',
                                    className: 'text-end'
                                }, {
                                    data: 'TVAFormat',
                                    className: 'text-end'
                                },
                                {
                                    data: 'totalTTCFormat',
                                    className: 'text-end'
                                }, {
                                    data: 'comptage_1',
                                    className: 'text-center'
                                }
                            ]
                        })

                        // // Division des valeur totales 
                        divShowPer = $('#tableCommandeClient_filter')
                        BroDivShowPer = divShowPer.parent().prev()
                        BroDivShowPer.addClass('d-flex pt-2')
                        BroDivShowPer.prepend(
                            '<i id="suppLignesCochée" 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>'
                        )

                        placeboutonPreferenceColonne('tableCommandeClient','commandeReaproShowColonne')
                        recuperationPreferenceColonneUtilisateur('tableCommandeClient','commandeReaproShowColonne')

                        completeHandler()
                    } else {

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

        
        $(document).ready(async function () {
            
            await chargerSelectClient()
            await chargerSelectProduit()
            await chargerSelectAgence()
            // chargerSelectTournee(data.IDTOURNEE, data.IDAGENCE)
            // chargerSelectGroupement(data.IDGROUPEMENT_CLIENT)
            chargerTableCdeClient()
        });

        // Click sur le boutton de refresh
        _('btnFiltreTable').addEventListener('click', function() {

            chargerTableCdeClient()
        })

        $(document).on('click', '.commandeReaproShowColonne', function() {
            appliquerPreferenceColonne('tableCommandeClient','Commande-sur-reappro',$(this),'commandeReaproShowColonne')
        })

        $(document).on("click", "#btnMettreEnPreparation", function () { 
            let lignes = listeLigneSelectionne()

            if (lignes.length == 0) {

                notif('danger', 'Attention', 'Veuillez cocher au moins une ligne pour mettre en préparation.')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', () => {
                        $.ajax({
                            type: "POST",
                            url: "{{ route("mettreenPreparation") }}",
                            data: {
                                lignes: lignes,
                                _token: '{{ csrf_token() }}'
                            },
                            dataType: "JSON",
                            success: function (response) {
                                if(response.error== false){
                                    notifSuccess( response.messages)
                                    chargerTableCdeClient()
                                }
                            },
                            error: function (response) {
                                notifError(response.responseJSON.messages)
                            }
                        });
                    }, null,
                    "Voulez-vous mettre les Commandes sélectionnées en préparation ?", {
                        sousTitre: '',
                        infoJNL: "CREATION/MODIFICATION DE COMMANDE",
                        typeJNL: 3,
                        CodeDroit: "DV_ComdeClientModifi"
                    })
        })

        
    </script>

    {{-- // Script info commande client --}}
    <script>
        $(document).on('click', '#infoCdeClient', function() {

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

            $.ajax({

                url: '{{ route('infoCdeClient') }}',
                type: 'POST',
                data: {
                    IDCOMMANDECLIENT: IDCOMMANDECLIENT,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        _('dateCdeClient').innerHTML = response.info.DateCommandeClient
                        _('numCdeClient').innerHTML = response.info.NumeroCommandeClient
                        _('nomClient').innerHTML = response.info.NomClient
                        _('TotalTTCCde').innerHTML = response.info.TotalTTC
                        etape = response.info.EtapeCommande

                        // _('badgeEtape').classList = []

                        if (etape == 1) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-danger-transparent" style="font-size:.78rem;  width:115px;">EN SAISIE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-danger', 'w-100')
                        } else if (etape == 2) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-success-transparent" style="font-size:.78rem;  width:115px;">NON COLLECTEE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-success', 'w-100')
                        } else if (etape == 3) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">EN COLLECTE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etape == 4) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">FACTUREE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etape == 5) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">EXPEDIEE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etape == 6) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">LIVREE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etape == 7) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">DEJA LIVREE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etape == 0) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">TOUTES</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        }

                        // let obj = response.data

                        // $("#tableLigneCdeClient").DataTable().destroy()
                        // tableLigneCdeClient = $("#tableLigneCdeClient").DataTable({

                        //     bFilter: true,
                        //     language: {
                        //         // dom: 'Bfrtip',
                        //         processing: false,
                        //         lengthMenu: "Afficher :&nbsp; _MENU_ lignes",
                        //         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: "Aucune donnée disponible dans le tableau",

                        //         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;:",
                        //     },
                        //     pageLength: 15,
                        //     lengthMenu: [10, 15, 25, 50, 75, 100, 150, 200],
                        //     // lengthChange: false,
                        //     "data": obj,
                        //     'columns': [

                        //         {
                        //             data: 'CodeCipProduit1',
                        //             className: 'text-center'
                        //         },
                        //         {
                        //             data: 'DesignationProduit'
                        //         },
                        //         {
                        //             data: 'QteCommandee',
                        //             class: 'text-center'
                        //         },
                        //         {
                        //             data: 'QteAffectee',
                        //             class: 'text-center'
                        //         },
                        //         {
                        //             data: 'prixCessionFormat',
                        //             class: 'text-end'
                        //         },
                        //         {
                        //             data: 'QteUniteGratuiteFormat',
                        //             class: 'text-center'
                        //         },
                        //         {
                        //             data: 'TotalHTFormat',
                        //             class: 'text-end'
                        //         },
                        //         {
                        //             data: 'tauxRemisePercent',
                        //             class: 'text-center'
                        //         },
                        //         {
                        //             data: 'tauxTVAPercent',
                        //             class: 'text-center'
                        //         },
                        //         {
                        //             data: 'TotalTTCFormat',
                        //             class: 'text-end'
                        //         },
                        //         {
                        //             data: 'LibelleFormeProduit'
                        //         }
                        //     ]
                        // })

                        tableLigneCdeClient = remplissageDataTable({
                                IdentifiantDuTableau : '#tableLigneCdeClient',
                                obj : response.data
                            })

                        // // Division icones d'action
                        let divAction = $('#tableLigneCdeClient').parent().parent().prev().children()
                            .eq(0)

                        divAction.removeClass('col-md-6');
                        divAction.addClass('d-flex col-md-9 pt-2');
                        divAction.next().removeClass('col-md-6');
                        divAction.next().addClass('col-md-3 pt-2')

                        if (etape < 3) {

                            divAction.prepend('<i id="editLaCde" data-id = "' + IDCOMMANDECLIENT +
                                '" class="bx bx-edit text-warning me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelEditLaCde" class="fw-bold me-3 mt-2" style="cursor : pointer;">Modifier la commande</span>'
                            )
                            divAction.prepend('<i id="suppLaCde" data-id = "' + IDCOMMANDECLIENT +
                                '" class="bx bxs-trash text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelSuppLaCde" class="fw-bold me-3 mt-2" style="cursor : pointer;">Supprimer la commande</span>'
                            )
                        }

                        divAction.prepend(
                            '<i id="printLaCde" class="bx bxs-file-pdf text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelPrintLaCde" class="fw-bold me-3 mt-2" style="cursor : pointer;">Imprimer la commande</span>'
                        )

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

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

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

            let value = this.checked

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

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

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

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

    <!-- Script d'export PDF -->
    <script>
        function newGenererPdf(IDCOMMANDECLIENT) {

            JsBarcode("#codeBarIdCdeClient", IDCOMMANDECLIENT, {
                lineColor: "#000000",
                width: 2,
                height: 40,
                displayValue: false
            });

            const html = _('cdeClientPdf').innerHTML

            var options = {
                margin: 10,
                filename: 'bon_de_commande.pdf',
                image: {
                    type: 'jpeg',
                    quality: 0.98
                },
                html2canvas: {
                    scale: 2
                },
                jsPDF: {
                    unit: 'mm',
                    format: 'a4',
                    orientation: 'portrait'
                }
            };

            // Ajoutez un pied de page à chaque page
            options.jsPDF.customize = function(doc) {
                var piedDePage = 'Votre contenu de pied de page';
                var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();

                doc.text(piedDePage, 10, pageHeight - 100);
            };

            html2pdf(html, options);
        }

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

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

            $.ajax({

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

                    // Convertir la base64 en blob
                    var binaryData = atob(response.pdf);
                    var arrayBuffer = new ArrayBuffer(binaryData.length);
                    var uint8Array = new Uint8Array(arrayBuffer);

                    for (var i = 0; i < binaryData.length; i++) {
                        uint8Array[i] = binaryData.charCodeAt(i);
                    }

                    var blob = new Blob([uint8Array], {
                        type: 'application/pdf'
                    });

                    // Créer une URL d'objet pour le blob
                    var blobUrl = URL.createObjectURL(blob);

                    // Ouvrir une nouvelle fenêtre avec le contenu PDF
                    var newWindow = window.open();
                    newWindow.document.write('<iframe width="100%" height="100%" src="' + blobUrl +
                        '"></iframe>');

                    // Vous pouvez également déclencher l'impression automatique
                    newWindow.onload = function() {
                        newWindow.print();
                    };
                },
                error: function(error) {
                    console.log('Erreur lors de la récupération du fichier PDF:', error);
                }
            })
        })
    </script>

    <!-- Script de suppression de commande -->
    <script>
        function suprimeCdeClient(lignes) {
            return new Promise(function(resolve, reject) {
                let success = 0;

                if (lignes.length > 0) {
                    $.ajax({
                        url: '{{ route('suppCdeClient') }}',
                        type: 'POST',
                        beforeSend: progressHandler(),
                        data: {
                            lignes: lignes,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'json',
                        success: function(response) {
                            success = response.success;

                            if (success == 1) {
                                chargerTableCdeClient();
                                notif('success', 'Succès', 'Suppression de ' + response.nbreLigneSupp +
                                    ' élément(s) sur ' + response.nbreLignes);
                                resolve(success);
                            } else {
                                notifError(response.msg);
                                completeHandler()
                                reject(success);
                            }
                        },
                        error: function(error) {
                            console.log(error);
                            reject('Erreur lors de la requête AJAX');
                        }
                    });
                } else {
                    // Aucune ligne fournie, résolvez immédiatement avec la valeur par défaut (0)
                    resolve(0);
                }
            });
        }

        function listeLigneSelectionne() {

            let data = []

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

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

                if (value.checked == true) {

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

            return data
        }

        // Suppression de la ligne direct
        $(document).on('click', '#deleteCdeClient', function() {

            let lignes = []

            lignes.push($(this).attr('data-id'))

            Swal.fire({

                title: 'Êtes-vous sûrs ?',
                text: "De vouloir supprimer cette commande !",
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    suprimeCdeClient(lignes)
                }
            })
        })

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

            let data = listeLigneSelectionne()

            if (data.length == 0) {

                notif('danger', 'Succès', 'VEUILLEZ COCHER AU MOINS UNE LIGNE POUR ÉFFECTUER UNE SUPPRESSION')
            } else {

                Swal.fire({

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

                }).then((result) => {

                    if (result.isConfirmed) {

                        suprimeCdeClient(data)
                        _('checkSelectAll').checked = false
                    }
                })
            }
        })

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

            $('#suppLignesCochée').click()
        })

        // supprimer étant sur la modal
        $(document).on('click', '#suppLaCde', function() {

            let lignes = []

            lignes.push($(this).attr('data-id'))

            Swal.fire({

                title: 'Êtes-vous sûrs ?',
                text: "De vouloir supprimer cette commande !",
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    suprimeCdeClient(lignes)
                        .then(function(success) {

                            if (success == 1) {

                                $('#modalInfoCommandeClient').modal('hide')
                            }
                        })
                }
            })
        })

         $('#modalInfoCommandeClient').on('hidden.bs.modal', function(evt) {
            setIdOnfirstOpenModalBeforeProd(evt.target.id)
        })
    </script>

    <!-- Script de modification de la commande -->
    <script>
        function modifierCde(IDCOMMANDECLIENT) {

            $.ajax({

                url: '{{ route('infoCdeClient') }}',
                type: 'POST',
                data: {
                    IDCOMMANDECLIENT: IDCOMMANDECLIENT,
                    afficherLigne: true,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {

                    if (response.info.IDAGENCE != _('idSiteEnCours').value) {

                        notif('danger', 'Succès', 'Cette commande ne peut être ouverte sur cette agence ')
                        return 0
                    }

                    let url = '{{ url('/ventes/cmdeclient?idCdeClient=') }}'

                    if (response.info.EtapeCommande <= 2) {

                        window.location.href = url + IDCOMMANDECLIENT
                    } else {

                        alert('Cette commande n\'est pas modifiable')
                    }
                }
            })
        }

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

            let IDCOMMANDECLIENT = $(this).attr('data-id')
            modifierCde(IDCOMMANDECLIENT)
        })

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

            let IDCOMMANDECLIENT = $(this).attr('data-id')
            modifierCde(IDCOMMANDECLIENT)
        })
    </script>

    <!-- Script export excel -->
    <script>
        function formatDateToYmdHisMs() {
            var currentDate = new Date();

            var year = currentDate.getFullYear();
            var month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // Les mois commencent à partir de zéro
            var day = ('0' + currentDate.getDate()).slice(-2);
            var hours = ('0' + currentDate.getHours()).slice(-2);
            var minutes = ('0' + currentDate.getMinutes()).slice(-2);
            var seconds = ('0' + currentDate.getSeconds()).slice(-2);
            var milliseconds = ('00' + currentDate.getMilliseconds()).slice(-3); // Les millisecondes sur trois chiffres

            var formattedDate = year + month + day + hours + minutes + seconds + milliseconds;

            return formattedDate;
        }

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

            let lignes = listeLigneSelectionne()

            if (lignes.length == 0) {

                notif('danger', 'Attention', 'Veuillez cocher au moins une ligne pour éffectuer un export.')
                return 0
            }

            lignes.forEach(element => {

                $.ajax({

                    url: '{{ route('infoCdeClient') }}',
                    type: 'POST',
                    data: {
                        IDCOMMANDECLIENT: element,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {

                        $('#bodyExcel').html('')

                        let info = response.info

                        let obj = response.data

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

                            $('#bodyExcel').append('<tr>\
                                                                            <td>' + value['CodeCipProduit1'] + '</td>\
                                                                            <td>' + value['QteCommandee'] + '</td>\
                                                                            <td>' + value['DesignationProduit'] + '</td>\
                                                                        </td>')
                        })

                        TableToExcel.convert(document.getElementById("tableExcel"), {

                            name: formatDateToYmdHisMs() + '_' + info
                                .NumeroCommandeClient + '_' + info.NomClient + ".xlsx",
                            sheet: {

                                name: "Feuille 1"
                            }
                        })
                    },
                    error: function(error) {
                        console.log(error)
                    }
                })
            })

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

   
@endsection