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

        <div class="section">

            <!-- * Dialog Basic -->

            <div class="DashboardResumebox padding mb-2">
                <div class="d-flex">
                  <img src="assets/img/calque8.png" style="width:25px" class="title-icon"/>
                    <div class="title mt-1">
                        Listing des Versements
                    </div>
                </div>
            </div>


            {{-- RECHERCHE --}}
            <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 date" id="InputRecherche">
                    <ion-icon class="search-icon" name="search-outline" id="IconRecherche"></ion-icon>

                </div>
                {{-- POPOVER --}}
                <a href="#" class="card-drop" 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">

                                <select class="form-control custom-select" id="Operateur" 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="Modepaiement" style="border-radius:25px">
                                </select>
                            </div>
                        </div>

                    </li>


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

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

                            <button type="button" class="btn btn_background mx-2">X</button>
                        </div>
                    </li>
                </ul>
            </div>

            @include('screens/error_screen')

            <div id ="containerData">

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

                            <div>
                                <h5 class="text-white">Versement : <span class="text-size1" id="Totalversement"></span></h5>
                                <h6 class="text-white" id="">Attendu : <span class="text-size2" id="TotalversementAttendu"></span></h6>
                            </div>

                            <div>
                                <h5 class="text-white text-end">Ecart</h5>
                                <div class="d-flex">
                                    <h6 class="text-white fw-bold text-size2" style="border-right: 1px solid #fff;margin-right:12px;padding-right:8px" id="ecartVersement"></h6>
                                    <h6 class="text-white ecartRatio fw-bold text-size2" id="ecartRatioVersement"></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div id="versementBlock" class="mt-2" style="padding-bottom: 80px">

                    <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>

                </div>
            </div>

        </div>

    </div>

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

    @include('partials/bottomBar')
@endsection

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

            let currentDate = new Date(); 
            $('.inputSearch').val(formatDate(currentDate))

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

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

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

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

            $('#appliquerFiltre').on('click',function(){
                $('#dropdownButton').dropdown('hide');
               var $recherche = $('#InputRecherche').val()
               recuperationVersement($recherche,$('#Operateur').val(),$('#Modepaiement').val())
            })


            filtreElement()
            recuperationVersement($('#InputRecherche').val(), null, null)

            $('.btnRetry').on('click', function() {
                var $recherche = $('#InputRecherche').val()
                recuperationVersement($recherche, null, null)
                filtreElement()
            })
        })

        function recuperationVersement($rechereche, $filtre_id_modepaiement, $filtre_id_operateur) {

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

                    search: $rechereche,
                    "filtre_id_modepaiement ": $filtre_id_modepaiement,
                    "filtre_id_operateur": $filtre_id_operateur
                },
                beforeSend: function() {
                    {{-- $('.checkLoading').css('display','flex') --}}

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

                },
                success: function(resp) {

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

                    $('#versementBlock').html('')

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

                        $('#versementBlock').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>`)

                        return false
                    }

                   
                    
                    var Totalverse = 0;
                    var TotalAttendu = 0;
                    var TotalEcart = 0;
                    var RatioEcart = 0;

                    $.each(resp.data, function(key, value) {
                       
                       Totalverse +=value.TotalVerse
                       TotalAttendu += value.TotalAttendu
                       TotalEcart += value.TotalEcart

                        if(value.TotalAttendu > 0){
                            RatioEcart = value.TotalEcart / value.TotalAttendu;
                        }

                        $('#versementBlock').append(`

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

                                                                <div>
                                                                    <h5 style="color:#acdfdc">${value.NomOperateur} : <span id="versement"></span></h5>
                                                                    <h6 class="text-white" id="">A : <span id="VersementAttendu">${formatNumber(value.TotalAttendu)}</span>
                                                                    </h6>
                                                                </div>

                                                                <div>
                                                                    <h5 class="text-white text-end fw-bold">${formatNumber(value.TotalVerse)}</h5>
                                                                    <div class="d-flex justify-content-end">
                                                                        {{-- <h6 class="text-white" style="border-right: 1px solid #fff;margin-right:12px;padding-right:8px" id="ecart"></h6> --}}
                                                                        <h6 class="ecartRatio" style="color:#df5453" id="ecartRatio">${value.TotalEcart}</h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                
                                `)

                        $.each(value.TabVersement, function(keys, values) {


                              var caRatioEcartVersement = `<span >${formatNumber(values.RatioVerse)}% </span> `
                                if(value.caRatioEcartVersement < 0){
                                    caRatioEcartVersement =  `<span  style="color:#df5453">${formatNumber(values.RatioVerse)}% </span> `
                                }

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

                              
                                  var hr =""
                                 if(value.TabVersement.length -1 != keys){
                                    hr = ` <hr style="margin-top: -3px;">`
                                 }

                          
                                if(keys == 0){

                                    $('#versementBlock').append(`

                                                            <div class="DashboardListboxVersement boxlistfour" style="padding-top:25px;padding-bottom:-10px">
                                                                
                                                                <div class="payment-method">
                                                                    <div class="title-line">
                                                                        <div>
                                                                            <span class="label"><span class="text-dark">${values.LibelleModePaiement}</span> : <span > ${formatNumber(values.TotalMontantVersement)}</span></span>
                                                                            <div class="details">${values.RatioAttendu}% A | ${values.RatioVerse}% V | ${caRatioEcartVersement} A </div>
                                                                        </div>
                                                                        
                                                                        <div>
                                                                            <div class="total">${formatNumber(values.TotalMontantVersement)}</div>
                                                                        ${MontantEcart}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                ${hr}
                                                            </div>

                                                    `)
                                }


                                if(keys > 0){

                                    $('#versementBlock').append(`

                                                            <div class="DashboardListboxVersement boxlistfour" style="border-radius:0px 0px 15px 15px" >
                                                                
                                                                <div class="payment-method">
                                                                    <div class="title-line">
                                                                        <div>
                                                                            <span class="label"><span class="text-dark">${values.LibelleModePaiement}</span> : <span > ${formatNumber(values.TotalMontantVersement)}</span></span>
                                                                            <div class="details">${values.RatioAttendu}% A | ${values.RatioVerse}% V | ${caRatioEcartVersement} A </div>
                                                                        </div>
                                                                        
                                                                        <div>
                                                                            <div class="total">${formatNumber(values.TotalMontantVersement)}</div>
                                                                        ${MontantEcart}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                ${hr}
                                                            </div>

                                                    `)
                                }


                            

                         
                        })

                    })

                    $('#Totalversement').text(Totalverse)
                    $('#TotalversementAttendu').text(TotalAttendu)
                    $('#ecartVersement').text(TotalEcart)
                    $('#ecartRatioVersement').text(RatioEcart)

                    if(TotalEcart < 0){
                        $('#ecartVersement').removeClass('text-white')
                        $('#ecartVersement').css('color','#df5453')
                    }

                     if(RatioEcart < 0){
                        $('#ecartRatioVersement').removeClass('text-white')
                        $('#ecartRatioVersement').css('color','#df5453')
                    }
                    
                },
                error: function(xhr, status) {

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

        function filtreElement() {

            $.ajax({
                type: "POST",
                url: "{{ route('filtreMulti.get') }}",
                data: {
                    "famille": false,
                    "grande_famille": false,
                    "categorie_produit": false,
                    "emplacement_rayon": false,
                    "emplacement_reserve": false,
                    "client": false,
                    "type_client": false,
                    "mode_paiement": true,
                    "operateur": true,
                    "fournisseur": false,
                    "produit": false
                },
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },

                success: function(resp) {

                    $('#Modepaiement').html('')
                    $('#Modepaiement').append(`
                        <option value="">Mode paiement</option>
                    `)

                    $.each(resp.data.TabModePaiement, function(key, value) {

                        $('#Modepaiement').append(`
                            <option value="${value.IDMODEPAIEMENT}">${value.LibelleModePaiement}</option>
                        `)
                    })


                    $('#Operateur').html('')
                    $('#Operateur').append(`
                        <option value="">Operateur</option>
                    `)

                    $.each(resp.data.TabOperateur, function(key, value) {

                        $('#Operateur').append(`
                            <option value="${value.IDOPERATEUR}">${value.NomOperateur}</option>
                        `)
                    })
                },
                error: function(xhr, status) {
                }
            });
        }
    </script>
@endsection