@extends('usuarios.funcionarios.master.layout2')

@section('conteudo')

<nav class="d-none">
    @php 
    
        $meses=array('Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro');
  
    @endphp
    {{$pendentesGerais=\App\Models\Pendente::get()}}
    {{$pendentes=\App\Models\Pendente::where('ano',date('Y'))->get()}}
    @php
    
    $dataPendente = array();
    var_dump($dataPendente);
    $mes=0;
     for($pen=0; $pen<=11; $pen++) {
       
       
        $mes=$pen+1;
       
        $pendentes2=\App\Models\Pendente::where('ano',date('Y'))->where('mes',$mes)->first();
        
        if($pendentes2){
            
            array_push($dataPendente,$pendentes2->numero);
        
        }
        else{
            
            array_push($dataPendente,0);
             
            
        }
        
        
       
     }
    @endphp
</nav>
<nav class="container rounded shadow" style="background: linear-gradient( #013257bb , #01192cbb)">
    <br><br>

        <nav class="row p-4">


            <div class="col-12 text-start">
                <div class="row justify-content-center "   >
                    <div class="large-12 columns text-start p-3 rounded bg-light  animate__animated animate__zoomInDown ">
                        <label class="m-2">
                            <i class="fa fa-warehouse"></i>
                            PENDENTES - {{date('Y')}}
                        </label>
                        <hr>
                        <canvas id="numPendentes" height="100"></canvas>
                      <div>
                          <table class="table table-bordered container table-light table-striped table-hover" id="armazensLista">
                              <thead>

                                <tr class="">

                                    <th>Numero</th>
                                    <th>Ano</th>
                                    <th>Mês</th>
                                    <th>Usuário</th>
                                    <th>Data de cadastro</th>
                                    <th>Editar</th>
                                </tr>

                             </thead>
                              <tbody id="Armazens">
                                @foreach ($pendentesGerais as $pendente )
                                    <tr class="">

                                        <th>{{ $pendente->numero }}</th>
                                     
                                        <th>{{ $pendente->ano}}</th>
                                          
                                       
                                        <th>{{ $meses[$pendente->mes-1] }}</th>
                                        <th>{{ $pendente->getUser->getPessoa->nome }}</th>
                                        
                                       
                                        
                                        <th>{{ $pendente->created_at }}</th>
                                        <th> 
                                        <a class=" editPendBtn btn btn-sm btn-info" data-toggle="modal" data-target="#modalEditPend"> 
                                        <input type="hidden" class="id" value="{{ $pendente->id }}">
                                        <input type="hidden" class="pendentes" value="{{ $pendente->numero }}">
                                        <input type="hidden" class="ano" value="{{ $pendente->ano }}">
                                        <input type="hidden" class="mes" value="{{ $pendente->mes }}"> 
                                        
                                        <i class="fa fa-eye"></i></a></th>
                                        
                                        
                                    </tr>
                                @endforeach
                              </tbody>
                          </table>
                      </div>
                </div>
            </div>





        </nav>
        <div class=" p-3">
            <div class="x_title">
                <h2>Opções</h2>
                <div class="clearfix"></div>
            </div>
            {{-- <button class="btn btn-sm btn-outline-light"><i class="fa fa-plus"></i> Novo dep</button> --}}

            <a data-toggle="modal" data-target="#modalContactForm"   class="btn btn-sm btn-outline-light"><i class="fa fa-plus"></i> Novo pendente</a> 
              

        </div>

</nav>

<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog cascading-modal" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Header-->
      <div class="modal-header light-blue darken-3 white-text">
        <h4 class="title"><i class="fas fa-pencil-alt"></i> Novo pendente</h4>
        <button type="button" class="close invisible closeModal waves-effect waves-light" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body mb-0">
        <form id="novoArmazem">


            <div class="md-form form-sm">
            <i class="fas fa-edit prefix active"></i>
            <input type="number"  required id="numeroPendente" min="0" max="10000" class="form-control">
            <label for="numeroPendente" class="active">Número de pendentes</label>
            </div >
            
          
            <div class="md-form form-sm">
                <select id="ano"  class="form-control">
                @php
                    
                    $actual=date('Y');
                    for($ano=$actual; $ano>=2013; $ano--){
                     echo '<option>'.$ano.'</option>';
                    }
                @endphp
                </select>
                <label for="ano" class="active">Ano</label> 
            </div >
             <div class="md-form form-sm">
                 <select id="mes"  class="form-control">
                @php
                     
                    for($mes=0; $mes<=11; $mes++){
                        $valor=$mes+1;
                     echo '<option value="'.$valor.'">'.$meses[$mes].'</option>';
                    }
                @endphp
                </select>
                <label for="mes" class="active">Mês</label> 
            </div >
            
           

            <div class="text-center mt-1-half">
                <button class="btn btn-info mb-2 waves-effect waves-light">Cadastrar pendente<i class="fas fa-send ml-1"></i></button>
            </div>
        </form>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

<div class="modal fade" id="modalEditPend" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog cascading-modal" role="document">
    <!--Content-->
    <div class="modal-content">

      <!--Header-->
      <div class="modal-header light-blue darken-3 white-text">
        <h4 class="title"><i class="fas fa-pencil-alt"></i> Editar pendente</h4>
        <button type="button" class="close invisible closeModal waves-effect waves-light" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body mb-0">
        <form id="editPendenteForm">


            <div class="md-form form-sm">
            <i class="fas fa-edit prefix active"></i>
            <input type="number"  required id="numeroPend" min="0" max="10000" class="form-control">
            <label for="numeroPendente" class="active">Número de pendentes</label>
            </div >
            
          
            <div class="md-form form-sm">
                <select id="anoPend"  class="form-control">
                @php
                    
                    $actual=date('Y');
                    for($ano=$actual; $ano>=2013; $ano--){
                     echo '<option>'.$ano.'</option>';
                    }
                @endphp
                </select>
                <label for="ano" class="active">Ano</label> 
            </div >
             <div class="md-form form-sm">
                 <select id="mesPend"  class="form-control">
                @php
                     
                    for($mes=0; $mes<=11; $mes++){
                        $valor=$mes+1;
                     echo '<option value="'.$valor.'">'.$meses[$mes].'</option>';
                    }
                @endphp
                </select>
                <label for="mes" class="active">Mês</label> 
            </div >
            
           <input id="idPend" type="hidden">

            <div class="text-center mt-1-half">
                <button class="btn btn-info mb-2 waves-effect waves-light">Editar pendente<i class="fas fa-send ml-1"></i></button>
            </div>
        </form>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

<div class="text-center">
  {{-- <a href="" class="btn btn-default btn-rounded my-3" >Launch
    Modal Contact</a> --}}
</div>
<script>
    $(function(){
        $('#armazensLista').DataTable({});

        $(".editPendBtn").click(function(){
            

            $("#numeroPend").val($(this).find('.pendentes').val()).focus();
            $("#idPend").val($(this).find('.id').val());
            let ano =$(this).find('.ano').val();
            let mes =$(this).find('.mes').val()
            $("#anoPend").append();
            $("#mesPend").append();

            $("#numeroPend").focus();

        });
        $("#editPendenteForm").submit(function(e){
            e.preventDefault();
            
            let numeroPendente=$("#numeroPend").val();
            let ano=$("#anoPend").val();
            let mes=$("#mesPend").val();
            let id=$("#idPend").val();
            
            $.post( "{{route('us.contqual.dash.pendentes.editar')}}",
                { '_token':  '{{ csrf_token()  }}','mes':mes,'id':id,'ano':ano,'numero': numeroPendente},
                function(data){


                if(data>0)
                {

                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })

                    Toast.fire({
                        icon: 'success',
                        title: 'Pendente editado com sucesso'
                    })
                    $(".closeModal").click();
                    

                    location.reload(true);
                 }else{
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })

                    Toast.fire({
                        icon: 'warning',
                        title: 'Um pendente com estes dados já existe'
                    })
                  
                }
            }).fail(function(){
                alert("Infelizmente falhou o acesso à esta função");
            });
        });
        $('#novoArmazem').submit(function(e){
            e.preventDefault();
            let numeroPendente=$("#numeroPendente").val();
            let ano=$("#ano").val();
            let mes=$("#mes").val();
            
 
 
            $.post( "{{route('us.contqual.dash.pendentes.novo.add')}}",
                { '_token':  '{{ csrf_token()  }}','mes':mes,'ano':ano,'numero': numeroPendente},
                function(data){


                if(data>0)
                {

                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })

                    Toast.fire({
                        icon: 'success',
                        title: 'Pendente cadastrado com sucesso'
                    })
                    $(".closeModal").click();
                    

                    location.reload(true);
                 }else{
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })

                    Toast.fire({
                        icon: 'warning',
                        title: 'Um pendente com estes dados já existe'
                    })
                  
                }
            }).fail(function(){
                alert("Infelizmente falhou o acesso à esta função");
            });
        });
 
 
 
 
 
 
 
        
                 
                var Data= [0,'{{$dataPendente[0]}}','{{$dataPendente[1]}}','{{$dataPendente[2]}}','{{$dataPendente[3]}}','{{$dataPendente[4]}}','{{$dataPendente[5]}}'
                ,'{{$dataPendente[6]}}','{{$dataPendente[7]}}','{{$dataPendente[8]}}','{{$dataPendente[9]}}','{{$dataPendente[10]}}','{{$dataPendente[11]}}',0]
                // Gráfico de pendentes 
                let labelsnumPendentes = ['','Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro',''];
                let datanumPendentes = {
                  labels: labelsnumPendentes,
                  datasets: [{
                    label: 'Numero de pendentes',
                    // backgroundColor: 'rgb(42,63,84)',
                    borderColor: 'rgb(42,63,84)',
                    data:Data,
                    borderWidth: 1
                  }]
                  

                };
                
                
                let confignumPendentes = {
                  type: 'bar',
                  data:datanumPendentes,
                  options: {
                      animation: {
                          onComplete: () => {
                            delayed = true;
                          },
                          delay: (context) => {
                            let delay = 0;
                            if (context.type === 'data' && context.mode === 'default' && !delayed) {
                              delay = context.dataIndex * 300 + context.datasetIndex * 100;
                            }
                            return delay;
                          },
                        },
                       responsive: true,
                       title: {
                            display: true,
                            text: 'Numero de pendentes',
                          },
                        legend: {
                            display: false
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: true
                        },
                       scales: {
                            y: {
                                beginAtZero: false
                            }
                        },
                       
                  }
                };
                
                
                var numPendentes = new Chart($("#numPendentes"),confignumPendentes);
    });
</script>
@endsection