@extends('models')
@section('titre-page', 'Traçabilité des 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 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-4">

                        <div class="row">

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

                                <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-6">

                                <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>

                    </div>

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

                        <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 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 réclamée</p>
                                    <div class="d-flex align-items-center justify-content-center flex-wrap">
                                        <div class="mb-0 fw-semibold" id="TQteReclame">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" style="padding :6px"
                                    id="dateInputSearch">
                            </div>

                        </div>

                    </div>

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

                        <div class="row">

                            <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 class="col-xl-6">
                                <p class="text-muted mb-0">Livreur : </p>
                                <select class="Pselect2 form-select" id="livreur" name="">
                                </select>
                            </div>

                        </div>

                    </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="modePassation1">
                            <option 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">Motif réclamation : </p>
                        <select class="Pselect2 form-select" id="motifReclamation" name="">
                        </select>
                    </div>

                    <div class="col-xl-5">
                        <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 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="FilterTracabiliteFactureBtn"
                                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" id="TracabiliteFactureTable">
                    <thead class="bg-thead">
                        <tr>
                            <th>Date de commande</th>
                            <th>N° commande</th>
                            <th>Commande saisie par</th>
                            <th>Client</th>
                            <th>Mode passation</th>
                            <th>N° facture</th>
                            <th>Date facture</th>
                            <th>Nom controleur</th>
                            <th>Montant facture</th>
                            <th>Nbre de réclamation</th>
                            <th>Livreur</th>
                            <th>Immatriculation voiture</th>
                            <th>Date livraison</th>
                            <th>Livraison récepptionnée par</th>
                           

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

        </div>
    </div>
@endsection

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

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

            divShowPer = $('#TracabiliteFactureTable_filter')
            // // Division des valeur totales
            BroDivShowPer = divShowPer.parent().prev()
            BroDivShowPer.addClass('d-flex')
            BroDivShowPer.prepend(`<div style="margin-left:112px; display:flex">
            <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 : 13px; cursor : pointer; margin-top:-8px"></i>
            <span id="btn-export-tracabilite-facture" style="cursor : pointer;margin-top:-6px">Exporter</span></span>
            <span style="margin-top:4px;">Nbre de réclamation : </span></span>&nbsp; <div id="nbreReclamation" style=" text-align:center; border:1px solid rgb(233,237,246);padding:5px;border-radius:5px;min-width:100px">0</div></div>`)

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

                tables = $("#TracabiliteFactureTable").DataTable();
                tables.clear().draw();
                $date = dissocierDate($('#dateInputSearch').val())
                $dateDeb = $date[0]
                $dateFin = $date[1]

                MarequetesAjax("{{ route('tracabilite_facture.get') }}", "GET", {
                        agence: $('#IDAGENCE').val(),
                        modeCommande: $('#modePassation').val(),
                        DateDeb: $dateDeb,
                        DateFin: $dateFin,
                        client:  $('#ListeClient').val(),
                        livreur: $('#livreur').val(),
                        produit: $('#ProduitListSelect').val(),
                        motif:   $('#motifReclamation').val()
                    }, null, true, "JSON", function(resp) {


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

                         
                            $('#nbreReclamation').text(formatNumberPerf(resp.nbreReclamation,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 {
                                    ModeCommande = "TEDIS-DIRECT"
                                }

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

                                     var DateFactureClient = value.DateFactureClient ?
                                    formatDate(value.DateFactureClient,false) : value
                                    .DateFactureClient

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

                                     DateCommandeClient,
                                     value.NumeroCommandeClient,
                                     value.UtilisaCommande,
                                     value.NomClient,
                                     ModeCommande,
                                     value.NumeroFactureClient,
                                     DateFactureClient,
                                     value.NomControleur,
                                     formatNumberPerf(value.TotalTTC),
                                     value.LeNbreDesReclamations,
                                     value.NomLivreur,
                                     value.ImmatriculeVehicule,
                                     DateHeureFinLivraison,
                                     value.ReceptionnePar,
                                ])
                            })

                            tables.draw();
                            fixeTableHeader(tables)
                            placeboutonPreferenceColonne('TracabiliteFactureTable', 'TracabiliteFactureTableShowColonne', 2)
                        }

                    }, function(error) {},

                    function() {
                        progressHandler()
                    })
            })

recuperationPreferenceColonneUtilisateur('TracabiliteFactureTable','TracabiliteFactureTableShowColonne')
$(document).on('click', '.TracabiliteFactureTableShowColonne', function() {
   appliquerPreferenceColonne('TracabiliteFactureTable', 'TracabiliteFactureTable', $(this),'TracabiliteFactureTableShowColonne')
})


            $(document).on('click', '#btn-export-tracabilite-facture', function() {
                var data = remplissage_avec_row_add_DataTable('TracabiliteFactureTable')
                const filename = file_name("TRACABILITE-FACTURE");
                //const tabs_format = { P: '#,##0',Q: '#,##0',R: '#,##0',S: '#,##0',T: '#,##0'};
                download_excel_file('{{route("export_global_excel.export")}}', data, filename);
            })
           
        })
    </script>
@endsection