@extends('models')
@section('titre-page',"Expéditions en attente")
@section('content-body')
    <!-- Start::app-content -->

    <style>
        .height-input {
            height: 2.5rem !important;
        }

        p.actualiserInter:hover{

            text-decoration: underline;
            color : #2d58ce;
            transition-duration: 0.3s;
        }

        p.cloturerPrepaFacture:hover{

            text-decoration: underline;
            color: rgb(52, 223, 166);
            font-size: 20px;
            transition-duration: 0.3s;
        }

        p.btnActualiserModal:hover{
            text-decoration: underline;
            color : #2d58ce;
            font-size: 20px;
            transition-duration: 0.3s;
        }
        p.btnRecupererModal:hover{

            text-decoration: underline;
            color: rgb(52, 223, 166);
            font-size: 20px;
            transition-duration: 0.3s;
        }

        p.addTransfert:hover{

            text-decoration: underline;
            color : #2d58ce;
            font-size: 20px;
            transition-duration: 0.3s;
        }
    </style>

    <!-- 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 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Ventes</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Expéditions en attente</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-6 col-lg-8 col-md-8">
                    <div class="row">
                        <div class="col-xl-6 col-lg-6 col-sm-6 mx-0">
                            <button type="button" class="btn btn-secondary-light w-100" id="btnCloturerPrepa">
                                <i style="font-size:15px" class=" ri ri-add-circle-line me-1"></i>Clôturer la préparation des tournées sélectionnées
                            </button>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-sm-6 mx-0 px-0">
                            <button type="button" class="btn btn-success-light w-100" title="Recontrôler la facture" id="btnModalCdeARecupererSurSite" style="font-size:15px">
                                <i style="font-size:18px" class="bx bx-recycle me-2"></i>Liste des commandes à récupérer sur le site
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-light rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Nbre tournée</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libNbreTournee">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-info rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Cde total</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libNbreCdeTt">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-warning rounded-0">
                <div class="card-body px-0 py-2 px-1">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Cde non en prepa</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libCdeNonEnPrepa">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-danger rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Cde en prepa</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libCdeEnPrepa">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-primary rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Cde prête</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libNbreCdePrete">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-success rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">% Cde prête</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libPercCdePrete">0</h6>
                        </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 w-100 table-striped text-nowrap overflow-auto" id="tableExpeditionEnAttente">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        Actions
                                    </th>
                                    <th class="text-center colTable">Tournée</th>
                                    <th class="text-center colTable">Heure<br>départ</th>
                                    <th class="text-center colTable">Commande <br>totale</th>
                                    <th class="text-center colTable">Commandes <br>non collectées</th>
                                    <th class="text-center colTable">Commandes <br>en collecte</th>
                                    <th class="text-center colTable">Commandes <br>prêtes</th>
                                    <th class="text-center colTable">% Cdes<br>prêtes</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <!-- Modal Info Expedition en attente -->
    <div class="modal fade" id="modalInfoExpeditionEnAttente" 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="titleModalInfoExpeditionEnAttente"> Expédition en attente -> Détails de la tournée</h6>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="number" style="display: none;" id="IDTOURNEE">
                    <div class="mt-0 table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableFactureClient">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                    </th>
                                    <th class="text-center">Client</th>
                                    <th class="text-center">Date - heure<br>commande</th>
                                    <th class="text-center">N° commande</th>
                                    <th class="text-center">N° facture</th>
                                    <th class="text-center">Bacs</th>
                                    <th class="text-center">Cartons</th>
                                    <th class="text-center">Total</th>
                                    <th class="text-center">Prêts</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal expédition en attente à récupérer sur site -->
    <div class="modal fade" id="modalExpeditionEnAttenteRecupererSite" 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="titleModalInfoExpeditionEnAttente"> Expédition en attente à récupérer sur site</h6>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formModalExpeditionEnAttenteARecupererSite">
                        <div class="card">
                            <div class="card-body row">
                                <div class="col-md-2">
                                    <p class="mb-0 text-muted">Site&nbsp;:</p>
                                    <select name="IDAGENCE" id="IDAGENCE" class="form-select" @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <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-md-3">
                                    <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-md-2 d-flex pt-3">
                                    <input type="checkbox" class="form-check-input me-2 mt-2" name="uniqClientGardeModal" id="uniqClientGardeModal">
                                    <p class="form-check-label">Uniq. les clients de garde</p>
                                </div>
                                <div class="col-md-2">
                                    <div class="d-flex pt-0">
                                        <i class="bx bx-refresh me-2 text-info btnActualiserModal" style="font-size : 18px;"></i><p class="btnActualiserModal" style="cursor : pointer;font-size : 12px;">Actualiser</p>
                                    </div>
                                    <div class="d-flex">
                                        <i class="bx bx-check-circle me-2 text-success btnRecupererModal" style="font-size : 18px;"></i><p class="btnRecupererModal" style="cursor : pointer;font-size : 12px;">Récupérer</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="mt-0 table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableExpeEnAttenteARecupererSite">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center">Action</th>
                                    <th class="text-center">Agence</th>
                                    <th class="text-center">Client</th>
                                    <th class="text-center">Date - heure<br>commande</th>
                                    <th class="text-center">N° commande</th>
                                    <th class="text-center">N° facture</th>
                                    <th class="text-center">Type</th>
                                    <th class="text-center">Bacs</th>
                                    <th class="text-center">Cartons</th>
                                    <th class="text-center">Total colis</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal detail expédition client -->
    <div class="modal fade" id="modalDetailExpeditionClient" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Détail expédition client</h5>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formDetailExpeditionClient">
                        <div class="row">
                            <div class="card mb-3">
                                <div class="card-body py-2">
                                    <div class="d-flex py-2">
                                        <label class="fw-bold">
                                            Client :&nbsp;&nbsp;
                                        </label>
                                        <label id="nomClientDetailExpe">

                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="">
                                <p class="mb-0 text-muted">Réceptionner par :</p>
                                <input type="text" class="form-control text-center" name="receptionnePar" id="receptionnePar" />
                            </div>
                            <div class="col-xl-12">
                                <div class="card custom-card">
                                    <div class="card-body">
                                        <input type="file" class="multiple-filepond" name="filepond" multiple data-allow-reorder="true" data-max-file-size="3MB" data-max-files="6">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <p class="mb-0 text-muted">Observation de livraison :</p>
                                <textarea class="form-control" name="observationLivrai" id="observationLivrai" cols="30" rows="6"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnValiderExpeditionClient">
                        <i class="bx bx-check-circle me-2"></i>
                        Valider
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal choix de la tournée -->
    <div class="modal fade" id="modalChoixTournee" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Choix de la tournée</h5>
                    <button type="button" class="btn-close bg-light closeModalChoixTournee" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card 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">Expédition en attente de chargement</span>
                        </div>
                        <div class="card-body py-3 ">
                            <select name="IDEXPEDITIONTOURNEE" id="IDEXPEDITIONTOURNEE">

                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="validerChoixTournee">
                        <i class="bx bx-check-circle me-2"></i>
                        Valider
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

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

        $(function() {
            dateRangeInput('input[name="datetimes"]', false, "DD/MM/YYYY")
            // $('input[name="datetimes"]').daterangepicker({
            //     timePicker: false,
            //     "locale": {
            //         "format": "DD/MM/YYYY",
            //         "separator": " - ",
            //         "applyLabel": "Appliquer",
            //         "cancelLabel": "Annuler",
            //         "fromLabel": "From",
            //         "toLabel": "To",
            //         "customRangeLabel": "Custom",
            //         "weekLabel": "W",
            //         "daysOfWeek": [
            //             "Dim",
            //             "Lun",
            //             "Mar",
            //             "Mer",
            //             "Jeu",
            //             "Ven",
            //             "Sam"
            //         ],
            //         "firstDay": 2
            //     },
            // });
        })

        tableExpeditionEnAttente
        tableFactureClient
        tableExpeEnAttenteARecupererSite

        function listeLigneSelectionne(){

            let data = []

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

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

                if(value.checked == true){

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

            return data
        }

        function chargerTableListeTournee(){

            $.ajax({

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

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

                        let dateDebut = response.debutPeriode
                        let dateFin = response.finPeriode
                        let clientGarde = response.clientGarde
                        let tourneSas = response.tourneSas

                        _('libNbreTournee').innerHTML = response.nbreTournee
                        _('libNbreCdeTt').innerHTML = response.nbreCdeTt
                        _('libCdeNonEnPrepa').innerHTML = response.nbreCdeNonEnPrepa
                        _('libCdeEnPrepa').innerHTML = response.nbreCdeEnPrepa
                        _('libNbreCdePrete').innerHTML = response.nbreCdePrete
                        _('libPercCdePrete').innerHTML = response.percCdePrete+' %'

                        $('#tableExpeditionEnAttente').DataTable().destroy()
                        tableExpeditionEnAttente =  $("#tableExpeditionEnAttente").DataTable({

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

                                {
                                    data: 'action',
                                    className: 'text-center'
                                },
                                {
                                    data: 'LibelleTournee'
                                },
                                {
                                    data: 'heureDepart',
                                    className: 'text-center'
                                },
                                {
                                    data: 'CdeTotal',
                                    className: 'text-center'
                                },
                                {
                                    data: 'CdesNonCollecte',
                                    className: 'text-center'
                                },
                                {
                                    data: 'CdesEnCollecte',
                                    className: 'text-center'
                                },
                                {
                                    data: 'CdesPretes',
                                    className: 'text-center'
                                },
                                {
                                    data: 'percentCdesPreteFormat'
                                }
                            ],
                            order: [],
                            // initComplete: function(settings, json) {
                            
                            //     completeHandler()
                            // }
                        })

                        completeHandler()

                        let divFilter = $('#tableExpeditionEnAttente_filter')
                        divFilter.parent().removeClass('col-md-6')
                        divFilter.parent().addClass('col-md-3')
                        let broDivFilter = divFilter.parent().prev()
                        broDivFilter.parent().prepend('<div class="col-md-3 d-flex align-items-center">\
                                                        <p class="text-muted mb-0 me-2">Période</p>\
                                                        <input name="filtrePeriode" id="datetimes" class="form-control form-control-sm text-center" type="text" aria-label=".form-control-sm">\
                                                    </div>')
                        
                        // Initialisez le date range picker avec les dates définies
                        $('input[name="filtrePeriode"]').daterangepicker({
                            timePicker : false,
                            "locale": {
                                "format": "DD/MM/YYYY",
                                "separator": " - ",
                                "applyLabel": "Appliquer",
                                "cancelLabel": "Annuler",
                                "fromLabel": "De",
                                "toLabel": "À",
                                "customRangeLabel": "Personnalisé",
                                "weekLabel": "S",
                                "daysOfWeek": [
                                    "Dim",
                                    "Lun",
                                    "Mar",
                                    "Mer",
                                    "Jeu",
                                    "Ven",
                                    "Sam"
                                ],
                                "firstDay": 1
                            },
                            opens: 'center',
                            startDate: moment(dateDebut, 'YYYY-MM-DD'),
                            endDate: moment(dateFin, 'YYYY-MM-DD')
                        })

                        if (response.retourPeriode != '' && response.retourPeriode != null) {
                            _('datetimes').value = response.retourPeriode
                        }
                        
                        let checked = ''

                        if (clientGarde == true) {
                            checked = 'checked'
                        }

                        let checkSAS = ''

                        if (tourneSas == true) {
                            
                            checkSAS = 'checked'
                        }

                        broDivFilter.addClass('row')
                        broDivFilter.append('<div class="col-md-3 d-flex pt-2">\
                                                <input type="checkbox" class="form-check-input me-2" id="checkClientGarde" '+checked+'>\
                                                <p class="form-check-label" for="checkClientGarde" style="cursor:pointer;" id="labelCheckClientGarde">Garde</p>\
                                            </div>\
                                            <div class="col-md-3 d-flex pt-2">\
                                                <input type="checkbox" class="form-check-input me-2" id="checkTourneeSAS" '+checkSAS+'>\
                                                <p class="form-check-label" for="checkTourneeSAS" style="cursor:pointer;" id="labelCheckTourneeSAS">SAS</p>\
                                            </div>\
                                            <div class="col-md-3 d-flex pt-2">\
                                                <i class="bx bx-refresh me-2 text-info actualiserInter" style="font-size : 18px;"></i><p class="actualiserInter" style="cursor : pointer;font-size : 12px;">Actualiser</p>\
                                            </div>\
                                            <div class="col-md-3 d-flex pt-2">\
                                                <i class="ri ri-file-excel-2-line me-2 text-success " style="font-size : 16px;"></i><p class="btn-export-expedition-attente mt-1" style="cursor : pointer;font-size : 12px;">Exporter</p>\
                                            </div>')

                    }else{

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

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

        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>')
                    })

                    $('#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"] + '" data-code="' + (value["CodeClient"] || '') + '">' + value[
                            "NomClient"] + '</option>')
                    })

                    $('#IDCLIENT').select2({
                        dropdownParent: $("#modalExpeditionEnAttenteRecupererSite")
                    })

                    $('#IDCLIENT').val(valeur).trigger('change')
                }
            })
        }

        chargerTableListeTournee(_('idSiteEnCours').value, false)

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

            _('checkClientGarde').checked = !_('checkClientGarde').checked
        })
    </script>

    <!-- Script actualiser les filtres du tableau -->
    <script>

        function modifierSession(){

            return new Promise(function(resolve, reject){

                let session = 'filterMemory.filtreExpeditionEnAttente'
                let Periode = convertirFormatDate2(_('datetimes').value)

                let valeurSession = {

                    'debutPeriode' : Periode[0],
                    'finPeriode' : Periode[1],
                    'uniqClientGarde' : (_('checkClientGarde').checked == true) ? 1 : 0,
                    'sas' : (_('checkTourneeSAS').checked == true) ? 1 : 0
                }

                modifierValeurSession('{{ csrf_token() }}', session, valeurSession)
                    .then(function(response){

                        resolve(response)
                    })
            })
        }

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

            modifierSession()
                .then(function(response){

                    chargerTableListeTournee()
                })
            
        })

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

            _('checkTourneeSAS').checked = false

            modifierSession()
                .then(function(response){

                    chargerTableListeTournee()
                })
        })

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

            _('checkClientGarde').checked = false

            modifierSession()
                .then(function(response){

                    chargerTableListeTournee()
                })
        })
    </script>

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

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

            chargerTableListeTournee(_('idSiteEnCours').value, _('checkClientGarde').checked)
        })
    </script>

    <!-- Script d'info expédition en attente -->
    <script>

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

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

            $.ajax({

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

                    IDTOURNEE : IDTOURNEE,
                    IDAGENCE : _('idSiteEnCours').value,
                    clientGarde : _('checkClientGarde').checked
                },
                dataType: 'json',
                beforeSend : progressHandler(),
                success: function(response) {

                    if (response.success == 1) {

                        _('IDTOURNEE').value = IDTOURNEE
                        let LibelleTournee = response.info.LibelleTournee || response.info.LibelleTourneeGarde

                        $('#titleModalInfoExpeditionEnAttente').html('Expédition en attente -> Détails de la tournée '+LibelleTournee)

                        let obj = response.data
                        
                        $('#tableFactureClient').DataTable().destroy()

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

                            bFilter: true,
                            language: languageTable,
                            lengthChange: false,
                            lengthMenu : [5,10,15,20,25],
                            pageLength : 15,
                            "data": obj,
                            'columns': [

                                {
                                    data: 'action',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NomClient'
                                },
                                {
                                    data: 'dateHeureCde',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NumeroCommandeClientFormat'
                                },
                                {
                                    data: 'NumeroFactureClient'
                                },
                                {
                                    data: 'NbreColisBacsFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NbreColisCartonsFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NbreColisTotal',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NbreColisPret',
                                    className: 'text-center'
                                }
                            ],
                            order: [],
                        })

                        let divFilter = $('#tableFactureClient_filter')
                        let broDivFilter = divFilter.parent().prev()

                        let checked = ''

                        if (_('checkClientGarde').checked == true) {
                            checked = 'checked'
                        }

                        broDivFilter.addClass('row')
                        broDivFilter.append('<div class="col-md-7 d-flex pt-2">\
                                                <i class="bx bx-check-circle text-success me-2 cloturerPrepaFacture" style="font-size : 18px;"></i>\
                                                <p class="form-check-label cloturerPrepaFacture" style="cursor:pointer;font-size : 12px;">Clôturer la preparation des factures sélectionnées</p>\
                                            </div>\
                                            <div class="col-md-5 d-flex pt-2">\
                                                <i class="bx bx-transfer-alt text-info me-2 addTransfert" style="font-size : 18px;"></i>\
                                                <p class="form-check-label addTransfert" style="cursor : pointer; font-size : 12px;">Ajouter la sélection à une expédition en attente</p>\
                                            </div>')

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

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

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

    <!-- Script de préparation de commandes -->
    <script>

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

            elmt = this.checked

            if (elmt == true) {

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

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

                    value.checked = false
                })
            }

            this.checked = elmt
        })

        // Passant par la tournée
        function cloturerPrepaParIDTOURNEE(){

            $.ajax({

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

                    IDAGENCE : _('idSiteEnCours').value,
                    IDTOURNEE : listeLigneSelectionne()[0],
                    clientGarde : _('checkClientGarde').checked,
                    _token : '{{ csrf_token() }}'
                },
                dataType: 'json',
                beforeSend : progressHandler(),
                success: function(response) {

                    if (response.success == 1) {

                        notif('danger', 'Erreur', 'Vous n\'avez pas le droit d\'éffectuer cette opération')
                    }else if(response.success == 2){

                        notif('danger', 'Erreur', 'Aucune expédition à clôturer')
                    }else if(response.success == 3){

                        notif('success', 'Succès', 'Clôture éffectuée');
                        chargerTableListeTournee(_('idSiteEnCours').value, _('checkClientGarde').checked)
                    }else{

                        notifError(response.msg)
                    }

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

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

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

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

                notif('danger', 'Erreur', 'Veuillez sélectionner une tournée')
                return 0
            }

            if (_('idSiteEnCours').value == 1) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un site de vente')
                return 0
            }


            confirmMdp('{{ csrf_token() }}', cloturerPrepaParIDTOURNEE, null, 'Voulez-vous clôturer la préparation en cours ?')
        })


        // Passant par les lignes de facture
        function listeLigneFactureClientSelect(){

            let data = []

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

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

                if(value.checked == true){

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

            return data
        }

        function cloturerPrepaParFacture(){

            $.ajax({

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

                    IDAGENCE : _('idSiteEnCours').value,
                    IDTOURNEE : _('IDTOURNEE').value,
                    listeFactureClient : listeLigneFactureClientSelect(),
                    _token : '{{ csrf_token() }}'
                },
                dataType: 'json',
                beforeSend : progressHandler(),
                success: function(response) {

                    if (response.success == 1) {

                        notif('danger', 'Erreur', 'Vous n\'avez pas le droit d\'éffectuer cette opération')
                    }else if(response.success == 2){

                        notif('danger', 'Erreur', 'Aucune expédition à clôturer')
                    }else if(response.success == 3){

                        notif('success', 'Succès', 'Clôture éffectuée');
                        chargerTableListeTournee(_('idSiteEnCours').value, _('checkClientGarde').checked)
                    }else{

                        notifError(response.msg)
                    }

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

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

        function annulerConfirmMdp(){

            $('#modalInfoExpeditionEnAttente').modal('show')
        }

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

            let value = this.checked

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

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

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

            if (listeLigneFactureClientSelect().length == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes de facture à clôturer')
                return 0
            }

            if (_('idSiteEnCours').value == 1) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un site de vente')
                return 0
            }

            $('#modalInfoExpeditionEnAttente').modal('hide')

            confirmMdp('{{ csrf_token() }}', cloturerPrepaParFacture, annulerConfirmMdp, 'Voulez-vous clôturer la préparation en cours ?')
        })

    </script>

    <!-- Script de modal expédition en attente à récupérer sur site -->
    <script>

        function listeLigneSelectionneModalRecupererSite(){

            let dataIDFACTURE = []
            let dataIDCLIENT = []
            let dataNomClient = []

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

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

                if(value.checked == true){

                    dataIDFACTURE.push(value.getAttribute('data-id'))
                    dataIDCLIENT.push(value.getAttribute('data-IDCLIENT'))
                    dataNomClient.push(value.getAttribute('data-NomClient'))
                }
            })

            return [dataIDFACTURE, dataIDCLIENT, dataNomClient]
        }

        function chargerTableExpeditionEnAttenteARecupererSurSite(){

            let formModalExpeditionEnAttenteARecupererSite = new FormData(_('formModalExpeditionEnAttenteARecupererSite'))
            formModalExpeditionEnAttenteARecupererSite.append('_token', '{{ csrf_token() }}')

            $.ajax({

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

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

                        $('#tableExpeEnAttenteARecupererSite').DataTable().destroy()
                        tableExpeEnAttenteARecupererSite =  $("#tableExpeEnAttenteARecupererSite").DataTable({

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

                                paginate: {
                                    first: "",
                                    previous: "Pr&eacute;c&eacute;dent",
                                    next: "Suivant",
                                    last: ""
                                },
                                aria: {
                                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                                },
                                search: "Rechercher&nbsp;:",
                            },
                            lengthChange: false,
                            pageLength : 25,
                            "data": obj,
                            'columns': [

                                {
                                    data: 'action',
                                    className : 'text-center'
                                },
                                {
                                    data: 'NomAgence'
                                },
                                {
                                    data: 'NomClient'
                                },
                                {
                                    data: 'DateCommandeClientFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NumeroCommandeClient'
                                },
                                {
                                    data: 'NumeroFactureClient'
                                },
                                {
                                    data: 'TypeFactureClientFormat'
                                },
                                {
                                    data: 'NbreColisBacsFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NbreColisCartonsFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NbreColisFormat',
                                    className: 'text-center'
                                }
                            ],
                            order: [],
                            initComplete: function(settings, json) {
                            
                                completeHandler()
                            }
                        })

                    }else{

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

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

        _('btnModalCdeARecupererSurSite').addEventListener('click', function(){
            
            chargerSelectAgence(1)
            chargerSelectClient(0)
            chargerTableExpeditionEnAttenteARecupererSurSite()
            $('#modalExpeditionEnAttenteRecupererSite').modal('show')
        })

        // Actualiser la table expédition en attente à récupérer sur site

        _('formModalExpeditionEnAttenteARecupererSite').addEventListener('submit', function(e){

            e.preventDefault()

            chargerTableExpeditionEnAttenteARecupererSurSite()
        })

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

            chargerTableExpeditionEnAttenteARecupererSurSite()
        })

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

            chargerTableExpeditionEnAttenteARecupererSurSite()
        })

        // Recupérer la commande
        $(document).on('click', '.btnRecupererModal', function(){

            if (_('IDAGENCE').value <= 1) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un site de vente')
                return 0
            }

            listeFactureSelect = listeLigneSelectionneModalRecupererSite()

            if (listeFactureSelect[0].length == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les factures à récupérer')
                return 0
            }

            IDCLIENT = 0
            var NomClient

            listeFactureSelect[1].forEach(element => {
                
                if (IDCLIENT == 0) {
                    
                    IDCLIENT = element
                    NomClient = listeFactureSelect[2][0]
                }else if (IDCLIENT != 0 && IDCLIENT != element) {
                    
                    notif('danger', 'Erreur', 'Veuillez sélectionner les factures d\'un même client')
                    IDCLIENT = -1
                }
            });

            if (IDCLIENT == -1) {

                return 0
            }

            $('#modalExpeditionEnAttenteRecupererSite').modal('hide')

            function annulerConfirmMdp(){

                $('#modalExpeditionEnAttenteRecupererSite').modal('show')
            }

            function ouvreModalDetailExpe(){

                _('nomClientDetailExpe').innerHTML = NomClient

                $('#modalDetailExpeditionClient').modal('show')
            }

            confirmMdp('{{csrf_token()}}', ouvreModalDetailExpe, annulerConfirmMdp, 'Voulez-vous clôturer la préparation en cours')
        })

        function validerExpeditionClient(){

            $.ajax({

                url: '{{ route("validerExpeditionClient") }}',
                type: 'POST',
                data : {
                    IDCLIENT : IDCLIENT,
                    IDAGENCE : _('IDAGENCE').value,
                    listeFactureClient : listeFactureSelect[0],
                    ReceptionnePar : _('receptionnePar').value,
                    ObservationLivraison : _('observationLivrai').value,
                    _token : '{{ csrf_token() }}'
                },
                dataType: 'json',
                beforeSend : progressHandler(),
                success: function(response) {

                    if (response.success == 1) {
                        
                        notif('success', 'Succès', 'Clôture de la préparation de l\'expédition éffectuée avec succès')
                        chargerTableExpeditionEnAttenteARecupererSurSite()
                    }else{

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

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

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

            _('receptionnePar').value = ''
            _('observationLivrai').value = ''
            $('#modalDetailExpeditionClient').modal('hide')
            validerExpeditionClient()
            $('#modalExpeditionEnAttenteRecupererSite').modal('show')
        })
    </script>

    <!-- Script d'ajouter la sélection à une expédition en attente -->
    <script>

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

            if (_('idSiteEnCours').value == 1) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un site de vente')
                return 0
            }

            if (listeLigneFactureClientSelect().length <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner des factures avant')
                return 0
            }

            $.ajax({

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

                    if (response.success == 1) {
                        
                        $('#IDEXPEDITIONTOURNEE').html('')
                        $('#IDEXPEDITIONTOURNEE').append('<option value="0">Sélectionner une tournée</option>')
                        $.each( response.data, function(key, value){

                            $('#IDEXPEDITIONTOURNEE').append('<option value="'+value.IDEXPEDITIONTOURNEE+'">'+value.NumeroExpediTionTournee+'</option>')
                        })

                        $('#IDEXPEDITIONTOURNEE').select2({
                            dropdownParent: $("#modalChoixTournee")
                        })

                        $('#modalInfoExpeditionEnAttente').modal('hide')
                        $('#modalChoixTournee').modal('show')
                    }else{

                        notifError(response.msg)
                    }

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

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

        $(document).on('click', '.closeModalChoixTournee', function(){
            
            $('#modalInfoExpeditionEnAttente').modal('show')
        })

        // Valider le choix de la tournée 
        _('validerChoixTournee').addEventListener('click', function(){

            $.ajax({
                url: '{{ route("CloturePreparationAjoutTournee") }}',
                type: 'POST',
                data : {

                    IDAGENCE : _('idSiteEnCours').value,
                    IDEXPEDITIONTOURNEE : _('IDEXPEDITIONTOURNEE').value,
                    listeFactureClient : listeLigneFactureClientSelect(),
                    _token : '{{ csrf_token() }}'
                },
                dataType: 'json',
                beforeSend : progressHandler(),
                success: function(response) {

                    if (response.success == 2) {
                        notif('success', 'Succès', 'Opération éffectuée avec succès')
                        $('.closeModalChoixTournee').click()
                        chargerTableExpeditionEnAttenteARecupererSurSite()
                    }else if(response.success == 1){

                        notif('danger', 'Erreur', '')
                    }else{
                        notifError(response.msg)
                    }
                    completeHandler()
                },
                error : function(error){
                    notifError(error.responseText)
                    completeHandler()
                }
            })
        })

        $(document).on('click','.btn-export-expedition-attente',function(){
            var data =  remplissage_avec_data_columns_DataTable('tableExpeditionEnAttente')
            const filename =file_name("EXPEDITION_EN_ATTENTE");
            download_excel_file('{{route("expedition_en_attente.export")}}', data, filename)
        })
    </script>

@endsection