@extends('partials/app')
@section('capsule')
    {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::: ESPACE RECHERCHE DE DATE ::::::::::::::::::::::::::::::::::::::::::::::  --}}
    <div class="heigthSpace">

        <div class="section">


            <!-- * Dialog Basic -->
            <div id="loader_custom" style="display: none">
                {{-- <img src="assets/img/loading-icon.png" alt="icon" class="loading-icon"> --}}
                <div style="background: #ffffff;width:200px; height:80px;border-radius:15px"
                    class="d-flex justify-content-center align-items-center">
                    <div class="spinner-border " style="color:red" role="status"></div>
                    <p class="mt-2 mx-2">Chargement...</p>
                </div>
            </div>

            {{--::::::::::::::::::::::::::::::::::::::::::::::::::: MODAL FICHE PRODUIT  ::::::::::::::::::::::::::::::::::::::::::::::::::--}}
                <div class="modal fade modalbox"id="ModalFicheProduit" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Fiche produit</h5>
                                <a href="#" data-bs-dismiss="modal"><ion-icon name="close-circle-outline"></ion-icon>
                                    Fermer</a>
                            </div>
                            <div class="modal-body">

                                <div class="DashboardResumebox padding mb-2">
                                    <div class="d-flex">
                                        <img src="assets/img/calque7.png" style="width:20px" class="title-icon" />
                                        <div class="title">
                                            Fiche produit
                                        </div>
                                    </div>
                                </div>

                                <div id="spinnerBlock" style="margin-top:50px;display:none">
                                    <div style="display:block;margin:0 auto;color:red" class="spinner-border" role="status">
                                    </div>
                                </div>

                                <div id="data-container"></div>

                            </div>
                        </div>
                    </div>
                </div>
            {{--::::::::::::::::::::::::::::::::::::::::::::::::::: FIN MODAL FICHE PRODUIT  ::::::::::::::::::::::::::::::::::::::::::::::::::--}}

             {{--::::::::::::::::::::::::::::::::::::::::::::::::::: MODAL FICHE VENTE  ::::::::::::::::::::::::::::::::::::::::::::::::::--}}
                <div class="modal fade modalbox"id="ModalFicheVente" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content" style="background:#fff">
                            <div class="modal-header">
                                <h5 class="modal-title">Fiche de vente</h5>
                                <a href="#" data-bs-dismiss="modal"><ion-icon name="close-circle-outline"></ion-icon>Fermer</a>
                            </div>
                            <div class="modal-body">

                                <div class="DashboardResumebox2 padding mb-2">
                                    <div class="d-flex">
                                        {{-- <img src="assets/img/calque7.png" style="width:20px" class="title-icon" /> --}}
                                        {{-- <ion-icon class="iconSize title-icon" name="stats-chart-outline"></ion-icon> --}}
                                        <div class="title">
                                           Statistique de vente
                                        </div>
                                    </div>
                                </div>

                                <div id="spinnerBlock" style="margin-top:50px;display:none">
                                    <div style="display:block;margin:0 auto;color:red" class="spinner-border" role="status">
                                    </div>
                                </div>

                                <div class="skeleton-block">
                                    
                                    <div class="customloading-main-text" style="height: 45px;width:100%;"></div>

                                    <div class="d-flex justify-content-between mt-2 mb-2">
                                           <div class="customloading-main-text" style="height: 40px;margin-right:2px;"></div>
                                           <div class="customloading-main-text" style="height: 40px"></div>
                                    </div>

                                     <div class="customloading-main-text mb-2" style="height: 55px;width:100%;"></div>
                                     <div class="customloading-main-text mb-2" style="height: 55px;width:100%;"></div>
                                     <div class="customloading-main-text mb-2" style="height: 55px;width:100%;"></div>
                                     <div class="customloading-main-text mb-2" style="height: 55px;width:100%;"></div>

                                </div>

                                <div id="General-block" style="display: none">

                                            <div style="background: #E8E8E8;padding:5px;border-radius:15px;">
                                                <div class="titleH3 designationProduit"></div>
                                            </div>

                                            <input type="hidden" id="produitIDHidden">
                                            <div class="d-flex justify-content-between mt-2">
                                                <div id="DateDerniereVente" style="background: #E8E8E8;padding:10px;border-radius:15px;width:50%;margin-right:2px;text-align:center">
                                                </div>

                                                <div id="venteMoyenne" style="background: #E8E8E8;padding:10px;border-radius:15px;width:50%;text-align:center">
                                                </div>
                                            </div>

                                            <div class="d-flex position-relative  w-100">
                                                    <input type="text" class="form-control inputSearch daterange" id="ficheVenteDateSearch" style="background:#F3F7F7">
                                                    <ion-icon class="search-icon" name="search-outline" id="searchFicheVente"></ion-icon>
                                                </div>

                                            <div id="dataFicheVente-container" style="width: 100%;height:50vh;overflow:scroll;">
                                            </div>

                                            <div class="text-dark fw-bold text-center" style="padding:40px">
                                              Statistique mensuel sur 2 ans
                                            </div>
                                            <div id="chartContainer" style="height: 470px; width: 100%;overflow-x:scroll"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {{--::::::::::::::::::::::::::::::::::::::::::::::::::: FIN MODAL FICHE VENTE  ::::::::::::::::::::::::::::::::::::::::::::::::::--}}


            {{--::::::::::::::::::::::::::::::::::::::::::::::::::: MODAL FICHE ACHAT  ::::::::::::::::::::::::::::::::::::::::::::::::::--}}
                <div class="modal fade modalbox"id="ModalFicheAchat" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content" style="background:#fff">
                            <div class="modal-header">
                                <h5 class="modal-title">Fiche d'achat</h5>
                                <a href="#" data-bs-dismiss="modal"><ion-icon name="close-circle-outline"></ion-icon>Fermer</a>
                            </div>
                            <div class="modal-body">

                                <div class="DashboardResumebox2 padding mb-2">
                                    <div class="d-flex">
                                        {{-- <img src="assets/img/calque7.png" style="width:20px" class="title-icon" /> --}}
                                        {{-- <ion-icon class="iconSize title-icon" name="stats-chart-outline"></ion-icon> --}}
                                        <div class="title">
                                           Statistique d'achats
                                        </div>
                                    </div>
                                </div>

 
                                <div class="skeleton-block">
                                    
                                    <div class="customloading-main-text" style="height: 45px;width:100%;"></div>

                                    <div class="d-flex justify-content-between mt-2 mb-2">
                                           <div class="customloading-main-text" style="height: 40px;margin-right:2px;"></div>
                                           <div class="customloading-main-text" style="height: 40px"></div>
                                    </div>

                                     <div class="customloading-main-text mb-2" style="height: 55px;width:100%;"></div>
                                     <div class="customloading-main-text mb-2" style="height: 55px;width:100%;"></div>
                                     <div class="customloading-main-text mb-2" style="height: 55px;width:100%;"></div>
                                     <div class="customloading-main-text mb-2" style="height: 55px;width:100%;"></div>

                                </div>

                                <div id="General-blockAchat" style="display: none">

                                            <div style="background: #E8E8E8;padding:5px;border-radius:15px;">
                                                <div  class="titleH3 designationProduit"></div>
                                            </div>

                                            <input type="hidden" id="produitIDHidden" >
                                            <div class="d-flex justify-content-between mt-2">
                                                <div id="DateDernierAchat" style="background: #E8E8E8;padding:10px;border-radius:15px;width:50%;margin-right:2px;text-align:center">
                                                </div>

                                                <div id="AchatMoyenMensuel" style="background: #E8E8E8;padding:10px;border-radius:15px;width:50%;text-align:center">

                                                </div>
                                            </div>

                                            <div class="d-flex position-relative  w-100">
                                                    <input type="text" class="form-control inputSearch daterange" id="ficheVenteDateSearch" style="background:#F3F7F7">
                                                    <ion-icon class="search-icon" name="search-outline" id="searchFicheVente"></ion-icon>
                                                </div>

                                                <div id="dataFicheAchat-container" style="width: 100%;height:50vh;overflow:scroll;">
                                            </div>

                                            <div class="text-dark fw-bold text-center" style="padding:40px">
                                              Statistique mensuel sur 2 ans
                                            </div>

                                        {{-- <div style="width: 100%;overflow:scroll">
                                            <div id="chartContainer" style="height: 370px; width: 100%;"></div>
                                        </div> --}}
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            {{--::::::::::::::::::::::::::::::::::::::::::::::::::: FIN MODAL FICHE ACHAT  ::::::::::::::::::::::::::::::::::::::::::::::::::--}}


            <div class="DashboardResumebox padding mb-2">
                <div class="d-flex">

                    {{-- <ion-icon name="cube-outline" class="title-icon"></ion-icon> --}}
                    <img src="assets/img/calque7.png" style="width:20px" class="title-icon" />
                    <div class="title">
                        Catalogue produit
                    </div>
                </div>
            </div>

            <div class="d-flex mb-2">
                {{-- <ion-icon class="chevronSize" name="chevron-back-outline"></ion-icon> --}}
                <div class="d-flex position-relative  w-100">
                    <input type="text" class="form-control inputSearch " id="InputRecherche"
                        placeholder="Rechercher un produit">
                    <ion-icon class="search-icon" name="search-outline" id="IconRecherche"></ion-icon>
                </div>
                <a href="#" class="card-drop openCritereModal" data-bs-toggle="dropdown" id="dropdownButton"
                    aria-expanded="false">
                    <ion-icon name="options-outline" class="chevronSize mx-2 text-gray"></ion-icon>
                </a>

                <ul class="dropdown-menu dropdown-menu-end w-75 dropdown-filter"
                    style="background:#424242;padding:12px;border-radius:20px">

                    <div class="text-white d-flex justify-content-between">
                        <div class="d-flex text-white">
                            <ion-icon name="options-outline" style="font-size:20px;margin-right:8px"></ion-icon>
                            <span>Plus de critère</span>
                        </div>
                        <div>
                            <ion-icon name="close-outline" id="closeDropdown"
                                style="font-size:20px;margin-right:8px"></ion-icon>
                        </div>
                    </div>
                    <li>
                        <div class="form-group boxed">
                            <div class="input-wrapper">
                                <input type="text" id="inputSearchCritere" class="form-control"
                                    placeholder="Rechercher un produit" style="border-radius:25px">
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="form-group boxed">
                            <div class="input-wrapper">
                                <select class="form-control custom-select" id="FamilleProduit"
                                    style="border-radius:25px">
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>

                        <div class="form-group boxed">
                            <div class="input-wrapper">
                                <select class="form-control custom-select" id="EmplacementProduit"
                                    style="border-radius:25px">
                                </select>
                            </div>
                        </div>

                    </li>

                    <form>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="niveauStock" id="StockSuperieurZero"
                                value=">;0">
                            <label class="form-check-label text-white" for="StockSuperieurZero" style="font-size:13px">
                                Stock supérieur à 0
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="niveauStock" id="StockInferieurZero"
                                value="<;0">
                            <label class="form-check-label text-white" for="StockInferieurZero" style="font-size:13px">
                                Stock inférieur à 0
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="niveauStock" id="StockEgalZero"
                                value="=;0">
                            <label class="form-check-label text-white" for="StockEgalZero" style="font-size:13px">
                                Stock égal à 0
                            </label>
                        </div>


                        <li>
                            <div class="d-flex justify-content-center mt-2">

                                <button type="button" id="filtrerParCritere" class="btn btn_background">Appliquer les
                                    filtres</button>

                                <button type="button" id="reinitialiserFiltre"
                                    class="btn btn_background mx-2">X</button>

                            </div>
                        </li>
                    </form>
                </ul>


            </div>

            @include('screens/error_screen')

            <div id ="containerData">

                <div class="DashboardResumebox2">
                    <div class="d-flex justify-content-center">
                        <h5 style="color:#fff;"><span id="nbreProduit"></span> Produit(s) trouvé(s)</h5>
                    </div>
                </div>
                <div class="DashboardListbox  mb-4">

                    <div class="text-center mt-3 empty-message">
                        <img src="{{ asset('assets/img/empty.png') }}" class="img-fluid" style="width: 50%;">
                        <p>Aucun produit pour l'instant</p>
                    </div>

                </div>

            </div>
        </div>

    </div>

    {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::: FIN ESPACE RECHERCHE DE DATE ::::::::::::::::::::::::::::::::::::::::::::::  --}}

    @include('partials/bottomBar')
@endsection

@section('script')

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

            $('.dropdown-filter').on('click', function(event) {
                event.stopPropagation();
            });
            $('#closeDropdown').on('click', function() {
                $('#dropdownButton').dropdown('hide');
            });

            recueprationFiltreElement();

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

                if ($('#InputRecherche').val().length >= 3) {

                    var $recherche = $('#InputRecherche').val()
                    recuperationProduit($recherche, '')
                } else {
                    showToast("Erreur", 'Taper au moins 3 carractères', "bg-danger");
                }
            })

            $('.openCritereModal').on('click', function() {
                var recherche = $('#InputRecherche').val()
                $('#inputSearchCritere').val(recherche)
            })

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

                $('#dropdownButton').dropdown('hide');
                var rechercheCritere = $('#inputSearchCritere').val().trim();

                var niveau_stock = '';

                if ($('#StockSuperieurZero').prop('checked')) {
                    niveau_stock = '>;0';
                } else if ($('#StockInferieurZero').prop('checked')) {
                    niveau_stock = '<;0';
                } else if ($('#StockEgalZero').prop('checked')) {
                    niveau_stock = '=;0';
                }

                if (rechercheCritere.length === 0) {
                    rechercheCritere = $('#InputRecherche').val().trim();
                }

                if (rechercheCritere.length < 3) {

                    $('#inputSearchCritere').focus();
                    showToast("Erreur", "Taper au moins 3 caractères", "bg-danger");
                } else {
                    recuperationProduit(rechercheCritere, niveau_stock);
                }
            });

            $('#reinitialiserFiltre').on('click', function() {
                $('#StockSuperieurZero').prop('checked', false)
                $('#StockEgalZero').prop('checked', false)
                $('#StockEgalZero').prop('checked', false)
                recueprationFiltreElement()
            })

            $('.btnRetry').on('click', function() {
                var $recherche = $('#InputRecherche').val()
                recuperationProduit($recherche, '')
                recueprationFiltreElement()
            })

            $(document).on('click','#showModalFicheAchat',function(){
                 var $idproduit = $(this).data('id')
                 $dateDeb = $("#ficheVenteDateSearch").val().slice(0,10)
                 $date_fin = $("#ficheVenteDateSearch").val().slice(12,23)
                 $.ajax({
                    type: "POST",
                    url: "{{route('statAchat.get')}}",
                    headers: {
                      "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    beforeSend:function(){
                        $('.skeleton-block').css('display','block')
                        $('#General-blockAchat').css('display','none')
                    },
                    data: {
                            idproduit:$idproduit,
                            date_debut: $dateDeb,
                            date_fin  : $date_fin
                        },
                    dataType: "JSON",
                    success: function (resp) {
                          $('#dataFicheAchat-container').html('')
                       
                        $.each(resp.data.TabHistoAchat,function(key,value){
                           
                            $('#dataFicheAchat-container').append(`
                                <div class="d-flex justify-content-between mt-1">
                                    <div style="background:#F3F7F7; padding:10px;border-radius:15px 0px 0px 15px;width:81%">
                                        <div class="text-size1_">BL : <span style="color:#06919a;" class="fw-bold">${value.NumeroBL} </span> | HT : <span style="color:#06919a;" class="fw-bold">${formatNumber(value.MontantHT)}</span></div>
                                        <div class="text-size2"> F : <span class="text-dark" style="font-weight:bold">${value.NomFournisseur}</span> -  D : <span  class="text-dark" style="font-weight:bold">${value.DateBL}</span></div>
                                        <div class="text-size2">${value.CreeLe} - ${value.NomOperateur} </div>
                                    </div>
                                    <div class="d-flex justify-content-center align-items-center flex-column" style="background:#F3F7F7; padding:10px;border-radius:0px 15px 15px 0px;width:18%;">
                                       <div class="text-dark fw-bold text-size1">${value.QteBL}</div>
                                       <div style="color:#06919a;font-weight:bold"> ${formatNumber(value.PrixAchatHT)} </div>
                                    </div>
                                </div>
                            `)
                        })

                        var annee1 = [];
                        var annee2 = [];
                        let anneEncours = new Date().getFullYear();
                        let anneePrecedente = new Date().getFullYear() - 1;

                          $.each(resp.data.TabStatAchat,function(key,values){
                                   annee1.push({
                                    y    : values.QteAn1,
                                    label: values.Mois
                                   })  

                                   annee2.push({
                                    y    : values.QteAn2,
                                    label: values.Mois
                                   })      
                          })

                        graphe(annee1,annee2,anneEncours,anneePrecedente)

                        if(resp.data.TabStatAchat.length ==0){
                            $('#dataFicheVente-container').css('display','none')
                        }

                      
                        $('.skeleton-block').css('display','none')
                        $('#General-blockAchat').css('display','block')
                    }
                 });
                $('#ModalFicheAchat').modal('show')
            })

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

                $produit = $(this).data('id')
                $('#data-container').html('')
                $('#ModalFicheProduit').modal('show')
                $.ajax({
                    type: "POST",
                    url: "{{ route('produitDetail.get') }}",
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    data: {
                        idprduit: $produit
                    },
                    dataType: "JSON",
                    beforeSend: function() {
                        $('#spinnerBlock').css('display', 'block')
                    },
                    success: function(resp) {
                        $('#spinnerBlock').css('display', 'none')
                        var statutProduit = resp.data[0].ProduitEnVeille == 1 ? '<span class="badge bg-danger">EN VEILLE</span>' : ''
                        $('#venteMoyenne').html('VM : <span class="text-dark fw-bold">'+resp.data[0].VenteMoyenne+'</span>')
                        $('#DateDerniereVente').html('DV : <span class="text-dark fw-bold">'+resp.data[0].DateDerniereVente+'</span>')

                        $('#DateDernierAchat').html('DA   : <span class="text-dark fw-bold">12/05/2021</span>')
                        $('#AchatMoyenMensuel').html('AMM : <span class="text-dark fw-bold">5000</span>')

                        $('.designationProduit').text(resp.data[0].DenominationProduit)
                        $('#data-container').append(`

                                <div class="d-flex justify-content-between">
                                    <div>Désignation</div>

                                    <div class="d-flex justify-content-between">
                                        ${statutProduit}
                                        <ion-icon class="iconSize ml-2" name="print-outline"></ion-icon>
                                    </div>
                                </div>

                                <div style="background: #fff;padding:10px;border-radius:15px;">
                                    <div id="designation" class="titleH3">${resp.data[0].DenominationProduit}</div>
                                </div>

                                <div class="d-flex justify-content-between mt-2">

                                    <div>
                                        <div>Stock <span style="color:#06919A">A</span></div>
                                        <div id="stockA" style="color:#06919A" class="fiche-produit-section1 fw-bold">${resp.data[0].StockTotal}</div>
                                    </div>


                                    <div>
                                        <div>S. mini.</div>
                                        <div id="SeuilMini" class="fiche-produit-section1 fw-bold">${resp.data[0].SeuilReapproMini}</div>
                                    </div>


                                    <div>
                                        <div>S. maxi.</div>
                                        <div id="SeuilMaxi" class="fiche-produit-section1 fw-bold">${resp.data[0].SeuilReapproMaxi}</div>
                                    </div>

                                    <div>
                                        <div>Colisage</div>
                                        <div id="Colisage" class="fiche-produit-section1 fw-bold">${resp.data[0].ColisageProduit}</div>
                                    </div>
                                </div>
                                <hr>

                                <div class="d-flex justify-content-between mt-2">

                                    <div>
                                        <div>P. d’achat</div>
                                        <div id="prixAchat" class="fiche-produit-section2 fw-bold">${formatNumber(resp.data[0].PrixUnitAchatHT)}</div>
                                    </div>

                                    <div>
                                        <div>P. vente TTC</div>
                                        <div id="prixVente" class="fiche-produit-section2 fw-bold" style="color:#06919A">${formatNumber(resp.data[0].PrixUnitVenteTTC1)}</div>
                                    </div>

                                    <div>
                                        <div>T. marq.</div>
                                        <div id="TauxMarque" class="fiche-produit-section2 text-center fw-bold">${resp.data[0].TauxMarque} %</div>
                                    </div>

                                    <div>
                                        <div>TVA</div>
                                        <div id="tva"style="background: #fff;padding:10px;border-radius:15px;text-align:right;font-weight:bold;color:black;">${resp.data[0].TauxTaxeProduit} %</div>
                                    </div>
                                </div>
                                <hr>

                                <div class="d-flex justify-content-between mt-2">
                                    <div>
                                        <div>Code 1</div>
                                        <div id="code1" class="fiche-produit-section3 fw-bold">${resp.data[0].CodeProduit1}</div>
                                    </div>

                                    <div>
                                        <div>Code 2</div>
                                        <div id="code2" class="fiche-produit-section3 fw-bold">${resp.data[0].CodeProduit2}</div>
                                    </div>

                                    <div>
                                        <div>Code EAN 13</div>
                                        <div id="codeEAN" class="fiche-produit-section3 fw-bold">${resp.data[0].CodeProduitsEAN}</div>
                                    </div>
                                </div>
                                <hr>


                                <div class="d-flex justify-content-between mt-3">

                                    <div class="d-flex flex-column justify-content-center align-items-center" id="showModalFicheVente" data-id="${resp.data[0].IDPRODUIT}">
                                        <div class="fiche-produit-section4"><ion-icon class="iconSize" name="stats-chart-outline"></ion-icon></div>
                                        <div>Ventes</div>
                                    </div>

                                    <div class="d-flex flex-column justify-content-center align-items-center" id="showModalFicheAchat" data-id="${resp.data[0].IDPRODUIT}">

                                        <div class="fiche-produit-section4"><ion-icon class="iconSize" name="cart-outline"></ion-icon></div>
                                        <div>Achats</div>
                                    </div>

                                    <div class="d-flex flex-column justify-content-center align-items-center">
                                        <div class="fiche-produit-section4"><ion-icon class="iconSize" name="create-outline"></ion-icon></div>
                                        <div>Corrections</div>
                                    </div>
                                    <div class="d-flex flex-column justify-content-center align-items-center">

                                        <div class="fiche-produit-section4"><ion-icon class="iconSize" name="newspaper-outline"></ion-icon></div>
                                        <div>Commandes</div>
                                    </div>
                                </div>

                        `)
                    },
                    error: function(xhr) {

                    }
                });


            })

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

                $idproduit = $(this).data('id')
                $('#produitIDHidden').val($idproduit)
                $dateDeb = $("#ficheVenteDateSearch").val().slice(0,10)
                $date_fin = $("#ficheVenteDateSearch").val().slice(12,23)
                $('#ModalFicheVente').modal('show')
                 recuperationFicheVente($idproduit,$dateDeb,$date_fin)
            })

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

                $dateDeb = $("#ficheVenteDateSearch").val().slice(0,10)
                $date_fin = $("#ficheVenteDateSearch").val().slice(12,23)
                recuperationFicheVente( $('#produitIDHidden').val(),$dateDeb,$date_fin)
            })

           

        })

        function recuperationProduit($rechereche, $niveau_stock) {
            $.ajax({
                type: "POST",
                url: "{{ route('produit.get') }}",
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                data: {

                    search: $rechereche,
                    FamilleProduit: $('#FamilleProduit').val(),
                    EmplacementProduit: $('#EmplacementProduit').val(),
                    niveau_stocks: $niveau_stock,

                },
                beforeSend: function() {


                    $('#errorBlock').css('display', 'none')
                    $('#EmptyBlock').css('display', 'none')
                    $('#loader_custom').css('display', 'flex')

                },
                success: function(resp) {


                    $('.DashboardListbox').html('')

                    if (resp.data.length == 0) {

                        $('.DashboardListbox').append(`

                             <div class="text-center mt-3 empty-message">
                                    <img src="{{ asset('assets/img/empty.png') }}" class="img-fluid" style="width: 50%;">
                                    <p>Aucun produit pour l'instant</p>
                                </div>
                         `)

                    }
                    var nbreProduit = 0;
                    $.each(resp.data, function(key, value) {
                        nbreProduit++
                        var prixTotal = value.StockTotal
                        var etatPrix = `<h6 style="color:#06919a;font-weight:bold">${formatNumber(prixTotal)}</h6>`
                        designation = '<h4 class="text-size1 fw-bold">' + value.DenominationProduit + '</h4>'
                        if (prixTotal < 0) {

                            etatPrix    =` <h6 style="color:red;font-weight:bold" >${formatNumber(prixTotal)}</h6>`
                            designation = '<h4 class="text-size1_" style="color:red">' + value.DenominationProduit + '</h4>'
                        }

                        if (prixTotal == 0) {

                            etatPrix    =` <h6 style="color:black;font-weight:bold" >${formatNumber(prixTotal)}</h6>`
                            designation = '<h4 class="text-size1_">' + value.DenominationProduit + '</h4>'
                        }

                        var hr = ''
                        if (resp.data.length - 1 != key) {
                            hr = `<hr style="margin-top: -1px;">`
                        }

                        if (key == 0) {

                            $('.DashboardListbox').append(`
                
                                <div class="row mt-1" >

                                        <div class="col-md-7" id="showProduitDetail" data-id="${value.IDPRODUIT}">
                                            ${designation}
                                            <h4 class="text-size2" style="margin-top:-7px;padding-bottom:4px">PA : <span style="color:#06919a">${value.PrixUnitAchatHT}</span> -
                                            PV : <span style="color:#06919a">${value.PrixUnitVenteTTC1}</span> </h4>
                                        </div>

                                            <div class="col-md-1">
                                            <div style="border-left:0.4px solid #424242; height:20px;margin-top:8px"></div>
                                            </div>

                                        <div class="col-md-3  d-flex justify-content-center align-items-center">
                                            ${etatPrix}
                                        </div>

                                        <div class="col-md-1 text-end">
                                                <a href="#" class="card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <ion-icon name="ellipsis-vertical-outline" class="text-gray" style="margin-top:15px;margin-right:7px"></ion-icon>
                                                </a>
                                                <ul class="dropdown-menu dropdown-menu-end" style="background:#424242">
                                                    <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-pencil font-size-16 text-success me-1"></i> Statistique de vente</a></li>
                                                    <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i> Statistique de vente</a></li>
                                                    <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>Déconditionnement</a></li>
                                                    <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>Corrections de stock</a></li>
                                                </ul>
                                        </div>
                                
                                </div>
                                ${hr}
                            `)
                        } else {

                            $('.DashboardListbox').append(`
                                  <div class="row" style="margin-top:-14px;" >

                                                    <div class="col-md-7" style="margin-top:8px" id="showProduitDetail" data-id="${value.IDPRODUIT}">
                                                      ${designation}
                                                        <h4 class="text-size2" style="margin-top:-7px;">PA : <span style="color:#06919a">${value.PrixUnitAchatHT}</span> -
                                                        PV : <span style="color:#06919a">${value.PrixUnitVenteTTC1}</span> </h4>
                                                    </div>

                                                     <div class="col-md-1 d-flex justify-content-center align-items-center">
                                                      <div style="border-left:0.4px solid #424242; height:30%;margin-bottom:3px"></div>
                                                     </div>

                                                    <div class="col-md-3 d-flex justify-content-center align-items-center">
                                                        ${etatPrix}
                                                    </div>

                                                    <div class="col-md-1 d-flex justify-content-end align-items-center">
                                                         <a href="#" class="card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                                                                <ion-icon name="ellipsis-vertical-outline" class="text-gray" style="margin-right:7px"></ion-icon>
                                                            </a>
                                                            <ul class="dropdown-menu dropdown-menu-end" style="background:#424242">
                                                                <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-pencil font-size-16 text-success me-1"></i> Statistique de vente</a></li>
                                                                <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i> Statistique de vente</a></li>
                                                                <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>Déconditionnement</a></li>
                                                                <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>Corrections de stock</a></li>
                                                            </ul>
                                                    </div>
                                            </div>
                                            
                                          ${hr}
                            `)
                        }

                    })

                    $('#nbreProduit').text(nbreProduit)


                    $('#loader_custom').css('display', 'none')
                },
                error: function(xhr, status) {

                    $('#errorBlock').css('display', 'block')
                    $('#containerData').css('display', 'none')
                    $('#loader_custom').css('display', 'none')
                }
            });
        }

        function recueprationFiltreElement() {

            $.ajax({
                type: "POST",
                url: "{{ route('filtreElement.get') }}",
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },

                beforeSend: function() {

                    $('#loader_custom').css('display', 'flex')
                },
                success: function(resp) {

                    $('#FamilleProduit').html('')
                    $('#FamilleProduit').append('<option value ="null" >Famille de produit</option>')
                    $.each(resp.data.TabFamille, function(key, value) {
                        $('#FamilleProduit').append(
                            `<option value="${value.IDFAMILLE}">${value.NomFamille}</option>`)
                    })

                    $('#EmplacementProduit').html('')
                    $('#EmplacementProduit').append('<option value ="null">Emplacement de produit</option>')
                    $.each(resp.data.TabEmplacementRayon, function(key, value) {
                        $('#EmplacementProduit').append(
                            `<option value="${value.IDEMPLACEMENT}">${value.NomEmplacement}</option>`
                        )
                    })

                    $('#loader_custom').css('display', 'none')

                },
                error: function(xhr, status) {

                    $('#loader_custom').css('display', 'none')
                }
            });

        }

        function recuperationFicheVente($idproduit,$dateDeb,date_fin){

             $.ajax({
                    type: "POST",
                    url: "{{ route('produit_vente.get') }}",
                    data: {
                           idproduit : $idproduit,
                           date_debut: $dateDeb,
                           date_fin  : $date_fin
                           },
                    dataType: "JSON",
                     headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    beforeSend:function(){
                         $('.skeleton-block').css('display','block')
                        $('#General-block').css('display','none')
                    },
                    success: function (resp) {
                        
                        $('#dataFicheVente-container').html('')
                       
                        $.each(resp.data.TabHistoVente,function(key,value){
                            var QuantiteAvoir = value.QuantiteAvoir == 1 ?  `A:${value.QuantiteAvoir}` : ''
                            var TauxRemiseProduit = value.TauxRemiseProduit ?  `<span style="color:red;font-weight:bold">R : ${value.TauxRemiseProduit} %</span>` : ' '
                            $('#dataFicheVente-container').append(`
                                <div class="d-flex justify-content-between mt-1">
                                    <div style="background:#F3F7F7; padding:10px;border-radius:15px 0px 0px 15px;width:89%">
                                        <div class="text-dark fw-bold text-size1"> N° 129287272 - 12/09/2002  12:00</div>
                                        <div class="text-size2"> PU : <span style="color:#06919a;font-weight:bold">${formatNumber(value.PrixUnitVenteTTC)}</span> I Total : ${formatNumber(value.MontantTTC)} I ${TauxRemiseProduit} </div>
                                        <div class="text-size2">${value.DateVente}<span style="color:#06919a">  ${value.HeureVente} </span> - ${value.NomOperateur} </div>
                                    </div>
                                    <div class="d-flex justify-content-center align-items-center flex-column"  style="background:#F3F7F7; padding:10px;border-radius:0px 15px 15px 0px;width:10%;">
                                       <div class="text-dark fw-bold text-size1">${value.QuantiteVente}</div>
                                       <div style="color:#8F50FE;font-weight:bold"> ${QuantiteAvoir} </div>
                                    </div>
                                </div>
                            `)
                        })

                        var annee1 = [];
                        var annee2 = [];
                        let anneEncours = new Date().getFullYear();
                        let anneePrecedente = new Date().getFullYear() - 1;

                          $.each(resp.data.TabStatVente,function(key,values){
                                   annee1.push({
                                    y:values.QteVente1,
                                    label: values.Mois
                                   })  

                                   annee2.push({
                                    y:values.QteVente2,
                                    label: values.Mois
                                   })      
                          })

                        graphe(annee1,annee2,anneEncours,anneePrecedente)


                            if(resp.data.TabHistoVente.length ==0){
                                
                                $('#dataFicheVente-container').css('display','none')
                            }


                        $('.skeleton-block').css('display','none')
                        $('#General-block').css('display','block')
                    },
                    error:function(){

                    }
                });
        }

        function graphe($annee1,$annee2,$legende1,$legende2){

                            var chart = new CanvasJS.Chart("chartContainer", {
                                animationEnabled: true,
                                title:{
                                    {{-- text: "Statistique mensuel sur 2 ans" --}}
                                },
                                axisY: {
                                    {{-- title: "Medals", --}}
                                    includeZero: true
                                },
                                legend: {
                                    cursor:"pointer",
                                    verticalAlign:"top",
                                    itemclick : toggleDataSeries
                                },
                                toolTip: {
                                    shared: true,
                                    content: toolTipFormatter
                                },
                              
                                data: [
                                    
                                    {
                                    type: "bar",
                                    showInLegend: true,
                                    name: ""+$legende1+"",
                                    color: "#0CC0DF",
                                    dataPoints:$annee1
                                },
                                {
                                    type: "bar",
                                    showInLegend: true,
                                    name: ""+$legende2+"",
                                    color: "#CB6CE6",
                                    dataPoints:$annee2
                                }
                                
                                ]
                            });
                            chart.render();

                            function toolTipFormatter(e) {
                                var str = "";
                                var total = 0 ;
                                var str3;
                                var str2 ;
                                for (var i = 0; i < e.entries.length; i++){
                                    var str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: <strong>"+  e.entries[i].dataPoint.y + "</strong> <br/>" ;
                                    total = e.entries[i].dataPoint.y + total;
                                    str = str.concat(str1);
                                }
                                str2 = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>";
                                str3 = "<span style = \"color:Tomato\">Total: </span><strong>" + total + "</strong><br/>";
                                return (str2.concat(str)).concat(str3);
                            }

                            function toggleDataSeries(e) {
                                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                    e.dataSeries.visible = false;
                                }
                                else {
                                    e.dataSeries.visible = true;
                                }
                                chart.render();
                            }
        }
    </script>


@endsection