@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">
    {{ $armazem = \App\Models\ArmazemModel::where('id',$id)->first()}}
    {{ $corredores =\App\Models\Corredor::where('armazem_id',$id)->get()}}
    {{ $arrum=\App\Models\ArrumacaoModel::join('filas','filas.id','=','arrumacoes.fila_id')->join('celulas','celulas.id','=','filas.celula_id')->join('modulos','modulos.id','=','celulas.modulo_id')->join('corredores','corredores.id','=','modulos.corredor_id')->join('armazens','armazens.id','=','corredores.armazem_id')->where('armazens.id',$id)->get()}}
    
    {{$md=0}}
    {{$cel=0}}
    {{$fil=0}}
    {{$espC=0}}
    {{$espRest=0}}
    {{$espArr=$arrum->count()}}
    {{$percentArrum=0}}
    {{$percentRest=0}}
    @foreach($corredores as $crr)
        {{$modul=$crr->getModulos}}
        {{$md+=$modul->count()}}
        @foreach($modul as $mod)
            {{$cel+=$mod->getCelulas->count()}}
            @foreach($mod->getCelulas as $cell)
                {{$filNumbers=\App\Models\Fileira::where('celula_id',$cell->id)->get()}}
                @if($filNumbers)
                    {{ $fil+=$filNumbers->count() }}
                @endif
                
                
                @if($cell->getEspCx)
                  {{ $espC+=$cell->getEspCx->espacoscaixa }}
                 
                @endif
            @endforeach
        @endforeach
    @endforeach
    {{$percentArrum=$espArr*100/$espC}}
    {{$espRest=$espC-$espArr }}
    {{$percentRest=100-$percentArrum}}
</nav>
<h4>Custódia (Gestão)</h4>

<br>
<h5>Acesso rápido - Armazém actual ({{$armazem->nomearmazem}})</h5>

<hr>
 
<div class="row">
     <div class="col">
        <label for="validationTooltip02" class="form-label clienteListCombo">Selecione o corredor</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($corredores as $corredor)
                <option value="{{$corredor->id}}">{{$corredor->numerocorredor}}</option>
            @endforeach
        </select>
    </div>
    <!--<div class="col-2">-->
    <!--    <label for="validationTooltip02" class="form-label clienteListCombo">Armazém</label>  <br>-->
    <!--    <select id="Sector2" class="position-relative form-control   bg-dark" style="width:140px;" >-->
    <!--        <option value="0" style="display:none" class="d-none">Vazio</option>-->
             
    <!--    </select>-->
    <!--</div>-->
    <!-- <div class="col-2">-->
    <!--     <label for="validationTooltip02" class="form-label clienteListCombo">Corredor</label>  <br>-->
    <!--    <select id="Sector3" class="position-relative form-control   bg-dark" style="width:140px;" >-->
    <!--        <option value="0" style="" class="d-none">Vazio</option>-->
            
    <!--    </select>-->
    <!--</div>-->
    <!-- <div class="col-2">-->
    <!--     <label for="validationTooltip02" class="form-label clienteListCombo">Modulo</label>  <br>-->
    <!--    <select id="Sector4" class="position-relative form-control   bg-dark" style="width:140px;" >-->
    <!--        <option value="0" style="" class="d-none">Vazio</option>-->
            
    <!--    </select>-->
    <!--</div>-->
    <!-- <div class="col-2">-->
    <!--     <label for="validationTooltip02" class="form-label clienteListCombo">Célula</label>  <br>-->
    <!--    <select id="Sector5" class="position-relative form-control   bg-dark" style="width:140px;" >-->
    <!--        <option value="0" style="" class="d-none">Vazio</option>-->
            
    <!--    </select>-->
    <!--</div>-->
         
    <!-- <div class="col-2">-->
    <!--     <label for="validationTooltip02" class="form-label clienteListCombo">Fileira</label>  <br>-->
    <!--    <select id="Sector6" class="position-relative form-control   bg-dark" style="width:140px;" >-->
    <!--        <option value="0" style="" class="d-none">Vazio</option>-->
            
    <!--    </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-3 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> MODULOS</span>
                            <div class="count modNumbers">{{ $md }}</div>
                            
                        </div>

                        <div class="col-md-3 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> CÉLULAS</span>
                            <div class="count celNumbers">{{ $cel }}</div>
                             
                        </div>

                        <div class="col-md-3 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> FILEIRAS</span>
                            <div class="count filNumbers">{{ $fil }}</div>
                            
                        </div>
                        <div class="col-md-3 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> ESPAÇOS CAIXAS</span>
                            <div class="count espCxNumbers">{{ $espC }}</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">{{$espC}}: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>Corredor</th>
                                <th>Data de cadastro</th>
                                <th>Mais</th>

                            </tr>

                         </thead>
                          <tbody id="corredor">
                           
                          </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 corredor = $(this).val();
            $.post("{{ route('us.armazem.gestao.caixas.get.dados.armazem') }}",{
                    '_token':'{{ csrf_token() }}',
                    'corredor':corredor,

            },function(data){
                    
                $("#corredor").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+ "");


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

@endsection()