@extends('models')
@section('titre-page', 'Traçabilité des lignes de factures')
@section('content-body')
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb ">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-2">
                <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);">Contrôles</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Traçabilité des lignes de factures</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-5 col-md-8">

                    {{-- <button class="btn btn-primary" id="verifycode">check</button> --}}
                </div>
            </div>
        </div>
    </div>
    <div class="card">

        <div class="card-body">

            <div style="width:80%;display:block;margin:0 auto;margin-bottom:8px;">

                <div class="row g-2">

                    <div class="col-xl-4">

                        <div class="row g-2">

                            <div class="col-xl-5">
                                <p class="text-muted mb-0">Agence : </p>
                                <select class="form-select AgenceListSelect" id="IDAGENCE" name="IDAGENCE"  @disabled(checkIfDroit('DG_AccesMultiSite'))>
                                </select>
                            </div>

                            <div class="col-xl-7">
                                <p class="text-muted mb-0">Période : </p>
                                <input type="text" name="daterange" class="form-control" style="padding :6px"
                                    id="dateInputSearch">
                            </div>

                        </div>

                    </div>

                    <div class="col-xl-5">

                        <div class="row g-2">


                            <div class="col-xl-6">
                                <p class="text-muted mb-0">Tournée : </p>
                                <select class="Pselect2 form-select" id="tournee" name=""  @disabled(checkIfDroit('DG_AccesMultiSite'))>
                                </select>
                            </div>


                            <div class="col-xl-6">
                                <p class="text-muted mb-0">Client : </p>
                                <select class="Pselect2 form-select client" id="ListeClient" name="">
                                </select>
                            </div>

                        </div>

                    </div>

                    <div class="col-xl-2">
                        <p class="text-muted mb-0">Livreur : </p>
                        <select class="Pselect2 form-select" id="livreur" name="">
                        </select>

                       
                    </div>

                    <div class="col-xl-1">

                         <div class="d-flex justify-content-end mt-3 ">

                            <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                id="FilterTracabiliteLivraisonBtn"
                                class="badge bg-primary d-flex justify-content-center align-items-center"
                                style="height: 33px; width:60px;"><i class="ri ri-search-line"
                                    style="font-size:17px;"></i></span>

                                    <span data-bs-toggle="tooltip" title="Exporter en excel" role="button"
                                id="btnExportTracabiliteLivraison"
                                class="badge bg-success d-flex justify-content-center align-items-center ms-2"
                                style="height: 33px; width:60px;"> <i class='ri ri-file-excel-2-line  me-1' style="font-size : 13px; cursor : pointer;"></i></span>
                        </div>
                    
                    </div>

                </div>

              
            </div>
            <div class="table-responsive">

                <table class="tablehover table table-striped text-nowrap w-100" id="TracabiliteDesLivraisonTable">
                    <thead class="bg-thead">
                        <tr>
                            <th>Agence</th>
                            <th>N° tournée</th>
                            <th>Tournée</th>
                            <th>N° Exp. client</th>
                            <th>Client</th>
                            <th>Nb factures</th>
                            <th>Nb colis</th>
                            <th>N° Immatriculation</th>
                            <th>Voiture/Moto</th>
                            <th>Livreur</th>
                            <th>Date et heure d'arrivée chez le client</th>
                            <th>Temps mis entre (02) officines</th>
                            <th>Début livraison</th>
                            <th>Fin de livraison</th>
                            <th>Temps de livraison</th>
                            <th>Réceptionnée par</th>

                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {

            listeAgence();
            recuperationClients('.client')
         
            listingComboPersonnel('#livreur')

            listingComboTourneeClient('#tournee')

            divShowPer = $('#TracabiliteDesLivraisonTable_filter')
            // // Division des valeur totales
            BroDivShowPer = divShowPer.parent().prev()
            BroDivShowPer.addClass('d-flex')
            BroDivShowPer.prepend(`<div style="margin-left:125px; display:flex;flex-wrap:wrap"><span style="margin-top:4px;">Nbre de facture : </span></span>&nbsp; <div id="nbreFactures" style=" border:1px solid rgb(233,237,246);padding:5px;border-radius:5px;min-width:100px;text-align:center">0</div>\
            &nbsp;<span style="margin-top:4px;">Nbre de Bacs : </span></span>&nbsp; <div id="nbreBacs" style=" border:1px solid rgb(233,237,246);padding:5px;border-radius:5px;min-width:100px;text-align:center">0</div></div>
            `)

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

                tables = $("#TracabiliteDesLivraisonTable").DataTable();
                tables.clear().draw();

                $date = dissocierDate($('#dateInputSearch').val())
                $dateDeb = $date[0]
                $dateFin = $date[1]

                MarequetesAjax("{{ route('tracabilite_livraison.get') }}", "GET", {
                        agence: $('#IDAGENCE').val(),
                        DateDeb: $dateDeb,
                        DateFin: $dateFin,
                        client: $('#ListeClient').val(),
                        livreur: $('#livreur').val(),
                        tournee: $('#tournee').val(),
                        
                      
                    }, null, true, "JSON", function(resp) {

                            if(resp.error){
                                notifError(resp.msg)
                                completeHandler()
                                return false;
                            }

                        if (resp.succes) {

                            $('#nbreBacs').text(formatNumber(resp.dataTotaux.NbreColisTotal,0))
                            $('#nbreFactures').text(formatNumber(resp.dataTotaux.NbreFactureTotal,0))
                            
                            completeHandler()

                           $.each(resp.dataLigne, function(key, value) {

                                var Agence ="";
                                if(value.IDAGENCE ==2){
                                    Agence = "VRIDI"
                                }

                                 if(value.IDAGENCE ==3){
                                    Agence = "GAGNOA"
                                }

                                 if(value.IDAGENCE ==4){
                                    Agence = "BOUAKE"
                                }
                                var DateHeureFinLivraison = value.DateHeureFinLivraison ?
                                    formatDate(value.DateHeureFinLivraison) : value
                                    .DateHeureFinLivraison

                                var DateHeureDebutLivraison = value.DateHeureDebutLivraison ?
                                    formatDate(value.DateHeureDebutLivraison) : value
                                    .DateHeureDebutLivraison

                                    var DateHeureArriveeChezClient = value.DateHeureArriveeChezClient ?
                                    formatDate(value.DateHeureArriveeChezClient) : value
                                    .DateHeureArriveeChezClient

                                tables.row.add([

                                    Agence,
                                    value.NumeroExpediTionTournee,
                                    value.LibelleTournee,
                                    value.NumeroExpeditionClient,
                                    value.NomClient,
                                    value.leNombreFacture,
                                    value.LeNombreColis,
                                    value.ImmatriculeVehicule,
                                    value.Engin,
                                 
                                    value.nomLivreur,

                                    DateHeureArriveeChezClient,
                                    value.tempsmisEntre2Officine,

                                    DateHeureDebutLivraison,
                                    DateHeureFinLivraison,

                                    value.CTempsDeLivraison,

                                    value.ReceptionnePar,
                                    
                                ])
                            })
 
                            tables.draw();
                            fixeTableHeader(tables)
                        }

                    }, function(error) {},

                    function() {
                        progressHandler()
                    })
            })

               $(document).on('click','#btnExportTracabiliteLivraison',function(){
                var data =  remplissage_avec_row_add_DataTable('TracabiliteDesLivraisonTable')
                const filename =file_name("TRACABILITE_LIVRAISON");
                download_excel_file('{{route("export_global_excel.export")}}', data, filename)
            })
        })
    </script>
@endsection