@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="background:rgb(240,241,247);width:100%;padding:13px; margin-bottom: 6px; border-radius:10px">
                        <br>
                        <div class="row">

                       

                           
                               
                                <div class="col-xl-3">
                                
                                        <div class="card custom-card border-top-card border-top-primary rounded-0">
                                            <div class="card-body p-3 py-2">
                                                <div class="text-center">
                                                    <p class="fs-14 text-muted mb-1">Quantité commandée</p>
                                                    <div class="d-flex align-items-center justify-content-center flex-wrap">
                                                        <div class="mb-0 fw-semibold" id="TQteCmde">0</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>


                                 <div class="col-xl-3">
                                
                                        <div class="card custom-card border-top-card border-top-primary rounded-0">
                                            <div class="card-body p-3 py-2">
                                                <div class="text-center">
                                                    <p class="fs-14 text-muted mb-1">Quantité collectée</p>
                                                    <div class="d-flex align-items-center justify-content-center flex-wrap">
                                                        <div class="mb-0 fw-semibold" id="TQteCollecte">0</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                               
                       

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

                                <div class="card custom-card border-top-card border-top-primary rounded-0">
                                    <div class="card-body p-3 py-2">
                                        <div class="text-center">
                                            <p class="fs-14 text-muted mb-1">Quantitée facturée</p>
                                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                                <div class="mb-0 fw-semibold" id="TQteFacture">0</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>


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

                               <div class="card custom-card border-top-card border-top-primary rounded-0">
                                    <div class="card-body p-3 py-2">
                                        <div class="text-center">
                                            <p class="fs-14 text-muted mb-1">Quantitée UG</p>
                                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                                <div class="mb-0 fw-semibold" id="TQteUG">0</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>



                        </div>
                    </div>

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

                        <div class="row">
                        
                            <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 text-center" style="padding :6px"
                                        id="dateInputSearch">
                            </div>
                        
                        </div>
                                
                        </div>

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

                     
                                

                                            <p class="text-muted mb-0">Produit : </p>
                            <input type="hidden" class="form-control" value="0" id="ProduitListSelect">
                                        <input type="text" class="form-control" id="ProduitAutocomplete"
                                            placeholder="3 caractères" />
                           
                            
                        </div>

                        
                    </div>

                    <div class="row">
                    
                   <div class="col-xl-3">
                      <p class="text-muted mb-0">Mode passation : </p>
                                <select class="Pselect2 form-select modePassation" id="modePassation">
                                            <option selected value="0">TOUS</option>
                                            <option value="1">TELEPHONE</option>
                                            <option value="2">EXTRANET</option>
                                            <option value="3">PHARMA-ML</option>
                                            <option value="4">TEDIS-DIRECT</option>


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

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

                        </div>

                        <div class="col-xl-1" style="margin-top:15px;">

                        
                                <div class="d-flex justify-content-end ">
                                
                                        <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                            id="FilterTracabiliteReclamationBtn"
                                            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>
                                </div>

                        </div>  

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

                <table class="tablehover table table-striped text-nowrap w-100 openModalProduit_" id="TracabiliteLigneFactureTable">
                    <thead class="bg-thead">
                        <tr>
                            <th style="display: none">IDProduit</th>
                            <th>N° facture</th>
                            <th>Date facture</th>
                            <th>Client</th>
                            <th>CIP 1</th>
                            <th>Désignation</th>
                            <th>Prix cession HT</th>
                            <th>Date de commande</th>
                            <th>N° commande</th>

                            <th>Commande saisie par</th>
                            <th>Mode passation</th>

                            <th>Nom du collecteur</th>
                            <th>Date de collecte</th>
                            <th>Heure de collecte</th>
                            <th>Qté facturée</th>
                            <th>Qté UG</th>

                            <th>Qté collectée</th>
                            <th>Qté commandée</th>
                            <th>NTSP</th>
                            <th>N° lot</th>
                            <th>Date de péremption</th>
                            <th>Nom du controlleur</th>

                            <th>Livreur</th>
                            <th>Immatriculation voiture</th>

                            <th>Date livraison</th>
                            <th>Livraison receptionnée par </th>

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

        </div>
    </div>
      
@endsection

@section('script')

<script>
$(document).ready(function(){

    listeAgence();
    recuperationClients('.client')
    AutocompleteProduit('#ProduitAutocomplete', '#ProduitListSelect');
    listingComboPersonnel('#livreur')

    divShowPer = $('#TracabiliteLigneFactureTable_filter')
                let BroDivShowPer = divShowPer.parent().prev()
                BroDivShowPer.addClass('d-flex')
                BroDivShowPer.append(
                    `
                <span class="d-flex align-items-center px-2" style="cursor : pointer;">
                            <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                            <span id="btn-export-tracabilite-ligne-facture" class="fw-bold" style="cursor : pointer;">Exporter</span>
                        </span>
                `
                )
                        placeboutonPreferenceColonne('TracabiliteLigneFactureTable', 'TracabiliteLigneFactureTableShowColonne', 2)
    $(document).on('click', '#FilterTracabiliteReclamationBtn', function() {
        tables = $("#TracabiliteLigneFactureTable").DataTable();
        tables.clear().draw();

        $date = dissocierDate($('#dateInputSearch').val())
        $dateDeb = $date[0]
        $dateFin = $date[1]
    
        MarequetesAjax("{{ route('tracabilite_ligne_facture.get') }}", "GET", {
                agence: $('#IDAGENCE').val(),
                modeCommande: $('#modePassation').val(),
                DateDeb: $dateDeb,
                DateFin: $dateFin,
                client: $('#ListeClient').val(),
                livreur: $('#livreur').val(),
                produit: $('#ProduitListSelect').val(),
            
            }, null, true, "JSON", function(resp) {

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

                    $('#TQteCmde').text(formatNumber(resp.dataTotaux.NbreBoites_Commandee_LF,0))
                    $('#TQteCollecte').text(formatNumber(resp.dataTotaux.NbreBoites_Collecte_LF,0))
                    $('#TQteFacture').text(formatNumber(resp.dataTotaux.NbreBoites_Vendue_LF,0))
                    $('#TQteUG').text(formatNumber(resp.dataTotaux.NbreBoites_UG_LF,0))
                    
                

                    //$('#QteTotalVendue').text(formatNumber(resp.dataTotaux.NbreLigne_Vendue,0))
                    
                    completeHandler()

                    $.each(resp.dataLigne, function(key, value) {
                            
                            if(value.ModeCommande == 1){
                            ModeCommande = "TELEPHONE"
                            }else if(value.ModeCommande == 2){
                                ModeCommande = "EXTRANET"
                            }else if(value.ModeCommande == 3){
                                ModeCommande = "PHARMA-ML"
                            }
                            else if(value.ModeCommande == 4){
                                ModeCommande = "TEDIS-DIRECT"
                            }else{
                                ModeCommande = "INCONNU"
                            }


                            var DateHeureFinLivraison =   value.DateHeureFinLivraison ?  formatDate(value.DateHeureFinLivraison) : value.DateHeureFinLivraison
                            tables.row.add([

                                value.IDPRODUIT,
                                value.NumeroFactureClient,
                                formatDate(value.DateFactureClient,false),
                                value.NomClient,
                                value.CodeCipProduit1,
                                value.DesignationProduit,
                                formatNumber(value.PrixCessionHT),
                                formatDate(value.DateCommandeClient),
                                value.NumeroCommandeClient,
                                value.UtilisaCommande,
                                ModeCommande,
                                value.nomCollecteur,
                                value.DateCollecte,
                                value.DateCollecte,
                                value.qtefacture,
                                value.qteUG,
                                value.qteCollecte,
                                value.qteCommande,
                                value.NumTracabilite,
                                value.NumLot,
                                value.DatePermTracabilite,
                                value.nomCollecteur,
                                value.nomLivreur,
                                value.ImmatriculeVehicule,
                                DateHeureFinLivraison,
                                value.ReceptionnePar
                            ])
                    })

                    tables.draw();
                    fixeTableHeader(tables)
                }

            }, function(error) {},

            function() {
                    progressHandler()
            })
    })

    
    recuperationPreferenceColonneUtilisateur('TracabiliteLigneFactureTable','TracabiliteLigneFactureTableShowColonne')
    $(document).on('click', '.TracabiliteLigneFactureTableShowColonne', function() {
    appliquerPreferenceColonne('TracabiliteLigneFactureTable', 'TracabiliteLigneFactureTable', $(this),'TracabiliteLigneFactureTableShowColonne')
    })


    $(document).on('click','#btn-export-tracabilite-ligne-facture',function(){
                var data =  remplissage_avec_row_add_DataTable('TracabiliteLigneFactureTable')
                const filename =file_name("TRACABILITE_LIGNE_FACTURE", "xlsx");
                download_excel_file('{{route("export_global_excel.export")}}', data, filename,['#'])
            })
})
</script>
@endsection