@extends('models')
@section('titre-page', 'Traçabilité des réclamations')
@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 réclamations</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="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 tablehover w-100 openModalProduit_" id="TracabiliteReclamationTable">
                    <thead class="bg-thead">
                        <tr>
                            <th style="display:none">IDproduit</th>
                            <th>Date de réclamation</th>
                            <th>N° réclamation</th>
                            <th>Client</th>
                            <th>CIP 1</th>
                            <th>Désignation</th>
                            <th>Date de commande</th>
                            <th>N° de commande</th>
                            <th>Commande saisie par</th>

                            <th>Mode passation</th>
                            <th>Nom collecteur</th>

                            <th>Date de collecte</th>
                            <th>N° facture</th>
                            <th>Date facture</th>
                            <th>Qté réclamée</th>
                            <th>Qté facturée</th>
                            <th>Qté UG</th>
                            <th>Qté collectée</th>
                            <th>Qté commandée</th>
                            <th>Motif de réclamation</th>
                            <th>Nom du controleur</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')

                let divShowPer = $('#TracabiliteReclamationTable_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-reclamation" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                </span>
                            `)

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

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

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

                MarequetesAjax("{{ route('tracabilite_reclamation.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) {

                            $('#TQteReclame').text(formatNumber(resp.dataTotaux.NbreBoites_Retour, 0))
                            $('#TQteFacture').text(formatNumber(resp.dataTotaux.NbreBoites_Vendue, 0))
                            $('#TQteUG').text(formatNumber(resp.dataTotaux.NbreBoites_UG, 0))

                            $('#TQteCmde').text(formatNumber(resp.dataTotaux.NbreBoites_Commandee, 0))
                            $('#TQteCollecte').text(formatNumber(resp.dataTotaux.NbreBoites_Collecte,
                                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 {
                                    ModeCommande = "TEDIS-DIRECT"
                                }

                                var DateHeureFinLivraison = value.DateHeureFinLivraison ?
                                    formatDate(value.DateHeureFinLivraison) : value
                                    .DateHeureFinLivraison
                                tables.row.add([
                                    value.IDPRODUIT,
                                    formatDate(value.DateRetour, false),
                                    value.NumeroRetourClient,
                                    value.NomClient,
                                    value.CodeCipProduit1,
                                    value.DesignationProduit,
                                    formatDate(value.DateCommandeClient),
                                    value.NumeroCommandeClient,
                                    value.nomCommandeur,
                                    ModeCommande,
                                    value.nomCollecteur,
                                    formatDate(value.Datecollecte),
                                    value.NumeroFactureClient,
                                    formatDate(value.DateFactureClient, false),
                                    value.QteReclamation,
                                    value.Qtefacture,
                                    value.QteUG,
                                    value.QteCollecteeTotale,
                                    value.QteCommande,

                                    value.LibelleMotifRetour,
                                    value.nomControleur,
                                    value.NomLivreur,
                                    value.ImmatriculeVehicule,

                                    DateHeureFinLivraison,
                                    value.ReceptionnePar,
                                ])
                            })

                            tables.draw();
                            fixeTableHeader(tables)
                            placeboutonPreferenceColonne('TracabiliteReclamationTable', 'TracabiliteReclamationTableShowColonne', 2)
                        }

                    }, function(error) {},

                    function() {
                        progressHandler()
                    })
            })

            recuperationPreferenceColonneUtilisateur('TracabiliteReclamationTable','TracabiliteReclamationTableShowColonne')
            $(document).on('click', '.TracabiliteReclamationTableShowColonne', function() {
            appliquerPreferenceColonne('TracabiliteReclamationTable', 'TracabiliteReclamationTable', $(this),'TracabiliteReclamationTableShowColonne')
            })


            $(document).on('click', '#btn-export-tracabilite-reclamation', function(){
                var data = remplissage_avec_row_add_DataTable('TracabiliteReclamationTable')
                const filename = file_name("TRACABILITE-RECLAMATION");
                //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