@extends('partials/app')
@section('capsule')
    <!-- Wallet Card -->

    {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::: ESPACE RECHERCHE DE DATE ::::::::::::::::::::::::::::::::::::::::::::::  --}}
    <div class="heigthSpace" >

        <div class="d-flex justify-content-between mb-2">
                <button style="border:none;background:transparent !important ;margin-top:-13px"  type="button" id="prevDate"> <ion-icon class="chevronSize" name="chevron-back-outline"></ion-icon></button>
            <div class="d-flex position-relative">
                <input type="text"  class="form-control inputSearch date" id="dateDisplay">
                <ion-icon class="search-icon" name="search-outline" id="iconSeach"></ion-icon>
            </div>
            <button style="border:none;background:transparent !important;margin-top:-13px"  id="nextDate">
                 <ion-icon class="chevronSize" name="chevron-forward-outline" ></ion-icon>
            </button>
        </div>
    </div>

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



    <!-- Stats -->

    <div class="section">

            <div id="skeleton">
                    <div class="movie--isloading">
                        <div class="loading-image"></div>
                        <div class="loading-content">
                            <div class="loading-text-container">
                                <div class="loading-main-text"></div>
                                <div class="loading-sub-text"></div>
                            </div>
                            <div class="loading-btn"></div>
                        </div>
                    </div>

                    <div class="movie--isloading">
                        <div class="loading-image"></div>
                        <div class="loading-content">
                            <div class="loading-text-container">
                                <div class="loading-main-text"></div>
                                <div class="loading-sub-text"></div>
                            </div>
                            <div class="loading-btn"></div>
                        </div>
                    </div>
    
                    <div class="movie--isloading">
                        <div class="loading-image"></div>
                        <div class="loading-content">
                            <div class="loading-text-container">
                                <div class="loading-main-text"></div>
                                <div class="loading-sub-text"></div>
                            </div>
                            <div class="loading-btn"></div>
                        </div>
                    </div>
            </div>

            @include('screens/error_screen')
    </div>
    
    <div id="containerData" class="mb-4" >
    
            <div class="section" >
               
                <div class="DashboardResumebox" style="height:60px">
                    <div class="d-flex justify-content-between">

                        <div>
                            <div class="text-white">Chiffre d'affaires TTC</div>
                            <div style="color:#fff;font-size:25px;margin-top:-7px" id="ChiffreAffaireTTC"></div>
                        </div>

                        <div>
                            <div class="d-flex justify-content-between">
                               <div> <ion-icon class="DashboardResumebox_icon" style="font-size:23px" name="people-outline"></ion-icon></div>
                                <div>
                                    <h4 class="DashboardResumebox_montant" style="margin-top: 3px;margin-left:2px" id="nbreVente"></h4>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between"  style="margin-top:-7px">
                                <img src="assets/img/calque6.png"  style="width: 20px;height:20px"/>
                                <div>
                                    <h4 class="DashboardResumebox_montant" style="margin-top:3px;margin-left:2px" id="panierMoyen"></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="DashboardListbox">

                    <table style="width:100%">
                    <tr class="m-tr-border">
                        <td><div class="text-size1 text-dark">C.A. Comptant</div></td>
                        <td class="text-end" ><h6 style="margin-left: 11px" class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalComptant"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioComptant"></h6></td>
                    </tr>

                    <tr>
                        <td><div class="text-size1 text-dark">C.A. Crédit</div></td>
                        <td class="text-end"><h6 class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalMontantCredit"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioCredit"></h6></td>
                    </tr>
                    </table>
                </div>
            </div>


            <div class="section mt-2">
                <div class="DashboardListbox2">

                    <table style="width:100%">
                    <tr class="m-tr-border">
                        <td><div class="text-size1 text-dark">C.A. Hors taxe net</div></td>
                        <td class="text-end"><h6 style="margin-right: 5px"  class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalHorsTaxe"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioHorsTaxe"></h6></td>
                    </tr>

                    <tr  class="m-tr-border">
                        <td><div class="text-size1 text-dark">Remise accordée</div></td>
                        <td class="text-end"><h6 style="margin-right: 5px" class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalRemiseAccordee"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioRemiseAccordee"></h6></td>
                    </tr>

                     <tr>
                        <td><div class="text-size1 text-dark">TVA encaissée</div></td>
                        <td class="text-end"><h6 style="margin-right: 5px" class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalTaxeEncaisse"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioTaxeEncaisse"></h6></td>
                    </tr>
                    </table>
                </div>
            </div>

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

                        <div>
                            <h5 style="color:#fff;">Total des encaissements TTC</h5>
                            <h4  style="color:#fff;font-size:15px;margin-top:-7px" id="caTotalComptantNonCMU"></h4>
                        </div>

                        <div>
                            {{-- <ion-icon class="DashboardResumebox_icon" style="font-size: 40px" name="card-outline"></ion-icon> --}}

                            <img src="assets/img/calque3.png"  class="DashboardResumebox_icon" style="width: 40px"/>
                        </div>
                    </div>
                </div>
                <div class="DashboardListbox">

                    <table style="width:100%">
                    <tr class="m-tr-border">
                        <td><div class="text-size1 text-dark">C.A. Comptant</div></td>
                        <td class="text-end"><h6  class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalComptant2"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioComptant2"></h6></td>
                    </tr>

                    <tr  class="m-tr-border">
                        <td><div class="text-size1 text-dark">Comptant C.M.U</div></td>
                        <td class="text-end"><h6 class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalComptantCMU"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioComptantCMU"></h6></td>
                    </tr>

                     <tr  class="m-tr-border">
                        <td><div class="text-size1 text-dark">Différé encaissé</div></td>
                        <td class="text-end"><h6 class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalComptantDiffere"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioComptantDiffere"></h6></td>
                    </tr>

                    <tr>
                        <td><div class="text-size1 text-dark">Règlement perçu</div></td>
                        <td class="text-end"><h6 class="m-primary-color mt-1 text-size2 fw-bold" id="caTotalReglementPercu"></h6></td>
                        <td class="text-end"><h6 class="mt-1 text-size2 fw-bold" id="caRatioReglementPercu"></h6></td>
                    </tr>
                    </table>
                </div>

            </div>

            {{-- :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: SECTION VERSEMENT ::::::::::::::::::::::::::::::::::::::::::::::::::::::: --}}
             <div class="section mt-2">
                <div class="DashboardResumebox2">
                    <div class="d-flex justify-content-between">

                        <div>
                            <h5 class="text-white">Versement : <span style="color:#9ECBC8;font-weight:bold;font-size:15px" id="versement"></span></h5>
                            <h6 class="text-white" style="margin-top:-5px">Attendu : <span id="VersementAttendu"></span></h6>
                        </div>

                        <div style="margin-top:-1px">
                            <h5 class="text-white text-end">Ecart</h5>
                            <div class="d-flex">
                                <h6 class="text-white" style="border-right: 1px solid #fff;margin-right:12px;padding-right:8px;font-size:13px" id="ecart"></h6>
                                <h6 class="text-white ecartRatio" style="font-size:13px" id="ecartRatio"></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="DashboardListbox boxlistfour" style="padding-top: 25px">

                </div>

            </div>
    </div>


    </div>


    <!-- * News -->
    @include('partials/bottomBar')
@endsection


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

           
             recuperationStat($("#dateDisplay").val())

            $('.btnRetry').on('click',function(){

                  recuperationStat($("#dateDisplay").val())
            })

            $("#prevDate").click(function() {
                var $button = $(this); 
                $button.prop("disabled", true);
                 var curentInputDate = $('.inputSearch').val().trim();
                 var parts = curentInputDate.split("/");
                  var curentInputDate = new Date(parts[2], parts[1] - 1, parts[0]);
                curentInputDate.setDate(curentInputDate.getDate() - 1);
                 let newFormattedDate = formatDate(curentInputDate);
                $(".inputSearch").val(newFormattedDate);
                //updateDateDisplay();
                 recuperationStat(formatDate(curentInputDate))
            });

            $("#nextDate").click(function() {
                 var $button = $(this); 
                $button.prop("disabled", true);
                 var curentInputDate = $('.inputSearch').val().trim();
                 var parts = curentInputDate.split("/");
                  var curentInputDate = new Date(parts[2], parts[1] - 1, parts[0]);
                curentInputDate.setDate(curentInputDate.getDate() + 1);
                 let newFormattedDate = formatDate(curentInputDate);
                $(".inputSearch").val(newFormattedDate);
                recuperationStat(formatDate(currentDate))
            });

            $(document).keydown(function(e) {
                if (e.key === "ArrowLeft") {
                    $("#prevDate").click();
                } else if (e.key === "ArrowRight") {
                    $("#nextDate").click();
                }
            });

            $('#iconSeach').on('click',function(){
                recuperationStat($('.inputSearch').val())
            })

        });



        function recuperationStat($periode){

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

                      $('#skeleton').css('display', 'block')
                      $('#containerData').css('display', 'none')
                      $('#errorBlock').css('display', 'none') 

                       $('#EmptyBlock').css('display', 'none')
                },
                success: function (resp) {
                      if(resp.data.length == 0){

                        $('#skeleton').css('display', 'none')
                        $('#EmptyBlock').css('display', 'block')

                        return false
                     }
                    
                      $('#ChiffreAffaireTTC').text(formatNumber(resp.data[0].caTotalTTC))
                      $('#nbreVente').text(formatNumber(resp.data[0].caNombreVente))
                      $('#panierMoyen').text(formatNumber(resp.data[0].caPanierMoyen))

                      $('#caTotalComptant').text(formatNumber(resp.data[0].caTotalComptant))
                      $('#caRatioComptant').text(resp.data[0].caRatioComptant +' %')

                      $('#caTotalMontantCredit').text(formatNumber(resp.data[0].caTotalMontantCredit))
                      $('#caRatioCredit').text(resp.data[0].caRatioCredit +' %')
                      $('#caTotalHorsTaxe').text(formatNumber(resp.data[0].caTotalHorsTaxe))

                      $('#caRatioHorsTaxe').text(resp.data[0].caRatioHorsTaxe +' %')
                      $('#caTotalRemiseAccordee').text(formatNumber(resp.data[0].caTotalRemiseAccordee))
                      $('#caRatioRemiseAccordee').text(resp.data[0].caRatioRemiseAccordee+' %')
                      

                      $('#caTotalTaxeEncaisse').text(formatNumber(resp.data[0].caTotalTaxeEncaisse))

                      $('#caRatioTaxeEncaisse').text(resp.data[0].caRatioTaxeEncaisse +' %')

                     $('#caTotalComptantNonCMU').text(formatNumber(resp.data[0].caTotalComptantNonCMU))
                     $('#caRatioReglementPercu').text(formatNumber(resp.data[0].caRatioReglementPercu)+' %')
                     $('#caTotalReglementPercu').text(formatNumber(resp.data[0].caTotalReglementPercu))

                     $('#caTotalComptant2').text(formatNumber(resp.data[0].caTotalComptant))
                     $('#caRatioComptant2').text(resp.data[0].caRatioComptant +' %')
                     $('#caTotalComptantCMU').text(formatNumber(resp.data[0].caTotalComptantCMU))
                     $('#caRatioComptantCMU').text(resp.data[0].caRatioComptantCMU+' %')
                     $('#caTotalComptantDiffere').text(formatNumber(resp.data[0].caTotalComptantDiffere))
                     $('#caRatioComptantDiffere').text(resp.data[0].caRatioComptantDiffere+' %')

                     $('#versement').text(formatNumber(resp.data[0].data_encaissement.caTotalVerse))
                     $('#VersementAttendu').text(formatNumber(resp.data[0].data_encaissement.caTotalAttendu))
                     $('#ecart').text(formatNumber(resp.data[0].data_encaissement.caTotalEcart))
                     $('#ecartRatio').text(formatNumber(resp.data[0].data_encaissement.caRatioEcart)+' %')

                     if(resp.data[0].data_encaissement.caRatioEcart < 0){
                            
                             $('.ecartRatio').removeClass('text-white')
                             $('.ecartRatio').css('color','#df5453')

                             $('#ecart').removeClass('text-white')
                             $('#ecart').css('color','#df5453')
                     }

                    $('.boxlistfour').html('')
                     $.each(resp.data[0].data_encaissement.TabVersement,function(key,value){
                                
                                  var caRatioEcartVersement = `<span >${formatNumber(value.caRatioEcartVersement)}% </span> `
                                if(value.caRatioEcartVersement < 0){
                                    caRatioEcartVersement =  `<span  style="color:#df5453">${formatNumber(value.caRatioEcartVersement)}% </span> `
                                }

                                var caTotalEncaisse = `<div class="diff">${formatNumber(value.caTotalEncaisse)}</div>`
                                  if(value.caTotalEncaisse < 0){
                                    caTotalEncaisse = `<div class="diff" style="color:#df5453">${formatNumber(value.caTotalEncaisse)}</div>`
                                }

                                 var $hr = ''

                                if(resp.data[0].data_encaissement.TabVersement.length - 1 != key){
                                   $hr = ' <hr style="margin-top: -3px;">'

                                }
         

                                $('.boxlistfour').append(`
                                            
                                            <div class="payment-method">
                                                <div class="title-line">
                                                    <div>
                                                        <span class="label"><span class="text-dark">${value.LibelleModePaiement}</span> : <span > ${formatNumber(value.caTotalAttendu)}</span></span>
                                                        <div class="details">${value.caRatioAttendu}% A | ${value.caRatioVerse}% V | ${caRatioEcartVersement} A </div>
                                                    </div>
                                                    
                                                    <div>
                                                        <div class="total">${formatNumber(value.caTotalVerse)}</div>
                                                        ${caTotalEncaisse}
                                                    </div>
                                                </div>
                                        
                                            </div>
                                            ${$hr}
                                `)
                     })

                     {{-- if(resp.data[0].data_encaissement.TabVersement.length == 0){
                        $('.boxlistfour').append(`
                               <div class="text-center mt-3 empty-message">
                                    <img src="{{ asset('assets/img/empty.png') }}" class="img-fluid" style="width: 50%;">
                                    <p>Aucun versement pour l'instant</p>
                                </div>
                        `)
                     } --}}
                    
                     $('#skeleton').css('display', 'none')
                     $('#containerData').css('display', 'block')
                     $('#nextDate').prop("disabled", false);
                     $('#prevDate').prop("disabled", false);
                   
                },
                error: function(xhr,status){
                     $('#skeleton').css('display', 'none')
                     $('#errorBlock').css('display', 'block')
                }
            });



        }
    </script>
@endsection