@extends('models')
@section('titre-page',"Commande à lancer")
@section('content-body')
    <!-- Start::app-content -->

    <!-- 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">Commande à lancer</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <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="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-6 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-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">Table&nbsp;:</p>
                                        <select name="IDTABLECONTROLE" id="IDTABLECONTROLE">

                                        </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="">Uniquement les clients de garde</p>
                                </div>
                                <div class="d-flex mb-1">
                                    <input type="checkbox" class="form-check-input me-1" id="checkNonAttribue" name="checkNonAttribue">
                                    <p class="text-muted" for="">Uniquement les non attribué</p>
                                </div>
                                <div class="d-flex">
                                    <input type="checkbox" class="form-check-input me-1" id="checkCMU" name="checkCMU">
                                    <p class="text-muted" for="">Uniquement les 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-merge text-dark me-1 fs-18 btnFusionnerCde'></span><p style="cursor:pointer" class="text-muted btnFusionnerCde">Fusionner la sélection</p>
                        </div>
                        <div class="d-flex">
                            <span class='bx bx-share-alt text-warning me-1 fs-18' id="preparerCdeSelect"></span><p style="cursor:pointer" id="labelPreparerCdeSelect" class="text-muted">Mettre en préparation</p>
                        </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="row mt-2 mb-xl-4">
                        <div class="mb-2">
                            <p class="text-muted mb-0"> ID commande interne</p>
                            <input type="text" class="form-control text-center" id="IDCOMMANDECLIENT" name="IDCOMMANDECLIENT">
                        </div>
                        <div class="mb-2">
                            <p class="text-muted mb-0"> N° commande client</p>
                            <input type="text" class="form-control" id="NumeroCommandeClient" name="NumeroCommandeClient" readonly>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-around">
                        <div class="d-flex">
                            <span class='bx bxs-printer text-dark me-1 fs-18'></span><p style="cursor:pointer" class="text-muted">Imprimer</p>
                        </div>
                        <div class="d-flex">
                            <span class='bx bx-check-double text-success me-1 fs-18'></span><p style="cursor:pointer" class="text-muted">Valider</p>
                        </div>
                        <div class="d-flex">
                            <span class='bx bx-refresh text-info me-1 fs-18'></span><p style="cursor:pointer" class="text-muted" id="filtrerParID">Actualiser</p>
                        </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-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto w-100" id="tableCdeAReceptionner">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th data-orderable="false" class="text-center colTable">Date</th>
                                    <th data-orderable="false" class="text-center colTable">N° Commande</th>
                                    <th data-orderable="false" class="text-center colTable">Client</th>
                                    <th data-orderable="false" class="text-center colTable">Type</th>
                                    <th data-orderable="false" class="text-center colTable">Montant TTC</th>
                                    <th data-orderable="false" class="text-center colTable">Nb ligne</th>
                                    <th data-orderable="false" class="text-center colTable">Table</th>
                                    <th data-orderable="false" class="text-center colTable">NF</th>
                                    <th data-orderable="false" class="text-center colTable">RS</th>
                                    <th data-orderable="false" class="text-center colTable">Commentaire</th>
                                    <th data-orderable="false" class="text-center colTable">LibelleTournee</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- 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 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 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 class="card shadow-sm bg-white rounded py-1" id="cardCommentaire">
                            <div class="card-body row py-1">
                                <div class="mb-2">
                                    <label class="fw-bold fs-16">Commentaire</label>
                                </div>
                                <p class="text-muted mb-0" id="commentaire">

                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-0 table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableLigneCdeClient">
                            <thead  class="table-header-primary">
                                <tr>
                                    <th class="text-center">Code CIP</th>
                                    <th class="text-center">Désignation</th>
                                    <th class="text-center">Qté cdée</th>
                                    <th class="text-center">Qté affectée</th>
                                    <th class="text-center">P. cession HT</th>
                                    <th class="text-center">Quantité UG</th>
                                    <th class="text-center">Total HT</th>
                                    <th class="text-center">Remise</th>
                                    <th class="text-center">TVA</th>
                                    <th class="text-center">Total TTC</th>
                                    <th class="text-center">Forme</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Attribution de commande à table de contrôle -->
    <div id="modalAttributionCdeTC" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2"> Attribution de commande à table de contrôle </h6>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end mb-3">
                        <button class="btn btn-success float-end" id="btnAttribuerCde">
                            <i class="bx bx-check-circle"></i> Attribuer la ou les commandes à la table de contrôle sélectionnée
                        </button>
                        <button class="btn btn-info float-end ms-4">
                            <i class="bx bx-refresh"></i> Actualiser
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto w-100" id="tableTableControle">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                    </th>
                                    <th data-orderable="false" class="text-center colTable">Table de contrôle</th>
                                    <th data-orderable="false" class="text-center colTable">Nbre cde restante</th>
                                    <th data-orderable="false" class="text-center colTable">Nbre ligne restante</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

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

        ignoreGlobalSessionUpdate = true

        $('#IDTOURNEE').select2()
        $('#IDTABLECONTROLE').select2()

        _('type').value = 0
        _('mode').value = 0

        function listeLigneSelectionne(){

            let data = []

            let lignes = tableCdeAReceptionner.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)
                    }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>')
                        })
                    }
                }
            })
        }

        function chargerSelectTableControle(){

            $.ajax({

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

                    if (response.success == 0) {

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

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

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

        function chargerTableCommandeAPreparer(formTraitement){

            $.ajax({

                url : '{{ route("cmde_a_preparer")}}',
                type : 'POST',
                data : formTraitement,
                xhrFields: {
                    onprogress: function(event) {
                        // console.log(event)
                        // if (event.lengthComputable) {
                        //     var percentComplete = (event.loaded / event.total) * 100;
                        //     console.log('Progression : ' + percentComplete + '%');
                        // } else {
                        //     console.log('Progression non calculable');
                        // }
                    }
                },
                beforeSend : progressHandler(),
                processData: false,
                contentType: false,
                dataType : 'json',
                success : function(response){

                    let obj = response.data

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

                        bFilter: true,
                        language: languageTable,
                        lengthChange: false,
                        "data": obj,
                        'columns': [

                            {
                                data: 'action',
                                className: 'text-center'
                            },
                            {
                                data: 'date',
                                className: 'text-center'
                            },
                            {
                                data: 'NumeroCommandeClientFormat',
                                className: 'text-center'
                            },
                            {
                                data: 'NomClient'
                            },
                            {
                                data: 'libelleType',
                                className: 'text-center'
                            },
                            {
                                data: 'TotalTTCFormat',
                                className: 'text-end'
                            },
                            {
                                data: 'nbreligne',
                                className: 'text-center'
                            },
                            {
                                data: 'ImmatriculationTable',
                                className: 'text-center'
                            },
                            {
                                data: 'checkNePasFusionner',
                                className: 'text-end'
                            },
                            {
                                data: 'checkARecupererSite',
                                className: 'text-end'
                            },
                            {
                                data: 'CommentaireComdeClientFormat',
                                className: 'text-end'
                            },
                            {
                                data: 'LibelleTournee',
                                visible : false
                            }
                        ],
                        order: [],
                        drawCallback: function (settings) {
                            var api = this.api();
                            var rows = api.rows().nodes();
                            // var rows = api.rows({ page: 'current' }).nodes();
                            var last = null;

                            // api.rows({ page: 'current' }).every(function () {
                            api.rows().every(function () {

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

                                libHeureDepart = (IDTOURNEE > 0) ? 'Heure de départ : <label style="color : #D3361D;">' + HeureDepartTourneeFormat : ''

                                if (last !== libelleTournee) {
                                    $(rows).eq(this.index()).before('<tr class="group" style="background : #E3E3E3">\
                                        <td colspan="3" style="font-weight: bold; color: #D3361D" class="ps-3"> Tournée : ' + libelleTournee + '</td>\
                                        <td colspan="9" style="font-weight: bold;" class="ps-3">' + libHeureDepart + '</label></td>\
                                    </tr>');

                                    last = libelleTournee;
                                }
                            });

                            completeHandler()
                        }
                    })

                    divShowPer = $('#tableCdeAReceptionner_filter')

                    // // Division des valeur totales
                    BroDivShowPer = divShowPer.parent().prev()
                    BroDivShowPer.addClass('d-flex align-items-center pt-2')
                    BroDivShowPer.prepend(`
                        <i  class="ri ri-file-excel-2-line text-success me-1" style="font-size : 17px; cursor : pointer;"></i>
                        <span id="exporterExcel" class="fw-bold me-3" style="cursor : pointer;">Exporter</span>
                    `)
                    
                }
            })
        }

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

            chargerSelectTournee()
            chargerSelectTableControle()

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

            chargerTableCommandeAPreparer(formTraitement)

        })

    </script>

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

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

            let value = this.checked

            let lignes = tableCdeAReceptionner.rows().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>

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

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

            chargerTableCommandeAPreparer(formTraitement)
        })

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

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

    <!-- Script de rechercher par IDCOMMANDECLIENT -->
    <script>

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

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

            chargerTableCommandeAPreparer(formTraitement)
        })
    </script>

    <!-- Script de recupération sur site -->
    <script>

        $(document).on('click', '.checkARecuperer', function(e){

            e.preventDefault()

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

            Swal.fire({

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

            }).then((result) => {

                if (result.isConfirmed) {
                    $.ajax({

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

                            IDCOMMANDECLIENT : IDCOMMANDECLIENT,
                            checked : value,
                            _token : '{{ csrf_token() }}'
                        },
                        dataType : 'json',
                        success : function(response){

                            if (response.success == 0) {

                                elmt.checked = elmt.checked
                                notifError(response.msg)
                            }else if(response.success == 1){

                                elmt.checked = !elmt.checked
                            }
                        }
                    })
                }
            })
        })
    </script>

    <!-- Script de fusion des commandes -->
    <script>

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

            let tableSelectionne = listeLigneSelectionne()

            Swal.fire({

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

            }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({
                        url: '{{ route("fusionnerCdeClient") }}',
                        type: 'POST',
                        data : {
                            tableSelectionne : tableSelectionne,
                            _token : "{{ csrf_token() }}"
                        },
                        dataType: 'json',
                        success: function(response) {

                            if(response.success == 2){

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

                                chargerTableCommandeAPreparer(formTraitement)
                                notif('success', 'Succès', 'Fusion éffectuée avec succès')
                            }else if(response.success == 1){

                                notif('danger', 'Erreur', 'Seules les commandes de même client peuvent être fusionnées')
                            }else{

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

                            notifError(error)
                            completeHandler()
                        }
                    })
                }
            })
        })
    </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',
                beforeSend : progressHandler(),
                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')
                        }

                        if(response.info.CommentaireComdeClient == null || response.info.CommentaireComdeClient.replace(/\s/g, '') == ''){

                            _('cardCommentaire').style.display = 'none'
                        }else{

                            _('commentaire').innerHTML = response.info.CommentaireComdeClient
                            _('cardCommentaire').style.display = ''
                        }

                        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],
                            "drawCallback": function(settings) {

                                completeHandler()
                            },
                            // 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'
                                }
                            ]
                        })
                            
                            divShowPer_ = $('#tableLigneCdeClient_filter')

                            // // Division des valeur totales
                            BroDivShowPer_ = divShowPer_.parent().prev()
                            BroDivShowPer_.addClass('d-flex pt-2')
                            BroDivShowPer_.prepend(`
                                <i  class="ri ri-file-excel-2-line text-success me-1 mt-2" style="font-size : 13px; cursor : pointer;"></i>
                                <span id="exporter-cde-ligne-client-Excel" class="fw-bold mt-2 me-3" style="cursor : pointer;">Exporter</span>
                            `)
                        $('#modalInfoCommandeClient').modal('show')
                    }else{

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

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

    <!-- Script de preparation de cde -->
    <script>

        var tableTableControle

        function listeLigneSelectionneTC(){

            let data = []

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

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

                if(value.checked == true){

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

            return data
        }

        $(document).on('click', '.checkTC', function(e){

            elmt = this.checked

            if (elmt == true) {

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

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

                    value.checked = false
                })
            }

            this.checked = elmt
        })

        var ModeDeRepartitionCde

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

            if (_('idSiteEnCours').value == 1) {

                notif('danger', 'Erreur', 'Veuillez sélectionner un site valide')
                return 0
            }

            if (listeLigneSelectionne().length == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner au moins une ligne de commande')
                return 0
            }

            let ligne = listeLigneSelectionne()

            Swal.fire({

                title: 'Êtes-vous sûrs ?',
                text: "De vouloir préparer les commandes sélectionnées !",
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    getModeRepartition()
                        .then(modeRepartition => {

                            ModeDeRepartitionCde = modeRepartition

                            if (ModeDeRepartitionCde == 1) {

                                $.ajax({

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

                                        if(response.success == 1){

                                            let obj = response.data

                                            $('#tableTableControle').DataTable().destroy()

                                            tableTableControle = $('#tableTableControle').DataTable({

                                                bFilter: true,
                                                language: languageTable,
                                                lengthChange: false,
                                                "data": obj,
                                                'columns': [

                                                    {
                                                        data: 'checkBox',
                                                        className: 'text-center'
                                                    },
                                                    {
                                                        data: 'ImmatriculationTable',
                                                        className: 'text-center'
                                                    },
                                                    {
                                                        data: 'nbreCde',
                                                        className: 'text-center'
                                                    },
                                                    {
                                                        data: 'nbreLigne',
                                                        className: 'text-center'
                                                    }
                                                ],
                                                order: [],
                                            })

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

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

                                        notifError(error.responseText)
                                        completeHandler()
                                    }
                                })

                            }else if(ModeDeRepartitionCde == 4 || ModeDeRepartitionCde == 7 || ModeDeRepartitionCde == 5 ||  ModeDeRepartitionCde == 6){

                                $.ajax({

                                    url : '{{ route("prepareCdeSelect") }}',
                                    type: 'POST',
                                    data : {
                                        ligne : ligne,
                                        IDAGENCE : _('idSiteEnCours').value,
                                        _token : '{{ csrf_token() }}'
                                    },
                                    beforeSend : progressHandler(),
                                    dataType: 'json',
                                    success: function(response) {

                                        if (response.success == 1) {

                                            notif('success', 'Succès', 'Préparation de la/des commande(s) sélectionnée (s) effectuée')
                                            _('actualiserInterface').click()

                                            if (response.listeDesFactureTT.length == 0 && ModeDeRepartitionCde == 7) {
                                                
                                                notif('danger', 'Error', 'Bon de préparation non facturé')
                                                return 0
                                            }

                                            if (ModeDeRepartitionCde == 7) {
                                                
                                                printFacture(response.listeDesFactureTT)
                                                printEtiquetteZebra(response.listeDesFactureTT)
                                                printEtiquetteColisFactureClient(response.listeDesFactureTT)
                                            }
                                        }else if(response.success == 5){

                                        }else{

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

                                        notifError(error.responseText);
                                        completeHandler()
                                    }
                                })
                            }
                        })
                        .catch(error => {
                            notifError(error)
                        })
                }
            })
        })

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

            _('preparerCdeSelect').click()
        })

        // Script attribuer commande à table de contrôle
        _('btnAttribuerCde').addEventListener('click', function(){

            if(listeLigneSelectionneTC().length == 0){

                notif('danger', 'Error', 'Veuillez sélectionner une table de contrôle')
                return 0
            }

            $.ajax({

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

                    listesCdes : listeLigneSelectionne(),
                    IDTABLECONTROLE : listeLigneSelectionneTC()[0],
                    IDAGENCE : _('idSiteEnCours').value,
                    cas : 1,
                    _token : '{{ csrf_token() }}'
                },
                beforeSend : progressHandler(),
                dataType: 'json',
                success: function(response) {

                    // Lorsqu'il n'y a aucun lecteur code bar disponible
                    if(response.success == 1){

                        Swal.fire({

                            title: 'Aucun lecteur disponnible',
                            text: "Voulez-vous poursuivre l'exécution ?",
                            icon: 'warning',
                            showCancelButton: true,
                            customClass: {
                                confirmButton: 'btn btn-danger ms-2'
                            },
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Oui',
                            cancelButtonText: 'Non'

                            }).then((result) => {

                            if (result.isConfirmed) {
                                $.ajax({

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

                                        listesCdes : response.listeLigneSelectionne,
                                        IDTABLECONTROLE : response.IDTABLECONTROLE,
                                        IDAGENCE : _('idSiteEnCours').value,
                                        cas : 2,
                                        _token : '{{ csrf_token() }}'
                                    },
                                    dataType : 'json',
                                    success : function(response){

                                        if (response.success == 0) {

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

                                            elmt.checked = !elmt.checked
                                        }
                                    }
                                })
                            }
                        })
                        // notif('success', 'Succès', 'Attribution des tables de contrôle éffectuée')
                        // $('#modalAttributionCdeTC').modal('show')
                        // _('actualiserInterface').click()
                    }else if(response.success == 2){

                        _('actualiserInterface').click()
                        $('#modalAttributionCdeTC').modal('hide')
                        notif('success', 'Succès', 'Attribution éffectuée et bon de préparation créé')
                    }else{

                        notifError(response.msg)
                    }

                    completeHandler()
                },
                error : function(error){

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

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

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

            $.ajax({

                url: '{{ route('modifierSessionSite') }}',
                type: 'POST',
                beforeSend: progressHandler(),
                data: {
                    IDAGENCE: _('idSiteEnCours').value,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json',
                success: function(response) {

                    completeHandler()

                    _('actualiserInterface').click()
                }
            })
        })

        
        $(document).on('click','#exporterExcel',function(){
            var data =  getTableWithRuptures('tableCdeAReceptionner')
            const filename =file_name("COMMANDE_A_LANCEE");
            download_excel_file('{{route("export_global_excel.export")}}', data, filename)
        })

        $(document).on('click','#exporter-cde-ligne-client-Excel',function(){
            var data =  getCleanedTableData('tableLigneCdeClient')
            const filename =file_name("COMMANDE_LIGNE_CLIENT");
            const tabs_format = { E: '#,##0', G: '#,##0', J: '#,##0' };
            download_excel_file('{{route("export_global_excel.export")}}', data, filename,[],tabs_format)
        })
    </script>
@endsection