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



<style>
    .progress {
      margin:20px auto;
      padding:0;
      width:100%;
      height:15px;
      overflow:hidden;
      background:#2a3f54;
      border-radius:6px;
    }
    
    .bar {
      position:relative;
      float:left;
      min-width:1%;
      height:100%;
      background:cornflowerblue;
      padding-left:20px;
    }
    
    .percent {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      margin:0;
      font-family:tahoma,arial,helvetica;
      font-size:12px;
      color:white;
    }
</style>
<nav class="d-none">
    {{ $celula = \App\Models\Celula::where('id',$id)->first()}}
    {{ $fileiras =\App\Models\Fileira::where('celula_id',$id)->get()}}
    {{ $arrum=\App\Models\ArrumacaoModel::join('filas','filas.id','=','arrumacoes.fila_id')->join('celulas','celulas.id','=','filas.celula_id')->where('celulas.id',$id)->get()}}
    {{ $encaixes=\App\Models\EspacoCaixaModulo::where('celula_id',$celula->id)->first()}}
       
    {{$espC=0}}
    {{$espRest=0}}
    {{$espArr=$arrum->count()}}
    {{$percentArrum=0}}
    {{$percentRest=0}}
    
    {{$numFileiras=$fileiras->count() }} 
     
    {{$numCaixas=$encaixes->espacoscaixa}}
    {{$percentArrum=$espArr*100/$numCaixas}}
    {{$espRest=$numCaixas-$espArr }}
    {{$percentRest=100-$percentArrum}}
</nav>
<h4>Custódia (Gestão)</h4>

<br>
<h5>Acesso rápido - Célula actual ({{$celula->nivel}})</h5>

<hr>
 
<div class="row">
     <div class="col">
        <label for="validationTooltip02" class="form-label clienteListCombo">Selecione a fileira</label>  <br>
        <select id="Sector1" class="position-relative form-control   bg-dark" style="width:100%;" >
            <option value="0" style="display:none" class="d-none">Vazio</option>
             @foreach($fileiras as $fileira)
                <option value="{{$fileira->id}}">{{$fileira->numerofila}}</option>
            @endforeach
        </select>
    </div>
    
</div>
<hr>
<nav class="container rounded shadow" style="background: linear-gradient( #013257bb , #01192cbb)">
 

    <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>
                        Armazem-Corredores
                    </label>
                    <hr>
                    <div class="tile_count ">
                        <div class="x_title">
                            <h2>Gestão administrativa do armazém</h2>
                            <div class="clearfix"></div>

                        </div>
                         

                     

                        <div class="col-md-6 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> FILEIRAS</span>
                            <div class="count filNumbers">{{ $numFileiras }}</div>
                            
                        </div>
                        <div class="col-md-6 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> ESPAÇOS CAIXAS</span>
                            <div class="count espCxNumbers">{{ $numCaixas }}</div>
                           
                        </div>

                    </div>
                    <br>
                    <hr>
                    
                    <small>Espaço geral na base</small>
                    <div class="progress">
                        <div class="bar bar1" style="width:100%">
                        	<p class="percent percentagemGeral count">{{$numCaixas}}:100</p>
                        </div>
                    </div>
                    <small>Espaço usado {{$espArr}}  : {{$percentArrum}} %</small>
                    <div class="progress">
                        <div class="bar bar2" style="width:{{$percentArrum}}%">
                        	<p class="percent percentagemUsada count">{{$espArr}} : {{$percentArrum}}</p>
                        </div>
                    </div>
                    <small>Espaço restante</small>
                    <div class="progress">
                        <div class="bar bar3" style="width:{{$percentRest}}%">
                        	<p class="percent percentagemRestante count">{{$espRest}} : {{$percentRest}}</p>
                        </div>
                    </div>
                    <br>
                  <div>
                      <table class="table table-bordered container table-light table-striped table-hover" id="armazensLista">
                          <thead>

                            <tr class="">

                                <th>Id</th>
                                {{-- <th>Base</th> --}}
                                {{-- <th>Cod</th> --}}
                                <th>Fileira</th>
                                <th>Data de cadastro</th>
                                <th>Mais</th>

                            </tr>

                         </thead>
                          <tbody id="fileira">
                           
                          </tbody>
                      </table>
                  </div>
            </div>
        </div>





    </nav>
     

</nav>
<script>
    $(function(){
        
         $("#Sector1").select2({ placeholder: 'Bases Gestdoc'});
         $("#Sector2").select2({ placeholder: 'Armazens'});
         $("#Sector3").select2({ placeholder: 'Corredores'});
         $("#Sector4").select2({ placeholder: 'Módulos'});
         $("#Sector5").select2({ placeholder: 'Células'});
         $("#Sector6").select2({ placeholder: 'Fileira'});
        
        
        $("#Sector1").change(function(){
            let fileira = $(this).val();
            $.post("{{ route('us.armazem.gestao.caixas.get.dados.fileira') }}",{
                    '_token':'{{ csrf_token() }}',
                    'fileira':fileira,

            },function(data){
                    
                $("#fileira").empty();
                // var retorno=$.parseJSON(data);
                // console.log(data[0].armazens);
                if(data==0){
                    // $(".armNumbers").text(0);
                    // $(".crrNumbers").text(0);
                    // $(".modNumbers").text(0);
                    // $(".celNumbers").text(0);
                    // $(".filNumbers").text(0);
                    // $(".espCxNumbers").text(0);
                }else{
                    // $(".armNumbers").text(data[0].armazens);
                    // $(".crrNumbers").text(data[0].corredores);
                    // $(".modNumbers").text(data[0].modulos);
                    // $(".celNumbers").text(data[0].celulas);
                    // $(".filNumbers").text(data[0].fileiras);
                    // $(".espCxNumbers").text(data[0].EspCaixas);
                    
                    
                    // $(".bar1").css("width","100%");
                    // var espCx=data[0].EspCaixas;
                    // $(".percentagemGeral").text(data[0].EspCaixas+": 100");
                    // var espUs=data[0].EspUsado;
                    // let percent = (espUs*100)/espCx;
                   
                    // $(".bar2").css("width",percent+"%");
                    // $(".percentagemUsada").text(espUs+": "+percent+ "");
                    
                    // let restante=espCx-espUs
                    // let percRest=100-percent;
                    // $(".bar3").css("width",percRest+"%");
                    // $(".percentagemRestante").text(restante+": "+percRest+ "");


                    $("#fileira").append(data);
                    
                }
                
            }
            
            );
           
            
        });
        
    })
</script>

@endsection()