@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">
    {{ $bases = \App\Models\BaseGestdoc::get()}}

</nav>
<h4>Custódia (Gestão)</h4>

<br>
<h5>Acesso rápido</h5>

<hr>
 
<div class="row">
     <div class="col">
        <label for="validationTooltip02" class="form-label clienteListCombo">Selecione a base</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($bases as $base)
                <option value="{{$base->id}}">{{$base->base}}</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>
                        Bases
                    </label>
                    <hr>
                    <div class="tile_count ">
                        <div class="x_title">
                            <h2>Gestão administrativa de bases</h2>
                            <div class="clearfix"></div>

                        </div>
                        
                        
                         <nav class="d-none">
                            {{$cr=0}}
                            {{$md=0}}
                            {{$cel=0}}
                            {{$fil=0}}
                            {{$espC=0}}
                          
                        </nav>
                        <div class="col-md-2 col-sm-4  tile_stats_count">


                            <span class="count_top"> <i class="fa fa-warehouse"></i> ARMAZÉNS</span>
                            <div class="count armNumbers">0</div>
                            
                            {{-- <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span> --}}
                        </div>
                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i>CORREDORES</span>
                            <div class="count crrNumbers">{{  $cr }}</div>
                             
                        </div>
                        <div class="col-md-2 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-2 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-2 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-2 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>
                    <hr>
                    
                    <small>Espaço geral na base</small>
                    <div class="progress">
                        <div class="bar bar1" style="width:0%">
                        	<p class="percent percentagemGeral">0</p>
                        </div>
                    </div>
                    <small>Espaço usado</small>
                    <div class="progress">
                        <div class="bar bar2" style="width:0%">
                        	<p class="percent percentagemUsada">0</p>
                        </div>
                    </div>
                    <small>Espaço restante</small>
                    <div class="progress">
                        <div class="bar bar3" style="width:0%">
                        	<p class="percent percentagemRestante">0</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>Armazém</th>
                                <th>Data de cadastro</th>
                                <th>Mais</th>

                            </tr>

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

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


                    $("#Armazens").append(data[0].Armazens+": 100");
                    
                }
                
            }
            
            );
           
            
        });
        
    })
</script>

@endsection()