@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 class="DashboardResumebox padding mb-2">
                <div class="d-flex">
                    <img src="assets/img/calque10.png" style="width:25px" class="title-icon"/>
                    <div class="title mt-1">
                       Pointage du personnel
                    </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 date" id="InputRecherche">
                    <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>

                    <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="sens" style="border-radius:25px">
                                    <option value="null">Sens</option>
                                    <option value="1">Entrée</option>
                                    <option value="2">Sortie</option>
                                </select>
                            </div>
                        </div>
                    </li>

                          <div class="form-check">
                                        <input class="form-check-input"  name="etape" type="radio" value="1" id="EntreTadive" >
                                        <label class="form-check-label text-white" for="EntreTadive" style="font-size:13px">
                                          Entrées tardives
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input"  name="etape" type="radio" value="2" id="SortieAnticipe">
                                        <label class="form-check-label text-white" for="SortieAnticipe" style="font-size:13px">
                                                Sorties anticipées
                                        </label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input"  name="etape" type="radio" value="3" id="AbsenceHoraire">
                                        <label class="form-check-label text-white" for="etape3" style="font-size:13px">
                                            Absences selon plage horaire
                                        </label>
                                    </div>

                        <div class="d-flex justify-content-between">
                             <input type="time" class="form-control inputSearchOther" placeholder="00 : 00" id="firstTime" style="margin-right: 5px">
                             <input type="time" class="form-control inputSearchOther" placeholder="00 : 00" id="secondTime">
                        </div>
                    <li>
                        <div class="d-flex justify-content-between mt-2">

                            <button type="button" class="btn btn_background btn_background-w" id="appliquerFiltrePointageP">Appliquer les filtres</button>
                            <button type="button" class="btn btn_background" id="reinitialiserPointageP"><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">
                    <div class="d-flex justify-content-center">
                        <h5 style="color:#fff;"><span id="nbrePointage"></span> Pointage(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 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() {


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

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

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

            $('#appliquerFiltrePointageP').on('click', function() {
                $('#dropdownButton').dropdown('hide');
                var $recherche = $('#InputRecherche').val()
                recuperationPointagePersonnel($recherche,$('#sens').val(),$('#Operateur').val(),$('input[name="etape"]:checked').val(),$('#firstTime').val(),$('#secondTime').val())
            })

             $('#reinitialiserPointageP').on('click', function() {
               filtreElement()
            })

            
            recuperationPointagePersonnel($recherche,null,null)

            filtreElement()
        })

        function recuperationPointagePersonnel($rechereche,$filtre_id_operateur,$filtre_sens_pointage,$filtre_type,$filtre_heure_debut,$filtre_heure_fin) {

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

                     "dateSearch"                   : $rechereche,
                     
                      "filtre_id_operateur"         : $filtre_id_operateur,
                      "filtre_sens_pointage"        : $filtre_sens_pointage,
                      "filtre_type"                 : $filtre_type,
                      "filtre_heure_debut"          : $filtre_heure_debut,
                      "filtre_heure_fin"            : $filtre_heure_fin

                },
                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 pointage pour l'instant</p>
                                </div>`
                            )
                        }
                    var nbrePointage = 0;
                    var montantTotal = 0;
                 $.each(resp.data, function(key, value) {
                        nbrePointage++
                      

                            var hr = ''
                            if(resp.data.length - 1 != key){
                                hr = `<div class="custom-hr"></div>`
                            }
                            var firstcaractere = value.EcartEnDuree.slice(0,1)
                            var pointage = `<div class="m-primary-color fw-bold">${value.Pointage1}</div>`

                            var SensPointage = `<span class="m-primary-color">${value.SensPointage}</span>`

                                if(value.SensPointage == 'SORTIE'){
                                    SensPointage = `<span style="color:#5282C3">${value.SensPointage}</span>`
                                }

                                 if(value.SensPointage == 'SORTIE'){
                                    SensPointage = `<span style="color:#5282C3">${value.SensPointage}</span>`
                                }
                           
                            if(firstcaractere == '-'){
                               pointage =  `<div class="fw-bold" style="color:#DF5453">${value.Pointage1}</div>`
                            }

                        if (key == 0) {

                            $('.DashboardListbox').append(`
                            
                                  <div class="transaction mt-1">
                                                        <div class="d-flex justify-content-between">
                                                                    
                                                                    <div>
                                                                        <div class="top-line">
                                                                          <span class="titleVersement">${value.NomOperateur}</span></span>
                                                                        </div>
                                                                   
                                                                    <div class="info-linePointage">
                                                                        SENS : <span class="m-primary-color">${SensPointage}</span> - ${value.HoraireProgramme}
                                                                    </div>
                                                                    </div>

                                                                  <div class="d-flex justify-content-center align-items-center flex-column">

                                                                            ${pointage}
                                                                            <div class="info-linePointage">${value.EcartEnDuree}</div>
                                                                  </div>
                                                        
                                                        </div>
                                                    </div>
                                                       ${hr}
                            `)
                        } else {

                            $('.DashboardListbox').append(`
                            
                                                <div class="transaction mt-1">
                                                        <div class="d-flex justify-content-between">
                                                                    
                                                                    <div>
                                                                        <div class="top-line">
                                                                          <span class="titleVersement">${value.NomOperateur}</span></span>
                                                                        </div>
                                                                   
                                                                    <div class="info-linePointage">
                                                                        SENS : <span class="m-primary-color">${SensPointage}</span> - ${value.HoraireProgramme}
                                                                    </div>
                                                                    </div>

                                                                  <div class="d-flex justify-content-center align-items-center flex-column">

                                                                             ${pointage}
                                                                            <div class="info-linePointage">${value.EcartEnDuree}</div>
                                                                  </div>
                                                        
                                                        </div>
                                                    </div>
                                                       ${hr}
                            `)
                        }

                    }) 

                      $('#nbrePointage').text(formatNumber(nbrePointage))

                      $('#MontantTotal').text(formatNumber(montantTotal))

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

                success: function(resp) {

                    
                  

                    $('#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