@extends('models')
@section('titre-page', 'Historique des droits')
@section('content-body')
<!-- Page Header -->
<div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb ">
    <!-- Start:: row-7 -->
    <div class="col-xl-12 col-12">
        <div class="row mb-2">
            <div class="col-xl-7 col-md-4 mt-2">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Contrôles</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Historique des droits</li>
                    </ol>
                </nav>
            </div>

            <div class="col-xl-5 col-md-8">

            {{-- <button class="btn btn-primary" id="verifycode">check</button> --}}
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header">
    
    <div class="row">
        <div class="col-xl-4 mb-2">
            <div class="d-flex">
                <label for="" class="mt-2 me-2">Période  </label> <span class="mt-2 me-2">:</span>
               <input type="text" name="daterange" class="form-control" style="padding :6px" id="dateInputSearch">
            </div>
        </div>

        <div class="col-xl-3 mb-2">
            <div class="d-flex">
                <label for="" class="mt-2 ">Profil  </label> <span class="mt-2 me-2">:</span>
                <select class="Pselect2 form-select" name="" id="ProfilPersonnelSelect">
                   
                </select>
            </div>
        </div>

        <div class="col-xl-4 mb-3">
            <div class="d-flex">
                <label for="" class="mt-2">Personnel  </label> <span class="mt-2 me-2">:</span>
                <select class="Pselect2 form-select" name="" id="personnelSelect">
                  
                </select>
            </div>
        </div>

        <div class="col-xl-1">
           <div class="d-flex justify-content-center">
              <div id="BlockBtnSearch">
                <span role="button" id="FilterItemBtn" class="badge bg-primary d-flex justify-content-center align-items-center" style="height: 33px; width:60px;"><i class="ri ri-search-line" style="font-size:17px;"></i></span>
              </div>
             
                <div id="BlockBtnLoad"  style="display:none">
                    <span role="button" class="badge bg-primary d-flex justify-content-center align-items-center" style="height: 33px; width:60px;">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    </span>
                </div>
           </div>
          
        </div>
    </div>

    
    </div>
    <div class="card-body">


        <div class="table-responsive">
            
            <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="HistoriqueDroits">
                <thead class="bg-thead">
                    <tr>
                        <th>Profil</th>
                        <th>Droit</th>
                        <th>Etat avant</th>
                        <th>Etat après</th>
                        <th>Valeur avant</th>
                        <th>Valeur après</th>
                        <th>Date de l'opération</th>
                        <th>O. éffectuée par</th>
                        <th>Personnel</th>
                        <th>Adresse ip</th>
                        
                    </tr>
                </thead>
            </table>
        </div>

    </div>
</div>

@endsection

@section('script')

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

        RecuperationHistoriqueDroit();
        RecuperationPersonnel();
        RecuperationProfil();

        $(document).on('click','#FilterItemBtn',function(){
          
            $('#BlockBtnSearch').css('display','none')
            $('#BlockBtnLoad').css('display','flex')

            var e = $('#dateInputSearch').val();
            var dateDepart = e.slice(0, 10)
            var dateFin = e.slice(13, 23)
            var dateDepartFormater = dateDepart.slice(6, 10) + '-' + dateDepart.slice(3, 5) + '-' +dateDepart.slice(0, 2)
            var dateFinFormater = dateFin.slice(6, 10) + '-' + dateFin.slice(3, 5) + '-' + dateFin.slice(0, 2)

            var personnelSelect = $('#personnelSelect').val();
            var profil = $('#ProfilPersonnelSelect').val();
            var masquerloadingBtn = 2;
            RecuperationHistoriqueDroit(dateDepartFormater,dateFinFormater,personnelSelect,profil,masquerloadingBtn)
        })


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

           verificationDroitPersonnel('DV_Promotion',()=>{
            alert('tout se passe bien')
           })
        }) --}}
     
    })
    function RecuperationHistoriqueDroit(dateDepart=null,dateFin=null,personnelSelect=null,profil=null,EtatBtn){
                       var tables = $("#HistoriqueDroits").DataTable()
                    tables.clear().draw();

                    {{-- new $.fn.dataTable.ColReorder( tables, {
                         colReorder:true,
                        responsive: true
                    } ); --}}
                MarequetesAjax("{{route('historiqueDroit.get') }}", "GET",{dateDeb:dateDepart,dateFin:dateFin,PersonnelSelectVal:personnelSelect,profilVal:profil}, null, true, "JSON", function(resp) {

                            if(resp.error){
                                notifError(resp.msg)
                                completeHandler()
                                return false;
                            }

                         completeHandler()
                         if(EtatBtn){
                             $('#BlockBtnSearch').css('display','flex')
                             $('#BlockBtnLoad').css('display','none')
                         }
                        $.each(resp.data,function(key,value){
                            var checkbox =  '<div class="form-check form-switch" style="display:flex;justify-content:center"> <input disabled="disabled" class="form-check-input"  type="checkbox" role="switch" id="DroitCheckboxC">\
                                              <label class="form-check-label" for="DroitCheckboxC"></label></div>';

                            var checkboxApres = '<div class="form-check form-switch" style="display:flex;justify-content:center"> <input disabled="disabled" class="form-check-input"  type="checkbox" role="switch" id="DroitCheckboxC">\
                                              <label class="form-check-label" for="DroitCheckboxC"></label></div>';

                            if(value.DroitAvant==true){
                                checkbox =  '<div class="form-check form-switch" style="display:flex;justify-content:center"> <input disabled="disabled" class="form-check-input"  type="checkbox" checked="checked" role="switch" id="DroitCheckboxC">\
                                <label class="form-check-label" for="DroitCheckboxC"></label></div>';
                            }

                            if(value.DroitApres==true){
                                checkboxApres =  '<div class="form-check form-switch" style="display:flex;justify-content:center"> <input disabled="disabled" class="form-check-input"  type="checkbox" checked="checked" role="switch" id="DroitCheckboxC">\
                                <label class="form-check-label" for="DroitCheckboxC"></label></div>';
                            }

                            $valeurAvant = Number(value.DroitValeurAvant).toFixed(2)
                            $valeurApres = Number(value.DroitValeurApres).toFixed(2)

                            tables.row.add([
                             
                                value.LibelleDroitProfil,
                                value.LibelleDroit,
                                checkbox,
                                checkboxApres,
                                $valeurAvant,
                                $valeurApres,
                                value.created_at,
                                value.Operateur,
                                value.NomPrenomPersonnel,
                                value.AdresseIPPublic

                            ])
                        })
                    tables.draw();
        }
        , function() {},
                    function() {
                        progressHandler()
                    }
        )
    }

    function RecuperationPersonnel(){
        MarequetesAjax("{{route('personnel.get') }}", "GET",null, null, true, "JSON", function(resp) {

             $('#personnelSelect').html('')
                $('#personnelSelect').append('<option value="0" selected>Tous</option>')
                $.each(resp.Personnel, function(key, value) {
                  
                 $('#personnelSelect').append('<option value="'+value.IDPERSONNEL+'">'+value.NomPrenomPersonnel+'</option>');

                })
        })
    }

    function RecuperationProfil(){
        MarequetesAjax("{{route('profil.get') }}", "GET",null, null, true, "JSON", function(resp) {

                $('#ProfilPersonnelSelect').html('')
                $('#ProfilPersonnelSelect').append('<option value="0" selected>Tous</option>')
                $.each(resp, function(key, value) {
                    $('#ProfilPersonnelSelect').append($('<option>', {
                        value: value.IDDROIT_PROFIL,
                        text: value.LibelleDroitProfil
                    }))
                })
        })
    }
</script>
@endsection