@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');
   
        $dashElementGeral=\App\Models\ClienteContinuo::get();
        $dashElement=\App\Models\ClienteContinuo::where('ano',date('Y'))->get();
        
        $dataClientesCont = array(); $mes=0;
        for($pen=0; $pen<=11; $pen++) {
           
           
            $mes=$pen+1;
           
            $clienteCont2=\App\Models\ClienteContinuo::where('ano',date('Y'))->where('mes',$mes)->first();
            
            if($clienteCont2){
                
                array_push($dataClientesCont,$clienteCont2->clientes);
            
            }
            else{
                
                array_push($dataClientesCont,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>
                            CLIENTES CONTÍNUOS - {{date('Y')}}
                        </label>
                        <hr>
                        <canvas id="clientesContinuos" height="100"></canvas>
                      <div>
                          <table class="table table-bordered container table-light table-striped table-hover" id="armazensLista">
                              <thead>

                                <tr class="">

                                    <th>Clientes</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 ($dashElementGeral as $dashEmt )
                                    <tr class="">

                                        <th>{{ $dashEmt->clientes }}</th>
                                     
                                        <th>{{ $dashEmt->ano}}</th>
                                          
                                       
                                        <th>{{ $meses[$dashEmt->mes-1] }}</th>
                                        <th>{{ $dashEmt->getUser->getPessoa->nome }}</th>
                                        
                                       
                                        
                                        <th>{{ $dashEmt->created_at }}</th>
                                        <th> 
                                        <a class=" editPendBtn btn btn-sm btn-info" data-toggle="modal" data-target="#modalEditPend"> 
                                        <input type="hidden" class="id" value="{{ $dashEmt->id }}">
                                        <input type="hidden" class="pendentes" value="{{ $dashEmt->clientes }}">
                                        <input type="hidden" class="ano" value="{{ $dashEmt->ano }}">
                                        <input type="hidden" class="mes" value="{{ $dashEmt->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 número de clientes</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> Número de clientes</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="numeroCx" min="0" max="1000000" class="form-control">
            <label for="numeroCx" class="active">Número de clientes</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 número de clientes<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 número de clientes</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="1000000" class="form-control">
            <label for="numeroCx" class="active">Número de clientes</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 número de clientes<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 numeroCx=$("#numeroPend").val();
            let ano=$("#anoPend").val();
            let mes=$("#mesPend").val();
            let id=$("#idPend").val();
            
            $.post( "{{route('us.contqual.dash.clientes.editar')}}",
                { '_token':  '{{ csrf_token()  }}','mes':mes,'id':id,'ano':ano,'numero': numeroCx},
                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: 'Número de clientes 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 número de clientes com estes dados já existe'
                    })
                  
                }
            }).fail(function(){
                alert("Infelizmente falhou o acesso à esta função");
            });
        });
        $('#novoArmazem').submit(function(e){
            e.preventDefault();
            let numeroCx=$("#numeroCx").val();
            let ano=$("#ano").val();
            let mes=$("#mes").val();
            
 
 
            $.post( "{{route('us.contqual.dash.clientes.novo.add')}}",
                { '_token':  '{{ csrf_token()  }}','mes':mes,'ano':ano,'numero': numeroCx},
                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: 'Número de clientes cadastrada 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 número de clientes com estes dados já existe'
                    })
                  
                }
            }).fail(function(){
                alert("Infelizmente falhou o acesso à esta função");
            });
        });
 
 
 
 
 
                var Data= [0,'{{$dataClientesCont[0]}}','{{$dataClientesCont[1]}}','{{$dataClientesCont[2]}}','{{$dataClientesCont[3]}}','{{$dataClientesCont[4]}}','{{$dataClientesCont[5]}}'
                ,'{{$dataClientesCont[6]}}','{{$dataClientesCont[7]}}','{{$dataClientesCont[8]}}','{{$dataClientesCont[9]}}','{{$dataClientesCont[10]}}','{{$dataClientesCont[11]}}',0]
               // [0,32, 32, 35, 35, 35,36,60]
               
                let labels =['','Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro',''];
                let data = {
                  labels: labels,
                  datasets: [{
                    label: 'Número de clientes contínuos',
                    // backgroundColor: 'rgb(42,63,84)',
                    borderColor: 'rgb(42,63,84)',
                    data: Data,
                    borderWidth: 2
                  }]
                };
                let config = {
                  type: 'line',
                  data,
                  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: 'Número de clientes contínuos',
                          },
                        legend: {
                            display: false
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: true
                        },
                       scales: {
                            y: {
                                beginAtZero: false
                            }
                        }
                  }
                };
                
                var grafico = new Chart($("#clientesContinuos"),config);
    });
</script>
@endsection