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

@section('conteudo')

<nav class="d-none">
    {{ $armazens=\App\Models\ArmazemModel::get() }}
     
</nav>
<nav class="container">
    <div>
        <h3>Mapa do armazém-visualização das caixas da fileira </h3>
        <div class="alert alert-danger" role="alert">
         Nota: a forma de ilustração da localização obedece a seguinte regra: <i title="Corredor">C</i>-<i title="Módulo">M</i>-<i title="Nível">N</i>-<i title="Fileira">F</i>
        </div>
        <hr>
    </div>
    <div class="row">
        <div class="col">
            <label for="validationTooltip02" class="form-label clienteListCombo">Armazém</label>  <br>
            <select id="Sector1" class="position-relative form-control   bg-dark" style="width:140px;" >
                <option value="0" style="display:none" class="d-none">Vazio</option>
                 @foreach($armazens as $arm)
                    <option value="{{$arm->id}}">{{$arm->nomearmazem}}</option>
                @endforeach
            </select>
        </div>
         <div class="col">
             <label for="validationTooltip02" class="form-label clienteListCombo">Corredor</label>  <br>
            <select id="Sector2" class="position-relative form-control   bg-dark" style="width:140px;" >
                <option value="0" style="" class="d-none">Vazio</option>
                
            </select>
        </div>
         <div class="col">
             <label for="validationTooltip02" class="form-label clienteListCombo">Modulo</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">
             <label for="validationTooltip02" class="form-label clienteListCombo">Nível</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">
             <label for="validationTooltip02" class="form-label clienteListCombo">Fileira</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="row">
            <div class="col">
                <br> 
                <hr> 
            </div>
        </div>
        <nav class="row">
            <div class="col-12">
               
                <table id="tabelaMapa" class="table container  table-striped table-hover">
                <thead>
                    <tr class="">
                        <th>Localização</th>
                        <th>Cliente</th>
                        <th>Numero da caixa</th>
                        <!--<th>Número de índexes</th>-->
                    </tr>
                </thead>
                <tbody id="resultPesquisa">
                 
                
                </tbody>
            </table>
            </div>
            <br><br><br>
             
        </nav>
    </div>
    
</nav>

<script>
    $(function(){
        
        $("#Sector1").select2({
            placeholder: 'Armazém'
        });
        $("#Sector2").select2({
            placeholder: 'Corredor'
        });
        $("#Sector3").select2({
            placeholder: 'Modulo'
        });
        $("#Sector4").select2({
            placeholder: 'Celula'
        });
        $("#Sector5").select2({
            placeholder: 'Fileira'
        });
        
        $("#Sector1").change(function(){
            $("#resultPesquisa").empty();
            var armazemId=$(this).val();
            
            if (armazemId>0){
                $.post("{{ route('us.armazem.gestao.caixas.psqCorr') }}",{
                    '_token':'{{ csrf_token() }}',
                    'armazemId':armazemId,

                },function(data){
                    $("#Sector2").empty();
                    $("#Sector3").empty();
                    $("#Sector4").empty();
                    $("#Sector5").empty();
                    $("#Sector2").append(data);
                    $.post("{{ route('us.armazem.gestao.mapa.armazem') }}",{'_token':'{{ csrf_token() }}','armazemId':armazemId,},
                    function(date){
                         $("#resultPesquisa").append(date);
                    });
                });
            }else{
                $("#Sector2").empty();
                $("#Sector3").empty();
                $("#Sector4").empty();
                $("#Sector5").empty();
            }
        });
        
        $("#Sector2").change(function(){
            $("#resultPesquisa").empty();
            var corredorId=$(this).val();
            //  $.alert(corredorId);
            if (corredorId>0){
                $.post("{{ route('us.armazem.gestao.caixas.psqMod') }}",{
                    '_token':'{{ csrf_token() }}',
                    'corredorId':corredorId,
    
                },function(data){
                    $("#Sector3").empty();
                    $("#Sector4").empty();
                    $("#Sector5").empty();
                    $("#Sector3").append(data);
                    $.post("{{ route('us.armazem.gestao.mapa.corredor') }}",{'_token':'{{ csrf_token() }}','corredorId':corredorId,},
                    function(date){
                         $("#resultPesquisa").append(date);
                    });
                });
            }else{
                $("#Sector3").empty();
                $("#Sector4").empty();
                $("#Sector5").empty();
            }
        });
        $("#Sector3").change(function(){
            $("#resultPesquisa").empty();
            var moduloId=$(this).val(); 
            if (moduloId>0){
                $.post("{{ route('us.armazem.gestao.caixas.psqCel') }}",{
                    '_token':'{{ csrf_token() }}',
                    'moduloId':moduloId,
                },function(data){ 
                    $("#Sector4").empty();
                    $("#Sector5").empty();
                    $("#Sector4").append(data);
                    $.post("{{ route('us.armazem.gestao.mapa.modulo') }}",{'_token':'{{ csrf_token() }}','moduloId':moduloId,},
                    function(date){
                         $("#resultPesquisa").append(date);
                    });
                });
            }else{
               
                $("#Sector4").empty();
                $("#Sector5").empty();
            }
        });
        $("#Sector4").change(function(){
            $("#resultPesquisa").empty();
            var celulaId=$(this).val();
            
            if (celulaId>0){
                $.post("{{ route('us.armazem.gestao.caixas.psqFil') }}",{
                    '_token':'{{ csrf_token() }}',
                    'celulaId':celulaId,
    
                },function(data){
                 
                    $("#Sector5").empty(); 
                    $("#Sector5").append(data);
                    $.post("{{ route('us.armazem.gestao.mapa.celula') }}",{'_token':'{{ csrf_token() }}','celulaId':celulaId,},
                    function(date){
                         $("#resultPesquisa").append(date);
                    });
                });
            }else{
                $("#Sector5").empty(); 
            }
        });
        $("#Sector5").change(function(){
            $("#resultPesquisa").empty();
            var fileira=$(this).val();
            $.post("{{ route('us.armazem.gestao.mapa.fileira') }}",{'_token':'{{ csrf_token() }}','fileiraId':fileira,},
            function(date){
                 $("#resultPesquisa").append(date);
            });
            
        });
    })
</script>
@endsection