@extends('models')
@section('titre-page', 'Vente 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">Ventes par produit</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="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 Vendue</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-2">
                    <p class="text-muted mb-0">Site : </p>
                    <select class="form-select AgenceListSelect" id="IDAGENCE" name="idAgence"  @disabled(checkIfDroit('DG_AccesMultiSite'))>
                    </select>
                </div>
                



                <div class="col-xl-3">
                    <p class="text-muted mb-0">Mode passation : </p>
                    <select class="form-select" id="modePassation" name="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-4">
                    <p class="text-muted mb-0">Produit : </p>
                    <select class="form-select" id="produit_vpp" name="produit">

                    </select>
                </div>
                <div class="col-xl-1">
                    <p class="text-muted mb-0">PSY : </p>
                    <select class="form-select" id="psy_vpp">
                        <option selected value="0">TOUS</option>
                        <option value="1">PSY</option>
                        <option value="2">Non PSY</option>

                    </select>
                </div>
                <div class="col-xl-1">
                    <p class="text-muted mb-0">P.LISTE : </p>
                    <select class="form-select" id="pliste_vpp" name="pliste">
                        <option selected value="0">TOUS</option>
                        <option value="1">P.LISTE</option>
                        <option value="2">Non P.LISTE</option>

                    </select>
                </div>
                <div class="col-xl-1">
                    <p class="text-muted mb-0">ANS : </p>
                    <select class="form-select" id="ans_vpp" name="">
                        <option selected value="0">TOUS</option>
                        <option value="1">ANS</option>
                        <option value="2">Non ANS</option>
                    </select>
                </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-3">
                    <p class="text-muted mb-0">Client : </p>
                    <select class="Pselect2 form-select" id="ListeClient" name="Client">
                    </select>
                </div>

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

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


                <div class="col-xl-1">
                    <div class="d-flex justify-content-center">
                        <div id="BlockBtnSearch" 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" 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>
                </div>
            </div>

        </div>

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

            <table class="tablehover table table-striped text-nowrap w-100" id="TableVenteParProduit">
                <thead class="bg-thead">
                    <tr>
                        <th>CIP 1</th>
                        <th>Désignation</th>
                        <th>Total Facturée</th>
                        <th>Total UG</th>
                        <th>Total Retour</th>
                        <th>Qté Totale Vendue</th>
                        <th>Rubrique Douane</th>
                        <th>Code Douane</th>

                        <th>Statut</th>
                        <th>Bureau Achat</th>
                        <th>Laboratoire</th>
                        <th>Fournisseur</th>
                        <th>Famille</th>
                        <th>Forme</th>

                        <th>Nature</th>
                        <th>PFHT</th>
                        <th>PGHT</th>
                        <th>P.Revient HT</th>
                        <th>PRMP</th>
                        <th>Prix Cession HT</th>

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

    </div>
    </div>
@endsection

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

            listeAgence();
            listingComboClient('#ListeClient');
            recuperationBureauAchat('#ListeBureauAchat')
            listingComboPersonnel('#ListeCommerciaux')
            chargerSelectProduit()

            function chargerSelectProduit() {

                $.ajax({

                    url: '{{ route('listingProduitSimple') }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {

                        $('#produit_vpp').html('')
                        $('#produit_vpp').append('<option value="0">TOUS</option>')

                        $.each(response.data, function(key, value) {
                            $('#produit_vpp').append('<option value="' + value["IDPRODUIT"] +
                                '">' +
                                value[
                                    "DesignationProduit"] + '</option>')

                        })
                        $('#produit_vpp').select2()
                    }
                })
            }

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

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

                // On supprime le if/else et on utilise "destroy: true"
                tables = $('#TableVenteParProduit').DataTable({
                    destroy: true, // Force la (ré)initialisation avec ces paramètres
                    lengthChange : 100,
                    columnDefs: [
                        {
                            targets: [2, 3, 4, 15, 16, 17, 18, 19], // Assurez-vous que les index sont les bons
                            render: function (data, type, row) {
                                // Pour le tri et les calculs internes de DataTables
                                if (type === 'sort' || type === 'type') {
                                    // Prévention des erreurs si la donnée est vide ou nulle
                                    if (data === null || data === undefined || data === '') {
                                        return 0;
                                    }
                                    
                                    return parseFloat(
                                        data.toString()
                                            .replace(/&nbsp;/g, '')         // Supprime les entités HTML d'espace
                                            .replace(/[\s\u00A0\u202F]/g, '') // Supprime les espaces classiques et insécables
                                            .replace(',', '.')              // Remplace la virgule par un point
                                    ) || 0;
                                }
                                // Pour l'affichage, on retourne la donnée telle quelle
                                return data; 
                            }
                        }
                    ]
                });

                tables.clear().draw();

                $date = dissocierDate($('#dateInputSearch').val())
                $dateDeb = $date[0]
                $dateFin = $date[1]
                MarequetesAjax("{{ route('venteParProduit.get') }}", "GET", {
                        idAgence: $('#IDAGENCE').val(),
                        ModePassation: $('#modePassation').val(),
                        DateDeb: $dateDeb,
                        DateFin: $dateFin,
                        Client: $('#ListeClient').val(),
                        Commercial: $('#ListeCommerciaux').val(),
                        produit: $('#produit_vpp').val(),
                        psy: $('#psy_vpp').val(),
                        pliste: $('#pliste_vpp').val(),
                        ans: $('#ans_vpp').val(),
                    }, null, true, "JSON", function(resp) {
                        
                        if (resp.error) {
                            notifError(resp.msg)
                            completeHandler()
                            return false;
                        }

                        if (resp.succes) {

                            $('#QteFacture').text(formatNumberPerf(resp.dataTotaux.NbreBoites_Vendue, 0))
                            $('#QteUG').text(formatNumberPerf(resp.dataTotaux.NbreBoites_UG, 0))
                            $('#QteRetour').text(formatNumberPerf(resp.dataTotaux.NbreBoites_Retour, 0))
                            $('#QteTotalVendue').text(formatNumberPerf(resp.dataTotaux.NbreTotalVendu, 0))


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

                                // if (value.QteFacturee > 0 || value.QteUniteGratuite > 0 || value
                                //     .QteReclamation > 0) {

                                    var LibelleRubriqueDouane = ''
                                    if (value.LibelleRubriqueDouane != null) {
                                        LibelleRubriqueDouane = formatNumber(value
                                            .LibelleRubriqueDouane)
                                    }
                                    tables.row.add([
                                        value.CodeCipProduit1,
                                        value.DesignationProduit,
                                        formatNumber(value.QteFacturee, 0),
                                        formatNumber(value.QteUniteGratuite, 0),
                                        formatNumber(value.QteReclamation, 0),
                                        value.totalQteVendue,
                                        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),
                                        formatNumber(value.PrixCessionHT)
                                    ])
                                // }
                            })

                            tables.draw();

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

                            placeboutonPreferenceColonne('TableVenteParProduit', 'TableVenteParProduitShowColonne', 2)

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

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

                    function() {
                        progressHandler()

                    })
            })

            recuperationPreferenceColonneUtilisateur('TableVenteParProduit','TableVenteParProduitShowColonne')
            $(document).on('click', '.TableVenteParProduitShowColonne', function() {
            appliquerPreferenceColonne('TableVenteParProduit', 'TableVenteParProduit', $(this),'TableVenteParProduitShowColonne')
            })


            $(document).on('click', '#btn-export-vente-par-produit', function() {
                var data = remplissage_avec_row_add_DataTable('TableVenteParProduit')
                const filename = file_name("VENTE PAR PRODUIT");
                const tabs_format = {
                    P: '#,##0',
                    Q: '#,##0',
                    R: '#,##0',
                    S: '#,##0',
                    T: '#,##0'
                };
                download_excel_file('{{ route('export_global_excel.export') }}', data, filename, [],
                    tabs_format);
            })
        })
    </script>
@endsection