@extends('models')
@section('titre-page', 'Achat par produit')
@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">Achats par produit</li>
                        </ol>
                    </nav>
                </div>

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

             
                </div>
            </div>
        </div>
    </div>
    <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é Facturée</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <div class="mb-0 fw-semibold" id="QteFacture">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é Unité Gratuite</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <div class="mb-0 fw-semibold" id="QteUG">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é Retour</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <div class="mb-0 fw-semibold" id="QteRetour">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é Totale Reçue</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <div class="mb-0 fw-semibold" id="QteTotalVendue">0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="card">

        <div class="card-body">

            <div class="row g-2">

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


                </div>

                <div class="col-xl-3">
                    <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 class="col-xl-6">

                    <div class="row g-2">
                        <div class="col-xl-7">
                            <p class="text-muted mb-0">Fournisseur : </p>
                            <select class=" Pselect2 form-select" id="ListeFournisseur" name="">
                            </select>
                        </div>

                        <div class="col-xl-5">
                            <p class="text-muted mb-0">Bureaux d'achat : </p>
                            <select class="form-select" id="ListeBureauAchat" name="">
                            </select>
                        </div>
                    </div>

                </div>
                <div class="col-xl-1">
                    <div class="d-flex">
                        <div id="BlockBtnSearch" class="me-1" style="margin-top:16px">
                            <span role="button"  id="FilterVenteItemBtn"
                                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 id="BlockBtnLoad" class="me-1" style="display:none;margin-top:16px">
                            <span role="button" class="badge bg-primary d-flex justify-content-center align-items-center"
                                style="height: 33px; width:60px;">
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            </span>
                        </div>

                        <div  class="me-1"  style="margin-top:16px">
                                <span data-bs-toggle="tooltip" title="Export" role="button"
                                    id="ExportAchatParProduit"
                                    class="badge bg-success d-flex justify-content-center align-items-center"
                                    style="height: 33px; width:60px;"><i class="ri ri-file-excel-2-line"
                                        style="font-size:17px;"></i></span>
                        </div>

                    </div>
                </div>

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


                </div>

            </div>

            <div class="table-responsive mt-5">

                <table class="tablehover table table-striped text-nowrap w-100 openModalProduit" id="TableAchatParProduit">
                    <thead class="bg-thead">
                        <tr>
                            <th class="text-center" data-class="text-center" data-column="CodeCipProduit1">CIP 1</th>
                            <th class="text-center" data-class="text-start" data-column="DesignationProduit">Désignation</th>
                            <th class="text-center" data-class="text-center" data-column="QteFactureeBL">Total Facturée</th>
                            <th class="text-center" data-class="text-center" data-column="QteRetour">Total UG</th>
                            <th class="text-center" data-class="text-center" data-column="QteUG_Livree">Total Retour</th>
                            <th class="text-center" data-class="text-center" data-column="QteTotaleRecue">Qté Total Recue</th>
                            <th class="text-center" data-class="text-center" data-column="LibelleRubriqueDouane">Rubrique Douane</th>
                            <th class="text-center" data-class="text-center" data-column="CodeDroitDouane">Code Douane</th>
                            <th class="text-center" data-class="text-center" data-column="LibelleStatutProduit">Statut</th>
                            <th class="text-center" data-class="text-center" data-column="NomBureauAchat">Bureau d'achat</th>
                            <th class="text-center" data-class="text-center" data-column="NomLaboratoire">Laboratoire</th>
                            <th class="text-center" data-class="text-center" data-column="NomFournisseur">Fournisseur</th>
                            <th class="text-center" data-class="text-center" data-column="LibelleFamilleProduit">Famille</th>
                            <th class="text-center" data-class="text-center" data-column="LibelleFormeProduit">Forme</th>
                            <th class="text-center" data-class="text-center" data-column="LibelleCategorieProduit">Nature</th>
                            <th class="text-center" data-class="text-end" data-column="PrixAchatFHT">PFHT</th>
                            <th class="text-center" data-class="text-end" data-column="PrixGHT">PGHT</th>
                            <th class="text-center" data-class="text-end" data-column="PrixRevientHT">P.Revient HT</th>
                            <th class="text-center" data-class="text-end" data-column="PrixRevientHTMoyenPondere">PRMP</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
     
@endsection

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

            recuperationBureauAchat('#ListeBureauAchat')
            recuperationFournisseur('#ListeFournisseur')

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

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

                $date = dissocierDate($('#dateInputSearch').val())
                $dateDeb = $date[0]
                $dateFin = $date[1]
                MarequetesAjax("{{ route('achatParProduit.get') }}", "GET", {

                        DateDeb: $dateDeb,
                        DateFin: $dateFin,
                        Fournisseur: $('#ListeFournisseur').val(),
                        BureauxAchat: $('#ListeBureauAchat').val()
                    }, null, true, "JSON", function(resp) {

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

                        // // console.log(resp.dataLigne)
                        if (resp.succes) {

                            $('#QteFacture').text(resp.dataTotaux.T1_QteFactureeBL)
                            $('#QteUG').text(resp.dataTotaux.T1_QteUG_Facture)
                            $('#QteRetour').text(resp.dataTotaux.T1_QteLivreeBL)
                            $('#QteTotalVendue').text(resp.dataTotaux.T1_TotaleRecue)


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

                            //     var LibelleRubriqueDouane = ''
                            //     if (value.LibelleRubriqueDouane != null) {
                            //         LibelleRubriqueDouane = value.LibelleRubriqueDouane
                            //     }

                            //     tables.row.add([

                            //         value.CodeCipProduit1,
                            //         value.DesignationProduit,
                            //         value.QteFactureeBL,
                            //         value.QteRetour,
                            //         value.QteUG_Livree,
                            //         LibelleRubriqueDouane,
                            //         value.CodeDroitDouane,
                            //         value.LibelleStatutProduit,
                            //         value.NomBureauAchat,
                            //         value.NomLaboratoire,

                            //         value.NomFournisseur,
                            //         value.LibelleFamilleProduit,
                            //         value.LibelleFormeProduit,
                            //         value.LibelleCategorieProduit,
                            //         formatNumber(value.PrixAchatFHT),
                            //         formatNumber(value.PrixGHT),
                            //         formatNumber(value.PrixRevientHT),
                            //         formatNumber(value.PrixRevientHTMoyenPondere),
                            //     ])


                            // })

                            // tables.draw();
                            // new $.fn.dataTable.FixedHeader(tables);
                            // tables.fixedHeader.headerOffset(50)
                            
                            completeHandler()

                            tableCmdeClient = remplissageDataTable({
                                IdentifiantDuTableau : '#TableAchatParProduit',
                                obj : resp.dataLigne
                            })
                            placeboutonPreferenceColonne('TableAchatParProduit', 'TableAchatParProduitShowColonne', 2)
                        }

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

                    function() {
                        progressHandler()
                    })
            })
            recuperationPreferenceColonneUtilisateur('TableAchatParProduit','TableAchatParProduitShowColonne')
            $(document).on('click', '.TableAchatParProduitShowColonne', function() {
            appliquerPreferenceColonne('TableAchatParProduit', 'TableAchatParProduit', $(this),'TableAchatParProduitShowColonne')
            })


            $('#ExportAchatParProduit').on('click',function(){

                exportExcel('TableAchatParProduit','chatParProduit')
            })
        })
    </script>
@endsection