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

            <div id="loader_custom" class="specialLoader" style="display: none">
                {{-- <img src="assets/img/loading-icon.png" alt="icon" class="loading-icon"> --}}
                <div style="background: #ffffff;width:100px; height:80px;border-radius:15px" class="d-flex justify-content-center align-items-center">
                    <div class="spinner-border " style="color:red" role="status"></div>
                </div>
            </div>





            <div class="DashboardResumebox padding mb-2">
                <div class="d-flex">
                    <img src="assets/img/calque5.png" style="width:20px" class="title-icon" />
                    <div class="title">
                        <span id="nbrealert"></span> Pointage de Relevés de BL/AV
                    </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 daterange" id="datePointage">
                    <ion-icon class="search-icon" name="search-outline" id="IconRecherche"></ion-icon>

                </div>
                <a href="#" class="card-drop" data-bs-toggle="dropdown" id="dropdownButton" aria-expanded="false">
                   <div class="critereSearch">
                         <ion-icon name="options-outline" class="chevronSize text-gray" style="margin-top:-2.2px"></ion-icon>
                   </div>
                </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">
                           <div class="critereSearch1"><ion-icon name="options-outline" style="font-size:18px"></ion-icon></div>
                            <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>

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

                            </select>
                        </div>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" name="etape" type="radio" value="1" id="filtre_bl">
                        <label class="form-check-label text-white" for="filtre_bl" style="font-size:13px">
                         BL uniquement
                        </label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" name="etape" type="radio" value="2" id="filtre_Avoir">
                        <label class="form-check-label text-white" for="filtre_Avoir" style="font-size:13px">
                         Avoir uniquement
                        </label>
                    </div>
                    
                    <li>
                        <div class="d-flex justify-content-between mt-2">
                            <button type="button" class="btn btn_background btn_background-w" id="appliquerFiltre">Appliquer les filtres</button>
                            <button type="button" class="btn btn_background" id="ReinitialiserFiltre"><img src="assets/img/Calque11.png" style="width:20px;height:20px;" class="title-icon"/></button>
                        </div>
                    </li>
                </ul>
            </div>

            @include('screens/error_screen')

            <div id ="containerData">
                
                <div class="DashboardResumebox2" style="padding-bottom: 10px">
                    
                    <div class="text-center text-white "><span id="NombreLigne"></span> Lignes(s) - T : <span id="TotalHT"></span></div>
                    <div class="text-center text-white fw-bold ">LP : <span id="NombreLignePointe"></span> Lignes(s)  - T :  <span id="TotalHTLignePointe"></span></div>
                    <div class="text-center text-white ">Ecarts : <span id="NombreLigneEcart"></span> Lignes(s) - T : <span id="TotalHTEcart"></span></div>

                </div>
                <div class="DashboardListbox mb-4" style="border-top-left-radius: 15px;border-top-right-radius: 15px">
                    <div class="text-center mt-3 empty-message">
                     
                        <p>Aucun pointage 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');
            });

            $('#IconRecherche').on('click', function() {
                 $dateDeb = $("#datePointage").val().slice(0,10)
                 $date_fin = $("#datePointage").val().slice(12,23)
                 recuperationPointage($dateDeb,$date_fin,null,null)
            })

                filtreElement()
                $dateDeb = $("#datePointage").val().slice(0,10)
                $date_fin = $("#datePointage").val().slice(12,23)
                recuperationPointage($dateDeb,$date_fin,null,null)

            $('.btnRetry').on('click', function() {
                $dateDeb = $("#datePointage").val().slice(0,10)
                $date_fin = $("#datePointage").val().slice(12,23)
                recuperationPointage($dateDeb,$date_fin,null,null)
            })

             $('#appliquerFiltre').on('click', function() {
                  $('#dropdownButton').dropdown('hide');
                $dateDeb = $("#datePointage").val().slice(0,10)
                $date_fin = $("#datePointage").val().slice(12,23)
                recuperationPointage($dateDeb,$date_fin,$('#fournisseur_bl').val(),$('input[name="etape"]:checked').val())
            })

             $('#ReinitialiserFiltre').on('click',function(){
                 $('#filtre_bl').prop('checked',false)
                 $('#filtre_Avoir').prop('checked',false)
                  filtreElement();
            })

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

                var $this = $(this);
                $this.addClass('highlight');
                setTimeout(function() {
                    $this.removeClass('highlight');
                }, 200);
                   var  id_fournisseur = $(this).data('id')
                   var  $DocPointe =  $(this).data('docpointe')

                $.ajax({
                type: "POST",
                url: "{{ route('blpointage.update') }}",
                data: {
                    idBLpointer : id_fournisseur,
                    DocPointe: $DocPointe
                },
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                beforeSend:function(){
                    $('.specialLoader').css('display','flex')
                },
                success: function(resp) {
                    if(resp.succes){
                         $('.specialLoader').css('display','none')
                        if(resp.statut==true){
                          $('#checkStatut' + id_fournisseur).css('background', 'green')
                          $this.data('docpointe',resp.statut)
                        }else{
                          $('#checkStatut' + id_fournisseur).css('background', 'orange')
                          $this.data('docpointe',resp.statut)
                        }
                       
                         showToast("Succès", 'Opération éffectué avec succès', "bg-success");
                    }
                },
                error: function(xhr, status) {
                     $('.specialLoader').css('display','none')
                    showToast("Erreur", 'Une Erreur s\'est produite', "bg-danger");
                }

            });

            })

        })

        function recuperationPointage($filtre_date_debut,$filtre_date_fin,$filtre_idfournisseur,$filtre_avoir_uniquement) {

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

                    "filtre_date_debut"       : $filtre_date_debut,
                    "filtre_date_fin"         : $filtre_date_fin,
                    "filtre_idfournisseur"    : $filtre_idfournisseur,
                    "filtre_bl_uniquement"    : true,
                    "filtre_avoir_uniquement" : $filtre_avoir_uniquement,
                },
                beforeSend: function() {

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

                },
                success: function(resp) {

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

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

                        $('.DashboardListbox').append(` <div class="text-center mt-3 empty-message">
                      
                        <p>Aucun pointage pour l'instant</p>
                    </div>`)
                    }

                    $('#NombreLigne').text(formatNumber(resp.data.NombreLigne))
                    $('#NombreLigneEcart').text(formatNumber(resp.data.NombreLigneEcart))
                    $('#NombreLignePointe').text(formatNumber(resp.data.NombreLignePointe))


                    $('#TotalHT').text(formatNumber(resp.data.TotalHT))
                    $('#TotalHTEcart').text(formatNumber(resp.data.TotalHTEcart))
                    $('#TotalHTLignePointe').text(formatNumber(resp.data.TotalHTLignePointe))
                    
                    $.each(resp.data.TabDataPointage, function(key, value) {
                     
                        var BL = `<span class="m-primary-color fw-bold">${value.NumeroBL}</span>`
                        if(parseInt(value.TypeBL) == 2){
                             BL = `<span class="fw-bold" style="color:#DF5453">${value.NumeroBL}</span>`
                        }

                         var HT = `<span class="titleVersement m-primary-color">${formatNumber(value.TotalHT)}</span>`
                        if(parseInt(value.TypeBL) == 2){
                             HT = `<span class="titleVersement" style="color:#DF5453">${formatNumber(value.TotalHT)}</span>`
                        }
                        var hr = ''

                        if (resp.data.length - 1 != key) {
                            var hr = '<div class="custom-hr"></div>'
                        }

                        var status = value.DocPointe == true ? ` <div id="checkStatut${value.IDDOCFOURNISSEUR}" style="width:10px;height:10px;border-radius:10px;background:green"></div>`: ` <div id="checkStatut${value.IDDOCFOURNISSEUR}" style="width:10px;height:10px;border-radius:10px;background:orange"></div>`
                        if (key == 0) {

                            $('.DashboardListbox').append(`
                            
                                                    <div class="transaction mt-1" id="cocherPointage" data-id="${value.IDDOCFOURNISSEUR}" data-docpointe="${value.DocPointe}">
                                                        <div class="d-flex justify-content-between">
                                                                    
                                                                    <div>
                                                                        <div>
                                                                          <span class="info-lineVersement1" >BL : ${BL} HT : ${HT} </span>
                                                                        </div>
                                                                        <div class="info-lineVersement1">
                                                                          F : <span class="fw-bold text-dark">${value.NomFournisseur}</span> - D : <span class="fw-bold">${value.DateBL}</span> 
                                                                        </div>

                                                                        <div class="info-lineVersement1">
                                                                        ${value.CreeLe} - ${value.NomOperateur}
                                                                        </div>
                                                                    </div>
                                                                   ${status}
                                                        </div>
                                                    </div>
                                                  
                                         ${hr}
                            `)
                        } else {

                            $('.DashboardListbox').append(`
                                             <div class="transaction mt-1" id="cocherPointage" data-id="${value.IDDOCFOURNISSEUR}" data-docpointe="${value.DocPointe}">
                                                        <div class="d-flex justify-content-between">
                                                                    
                                                                    <div>
                                                                        <div>
                                                                           <span class="info-lineVersement1" >BL : ${BL} HT : ${HT} </span>
                                                                        </div>
                                                                        <div class="info-lineVersement1">
                                                                          F : <span class="fw-bold text-dark">${value.NomFournisseur}</span> - D : <span class="fw-bold">${value.DateBL}</span> 
                                                                        </div>

                                                                        <div class="info-lineVersement1">
                                                                        ${value.CreeLe} - ${value.NomOperateur}
                                                                        </div>
                                                                    </div>
                                                                  ${status}
                                                        </div>
                                                    </div>
                                             
                                         ${hr}
                            `)
                        }

                    })

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

                },
                error: function(xhr, status) {

                    $('#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": false,
                    "operateur": false,
                    "fournisseur": true,
                    "produit": false,
                    "rubrique_operation": false
                },
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },

                success: function(resp) {

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

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

                        $('#fournisseur_bl').append(`
                            <option value="${value.IDFOURNISSEUR}">${value.NomFournisseur}</option>
                        `)
                    })

                },
                error: function(xhr, status) {

                }
            });

        }


    </script>
@endsection