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

@section('conteudo')
    <link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
    
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table-locale-all.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/export/bootstrap-table-export.min.js"></script>
     
    <style>

        form {
        display: inline-block;
        margin: 0 auto;
        }

        .pseudo-search {
            display: inline;
            border: 2px solid #ccc;
            border-radius: 100px;
            padding: 10px 15px;
            transition: background-color 0.5 ease-in-out;
        }
        input{
            border: 0;
            background-color: transparent;
            width: 200px;

            &:focus {
            // Unsure how to fix this...
            outline: none;
            }
        }

        button, i {
            border: none;
            background: none;
            cursor: pointer;
        }

        select {
            border: none;
        }

        }
    </style>
     
    
    <div class="container">
        <!--<div class="row">-->
        <!--    <nav class="col-12 text-center">-->
        <!--        <div id="crumbs">-->
        <!--            {{-- <h1>Breadcrumbs</h1> --}}-->
        <!--            <ul>-->
        <!--                <li><a href="#1"><i class="fa fa-home"  ></i></a></li>-->
        <!--                <li><a href="#2"><i class="fa fa-shospping-bag"  ></i> Armazem</a></li>-->
        <!--                <li><a href="#3"><i class="fa fa-carst-plus"  ></i> Gestão</a></li>-->
        <!--                <li><a href="#4"><i class="fa fa-credit-card-alt"  ></i> Caixas</a></li>-->
        <!--                <li><a href="#4"><i class="fa fa-search"  ></i> Pesquisar</a></li>-->

        <!--            </ul>-->
        <!--            </div>-->
        <!--            <br><br><br>-->
        <!--    </nav>-->
        <!--</div>-->
        <div class="row">
            <nav class="col-12 position-relative text-center">

                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                      <button class="nav-link " id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Pesquisa por id</button>
                    </li>
                    <li class="nav-item" role="presentation">
                      <!--<button class="nav-link" id="number-tab" data-bs-toggle="tab" data-bs-target="#numbersearch" type="button" role="tab" aria-controls="numbersearch" aria-selected="false">Pesquisa por número</button>  -->
                    </li>
                    <li class="nav-item" role="presentation">
                      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Pesquisa por cliente</button>
                    </li>
                    <li class="nav-item" role="presentation">
                      <button class="nav-link active" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Filtragem de caixa</button>  
                    </li>
                </ul>
                  <div class="tab-content" id="myTabContent">
                      <br>
                      <div class="tab-pane fade " id="home" role="tabpanel" aria-labelledby="home-tab">
                        <br><br><br>
                        <br><br><br>
                        <br><br><br>

                        <form onsubmit="return false" id="formTipe1" class="position-absolute start-50 translate-middle">

                            <h4>Pesquise por caixa</h4>
                            <br>
                            <div class="pseudo-search">
                              <input type="text" id="codigoCaixa" placeholder="Código id da caixa" autofocus required>

                              <i class="fa fa-box "></i>
                              <button class="fa fa-search fa-2x btn btn-sm shadow-none" type="submit" ></button>
                            </div>

                          </form>
                    </div>
                    <div class="tab-pane fade shadow p-4 rounded" id="profile" role="tabpanel" aria-labelledby="profile-tab">

                        <nav class="d-none">
                            {{ $clientes=\App\Models\Cliente::orderBy('created_at','Asc')->get() }}

                        </nav>
                        <div>
                            <h4>Escolha um cliente</h4>
                            <p>Para encontrar suas caixas</p>

                            <div id="stepper1" class="bs-stepper">
                                <table id="tbClientes" class="table container  table-striped table-hover">
                                    <thead>
                                        <tr class="">
                                            <th>#</th>
                                            <th>Número</th>
                                            <th>Nome</th>
                                            <th>Email</th>

                                            <th>Data de cadastro</th>
                                            <th>Escolher</th>

                                            </tr>
                                            </thead>
                                            <tbody>
                                                <div class="d-none">
                                                    {{ $i=1 }}

                                                </div>
                                            @foreach($clientes as $cliente)
                                            <tr>

                                                <td>{{ $cliente->id }}</td>
                                                <td>{{ $cliente->numerocliente}}</td>
                                                <td>{{ $cliente->getUser->getPessoa->nome}}</td>
                                                <td>{{ $cliente->getUser->email}}</td>

                                                <td>{{ $cliente->getUser->getPessoa->created_at}}</td>



                                                <td>
                                                    <a href="{{ route('us.armazem.gestao.caixas.pesquisar.caixas.cliente',$cliente->id) }}" class="btn btn-sm btn-outline-primary btnSelecionarReserva"> <i class="fa fa-cog "></i> Escolher
                                                        <i class="fa fa-angle-double-right"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    <tfoot></tfoot>
                                </table>

                            </div>
                            <nav class="row">
                                
                                <nav class="col-12"> 
                                    <button class="btn btn-success btn-sm"><i class="fa fa-search"></i> Filtrar</button>
                                </nav>
                                
                             
                            </nav>

                        </div>
                    </div>
                    <div class="tab-pane fade show active" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                          <nav class="d-none">
                                {{ $caixas=\App\Models\Caixa::join('caixascheckins','caixascheckins.caixa_id','=','caixas.id')->join('checkins','caixascheckins.checkin_id','=','checkins.id')->select('caixas.*')->distinct('caixas.id')->get() }}
                                {{ $armazens=\App\Models\ArmazemModel::get() }}
                                {{ $tipoCaixa=\App\Models\ConfCaixa::get() }}
                            </nav>
                          
                        <form id="formularioPesquisa">

                            <h4>Filtragem de caixas</h4>
                            <br>
                            <div class="container-fluid">
                                <div class="row">
                                     
                                    <div class="col-3">
                                        <label for="validationTooltip02" class="form-label clienteListCombo">Id da Caixa</label>  <br>
                                        <select id="Sector10" class="position-relative form-control   bg-dark" style="width:200px;" > 
                                        
                                            <option value="0" style="" class="d-none">Vazio</option>
                                            @foreach($caixas as $cx)
                                                <option value="{{$cx->id}}">{{$cx->id}}</option>
                                            @endforeach
                                            
                                        </select>
                                    
                                    </div>
                                    <div class="col-3">
                                        <label for="validationTooltip02" class="form-label clienteListCombo">Tipo de caixa</label>  <br>
                                        <select id="Sector1" class="position-relative form-control   bg-dark" style="width:200px;" >
                                            
                                             @foreach($tipoCaixa as $tpC)
                                                <option value="{{$tpC->id}}">{{$tpC->tipocaixa}}</option>
                                            @endforeach
                                            <option value=" ">  </option>
                                            
                                        </select>

                                    </div>
                                    <div class="col-3">
                                        <label for="validationTooltip02" class="form-label clienteListCombo">Data inicial (CHECKIN)</label>  <br>
                                        <input class="form-control" type="date" id="dataInicial">
                                    </div>
                                    <div class="col-3">
                                        <label for="validationTooltip02" class="form-label clienteListCombo">Data Final (CHECKIN)</label>  <br>
                                       <input class="form-control" type="date" id="dataFinal"  >
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-4">
                                        <label for="validationTooltip02" class="form-label clienteListCombo">Cliente</label>  <br>
                                        <select id="Sector2" class="position-relative form-control   bg-dark" style="width:300px;" >
                                            <option value="0" style="" class="d-none">Escolha aqui o cliente</option>
                                             
                                             @foreach($clientes as $cli)
                                                <option value="{{$cli->id}}"> {{ $cli->getUser->getPessoa->nome}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label for="validationTooltip02" class="form-label clienteListCombo">Departamento</label>  <br>
                                        <select id="Sector3" class="position-relative form-control   bg-dark" style="width:300px;" >
                                            <option value="0" style="" class="d-none">Escolha aqui o departamento</option>
                                            
                                           
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <nav class="row">
                                            <div class="col-4">
                                               <label for="validationTooltip02" class="form-label clienteListCombo">Número inicial</label>  <br>
                                               <input class="form-control" type="number" min="1" max="100000000" id="numeroInicial" placeholder="Inicial" >
                                            </div>
                                            <div class="col-4">
                                               <label for="validationTooltip02" class="form-label clienteListCombo">Número final</label>  <br>
                                                <input class="form-control" type="number" min="1" max="100000000" id="numeroFinal" placeholder="Final" >
                                            </div>
                                            <div class="col-4">
                                               <label for="validationTooltip02" class="form-label clienteListCombo">Número caixa</label>  <br>
                                               <input class="form-control" type="number" min="1" max="100000000" id="numeroUnico" placeholder="Caixa" >
                                            </div>
                                        </nav>
                                    </div>
                                    
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-2">
                                        <label for="validationTooltip02" class="form-label clienteListCombo">Armazém</label>  <br>
                                        <select id="Sector4" 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-2">
                                         <label for="validationTooltip02" class="form-label clienteListCombo">Corredor</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">Modulo</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 class="col-2">
                                         <label for="validationTooltip02" class="form-label clienteListCombo">Célula</label>  <br>
                                        <select id="Sector8" 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="Sector7" 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">Estado</label>  <br>
                                        <select id="Sector9" class="position-relative form-control   bg-dark" style="width:140px;" >
                                            <option value="0" style="" class="d-none">Vazio</option>
                                            <option style="" class="d-none">Reservado</option>
                                            <option style="" class="d-none">Anulado</option>
                                            <option style="" class="d-none">Entrada</option>
                                            <option style="" class="d-none">Arrumado</option>
                                            <option style="" class="d-none">Aberto</option>
                                            <option style="" class="d-none">Em aviso de eliminação</option>
                                            <option style="" class="d-none">Eliminado</option>
                                            <option style="" class="d-none">Destruído</option>
                                            <option style="" class="d-none">Devolvido</option>
                                        </select>
                                    </div>
                                </div>
                                <hr>
                                <nav class="row"> 
                                    <nav class="col-12 text-end"> 
                                        <button class="btn btn-success btn-sm"><i class="fa fa-search"></i> Filtrar</button>
                                    </nav>
                                </nav>
                                <hr>
                                <nav class="row">
                                    <div class="col-12">
                                       
                                        <table id="tbCxs" class="table container  table-striped table-hover">
                                        <thead>
                                            <tr class="">
                                                
                                                <th>Id</th>
                                                <th>Número</th>
                                                <th>Cliente</th>
                                                <th>Departamento</th>
    
                                                <th>Estado</th>
                                                <th>Localização</th>
                                                <th>Documentos</th>
                                                <th>Data</th>
                                                <th>Opções</th>
                                                <!--<th title="Data de cadastro">Data</th>-->
                                                <!--<th>Escolher</th>-->
    
                                                </tr>
                                                </thead>
                                                <tbody id="resultPesquisa">
                                                 
                                                
                                                </tbody>
                                        <tfoot></tfoot>
                                    </table>
                                    </div>
                                    
                                </nav>
                            </div>

                        </form>
                    </div> 
                     <div class="tab-pane fade" id="numbersearch" role="tabpanel" aria-labelledby="number-tab">
                        <br><br><br>
                        <br><br><br>
                        <br><br><br>
                        <form class="position-absolute start-50 translate-middle">

                            <h4>Pesquisa por número</h4>
                            <br>
                            <div class="pseudo-search">
                              <input type="text" id="codigoCaixa3" placeholder="Código da caixa" autofocus required>

                              <i class="fa fa-box "></i>
                              <button class="fa fa-search fa-2x btn btn-sm shadow-none" type="submit" ></button>
                            </div>

                          </form>
                    </div> 
                    
                  </div>



            </nav>
        </div>
    </div>
<!-- Button trigger modal -->

        <button type="button" class="btn btn-primary d-none btnModal".click(); data-bs-toggle="modal" data-bs-target="#staticBackdrop" >
        Pesquisar Caixa
        </button>

        <!-- Modal -->
        <div class="modal  " id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen animate__animated animate__zoomInDown">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Pesquisa de caixa</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="text-center procurandoCaixa">
                        <br><br>
                        <img src="https://media.giphy.com/media/0GsNMsRwDKKMjiwIe5/giphy.gif" width="100" alt="">
                        <br><br><br>
                        <h4>Pesquisando a caixa nº <span id="numeroCaixa">0128</span></h4>
                    </div>
                    <div class="resultadoPositivo text-center">
                        <div class="okayMessage">
                            <img src="https://media.giphy.com/media/ibolLe3mOqHE3PQTtk/giphy.gif" width="200" alt="fazendoCheckin">

                            <br>
                            <h6>Caixa encontrada com sucesso</h6>
                        </div>
                        <div class=" list-group">

                                <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
                                  <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">Número da caixa: <span class="caixaNumber"></span></h5>
                                    <small class=" ">Data de inserção: <small class="dataAdd"></small></small>
                                  </div>
                                   <nav class="text-start">
                                       <br>
                                    <label for="">Código da caixa: <span class="spnIdCx"></span></label><br> <hr>
                                    <label for="">Cliente: <span class="spnCliente"></span></label><br> <hr>
                                    <label for="">Código do cliente: <span class="spnCodeCliente"></span></label><br> <hr>
                                    <label for="">Departamento: <span class="spnDepartamento"></span></label><br> <hr>
                                    <label for="">Estado da caixa: <span class="spnEstadoCaixa"></span></label><br> <hr>
                                    <label for="">Funcionario Responsável: <span class="spnFuncionario"></span> </label><br> <hr>
                                    <label for="">Indexes: <span class="spnQtdIndexes"></span> </label>

                                   </nav>
                                  {{-- <small id="DataInsercao">Donec id elit non mi porta.</small> --}}
                                </a>
                                <a href="#" class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">Localização</h5>
                                        <small class="text-muted">Arrumado em : <span class="spnDataArrumacao"></span></small>
                                    </div>
                                    <nav class="text-start">
                                        <br>
                                        <label for="">Armazem:<span class="spnArmazem"></span></label><br> <hr>
                                        <label for="">Corredor:<span class="spnCorredor"></span></label><br> <hr>
                                        <label for="">Modulo:<span class="spnModulo"></span></label><br> <hr>
                                        <label for="">Célula:<span class="spnCelula"></span></label><br> <hr>
                                        <label for="">Fileira:<span class="spnFileira"></span></label><br> <hr>
                                        {{-- <label for="">Profundidade:<span class="spnProfundidade"><i>Futuras edições</i></span></label><br> <hr>
                                        <label for="">Nivel na fileira:<span class="spnNivelNaFileira"><i>Futuras edições</i></span></label><br> <hr> --}}

                                        <a class="btn btn-primary btn-sm"><i class="fa fa-shopping-cart"></i> Adicionar no carrinh das localizações</a>
                                        <a class="btn btn-primary btn-sm"><i class="fa fa-print"></i> Imprimir Localização</a>



                                    </nav>
                                </a>

                                <a href="#" class="list-group-item list-group-item-action">
                                  <div class="d-flex w-100 justify-content-between">
                                      <br><br>
                                    <h5 class="mb-1">Outras caixas</h5>
                                    {{-- <small class="text-muted">3 days ago</small> --}}
                                    <nav class="text-start">
                                       <a class="btn btn-primary btn-sm">Do mesmo cliente</a>
                                       <a class="btn btn-primary btn-sm">Do mesmo departamento</a>
                                       <a class="btn btn-primary btn-sm">Cadastradas pelo mesmo funcionário</a>
                                       <a class="btn btn-primary btn-sm">No mesmo corredor</a>
                                       <a class="btn btn-primary btn-sm">No mesmo armazem</a>
                                       <a class="btn btn-primary btn-sm">Na mesma célula</a>
                                       <a class="btn btn-primary btn-sm">No mesmo módulo</a>
                                       <a class="btn btn-primary btn-sm">No mesmo checkin</a>
                                       <a class="btn btn-primary btn-sm">Cadastradas no mesmo dia</a>
                                    </nav>
                                  </div>
                                </a>
                                <br>
                                <a href="#" class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <br><br>
                                      <h5 class="mb-1">Outras informações</h5>
                                      <small class="text-muted">Link para informações gerais da caixa</small>
                                      <nav class="text-start">
                                         <a class="btn btn-primary btn-sm">Relatórios de rearumações</a>
                                         <a class="btn btn-primary btn-sm">Relatório de anulações</a>
                                         <a class="btn btn-primary btn-sm">Relatório de Pesquisas</a>
                                         <a class="btn btn-primary btn-sm">Relatório de movimentações</a>
                                         <a class="btn btn-primary btn-sm">Relatório de indexes</a>
                                         <a class="btn btn-primary btn-sm">Histórico geral da caixa</a>
                                         <a class="btn btn-primary btn-sm">Ver tudo sobre a caixa</a>
                                      </nav>
                                    </div>
                                  </a>

                        </div>
                    </div>
                    <div class="resultadoNegativo text-center">
                        <div class="okayMessage2">
                            <br><br><br><br>
                            <img src="https://media.giphy.com/media/Vd3A6wD5JnbaNQv42f/giphy.gif"   alt="fazendoCheckin">

                            <br><br> <br>
                            <h4>Caixa não encontrada </h4>
                        </div>
                        <div>

                        </div>
                    </div>
                </div>
                {{-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary">Understood</button>
                </div> --}}
                </div>
            </div>
        </div>
    <script>

        $(function(){
            $("#Sector1").select2({
                placeholder: 'Tipo de caixa'
            });
            $("#Sector2").select2({
                placeholder: 'Cliente'
            });
            $("#Sector3").select2({
                placeholder: 'Departamento'
            });
            $("#Sector4").select2({
                placeholder: 'Armazém'
            });
            $("#Sector5").select2({
                placeholder: 'Corredor'
            });
            $("#Sector6").select2({
                placeholder: 'Modulo'
            });
            $("#Sector7").select2({
                placeholder: 'Fileira'
            });
            $("#Sector8").select2({
                placeholder: 'Célula'
            });
            $("#Sector9").select2({
                placeholder: 'Estado'
            });
             $("#Sector10").select2({
                placeholder: 'Id da Caixa'
            });
            $("#Sector11").select2({
                placeholder: 'Data Inicial'
            });
            $("#Sector12").select2({
                placeholder: 'DataFinal'
            });
             $("#Sector13").select2({
                placeholder: 'Número inicial'
            });
            $("#Sector14").select2({
                placeholder: 'Número final'
            });
            $('#tabelaClientes').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true,
            });
              //$('#tbClientes').bootstrapTable()
            
           
            $(".okayMessage").hide();
            $(".okayMessage2").hide();
            $(".resultadoPesquisa").hide();
            $('#tabelaCaixas').DataTable({
                 "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true,
            });
              $('#tbCxs').bootstrapTable()
            $("#codigoCaixa").on("keydown keypress keyup",function(e){


                    // alert(e.keyCode)
                    if(e.keyCode>=48 && e.keyCode<=57)
                    {

                    }
                    else if (e.keyCode==8 || e.keyCode==37 || e.keyCode==39 || e.keyCode==46 || e.keyCode==13){
                    }
                    else{
                        return false;

                    }

            });
            
            $("#Sector4").change(function(){
                var armazemId=$(this).val();
                
                if (armazemId>0){
                    $.post("{{ route('us.armazem.gestao.caixas.psqCorr') }}",{
                        '_token':'{{ csrf_token() }}',
                        'armazemId':armazemId,

                    },function(data){
                        $("#Sector5").empty();
                        $("#Sector6").empty();
                        $("#Sector7").empty();
                        $("#Sector8").empty();
                        $("#Sector5").append(data);
                    });
                }else{
                    $("#Sector5").empty();
                    $("#Sector6").empty();
                    $("#Sector7").empty();
                    $("#Sector8").empty();
                }
            });
            $("#Sector5").change(function(){
                var corredorId=$(this).val();
                //  $.alert(corredorId);
                if (corredorId>0){
                    $.post("{{ route('us.armazem.gestao.caixas.psqMod') }}",{
                        '_token':'{{ csrf_token() }}',
                        'corredorId':corredorId,

                    },function(data){
                        $("#Sector6").empty();
                        $("#Sector7").empty();
                        $("#Sector8").empty();
                        $("#Sector6").append(data);
                    });
                }else{
                    $("#Sector6").empty();
                    $("#Sector7").empty();
                    $("#Sector8").empty();
                }
            });
            $("#Sector6").change(function(){
                var moduloId=$(this).val(); 
                if (moduloId>0){
                    $.post("{{ route('us.armazem.gestao.caixas.psqCel') }}",{
                        '_token':'{{ csrf_token() }}',
                        'moduloId':moduloId,

                    },function(data){ 
                        $("#Sector7").empty();
                        $("#Sector8").empty();
                        $("#Sector8").append(data);
                    });
                }else{
                   
                    $("#Sector7").empty();
                    $("#Sector8").empty();
                }
            });
            $("#Sector8").change(function(){
                var celulaId=$(this).val();
                
                if (celulaId>0){
                    $.post("{{ route('us.armazem.gestao.caixas.psqFil') }}",{
                        '_token':'{{ csrf_token() }}',
                        'celulaId':celulaId,

                    },function(data){
                     
                        $("#Sector7").empty(); 
                        $("#Sector7").append(data);
                    });
                }else{
                    $("#Sector7").empty(); 
                }
            });
             
            
            $("#Sector2").change(function(){
                var clienteId=$(this).val();
                
                if (clienteId>0){
                    $.post("{{ route('us.armazem.gestao.caixas.psqDepCliente') }}",{
                        '_token':'{{ csrf_token() }}',
                        'clienteId':clienteId,

                    },function(data){
                     
                        $("#Sector3").empty(); 
                        $("#Sector3").append(data);
                    });
                }else{
                    $("#Sector3").empty(); 
                }
            });
            $("#Sector10, #Sector2, #Sector3").change(function(){
                // $("#formularioPesquisa").submit();
            });
             $("#numeroUnico,#numeroInicial,#dataInicial,#numeroFinal,#dataFinal").on("change keypress keydown keyup ",function(){
                // $("#formularioPesquisa").submit();
            });
             $("#formularioPesquisa").submit(function(e){
                e.preventDefault();
                $("#resultPesquisa").empty();
              
                let idCaixa=$("#Sector10").val();
                let dataInicial=$("#dataInicial").val();
                let dataFinal=$("#dataFinal").val();
                let tipoCaixa=$("#Sector1").val();
                let cliente=$("#Sector2").val();
                let departamento=$("#Sector3").val();
                let numeroInicial=$("#numeroInicial").val();
                let numeroFinal=$("#numeroFinal").val();
                let armazem=$("#Sector4").val();
                let corredor=$("#Sector5").val();
                let modulo=$("#Sector6").val();
                let celula=$("#Sector8").val();
                let fileira=$("#Sector7").val();
                let estado=$("#Sector9").val();
                let numeroUnico=$("#numeroUnico").val();
                $.post("{{ route('us.armazem.gestao.caixas.filtrarCaixas') }}",{
                        '_token':'{{ csrf_token() }}', 
                        'idCaixa':idCaixa,
                        'dataInicial':dataInicial,
                        'dataFinal':dataFinal,
                        'tipoCaixa':tipoCaixa,
                        'cliente':cliente,
                        'departamento':departamento,
                        'numeroInicial':numeroInicial,
                        'numeroFinal':numeroFinal,
                        'armazem':armazem,
                        'corredor':corredor,
                        'modulo':modulo,
                        'celula':celula,
                        'fileira':fileira,
                        'estado':estado,
                        'numeroUnico':numeroUnico

                    },function(data){
                        
                        
                        $("#resultPesquisa").empty();
                        $("#resultPesquisa").append(data);
                        $('#tbCxs').bootstrapTable('append', randomData())
                        $('#tbCxs').bootstrapTable('scrollTo', 'bottom')
                         
                       /* $('#tabelaCaixas').DataTable({
                             "paging": true,
                            "lengthChange": true,
                            "searching": true,
                            "ordering": true,
                            "info": true,
                            "autoWidth": true,
                        });*/
                    });
             });
             $("#resultPesquisa").click(function (){
                console.clear()
                console.log($(this)) 
             });
            $("#formTipe1").submit(function(){
                $(".procurandoCaixa").show();
                $(".resultadoPositivo").hide();
                $(".resultadoNegativo").hide();

                var codigoCaixa=$("#codigoCaixa");

                $(".btnModal").click();
                $("#numeroCaixa").text(codigoCaixa.val());
                $.post("{{ route('us.armazem.gestao.caixas.pesquisar') }}",{
                        '_token':'{{ csrf_token() }}',
                        'caixa_id':codigoCaixa.val(),

                },function(data){

                        $(".procurandoCaixa").hide();
                       if (data==0){
                           
                            $(".okayMessage2").show();
                            $(".okayMessage").hide();
                            $(".resultadoNegativo").show();
                            $(".resultadoPositivo").hide();
                            
                       }else{

                           $(".resultadoPesquisa").empty();
                           var dataObj=$.parseJSON(data);
                            var id=dataObj[0].id;
                            var numero=dataObj[0].numero;
                            var data=dataObj[0].data;

                            var spnIdCx=dataObj[0].id;
                            var spnCliente=dataObj[0].cliente;
                            var spnCodeCliente=dataObj[0].codigocliente;
                            var spnDepartamento=dataObj[0].departamento;
                            var spnEstadoCaixa=dataObj[0].estado;
                            var spnFuncionario=dataObj[0].funcionario;
                            var spnQtdIndexes=dataObj[0].indexes;
                            var spnArmazem=dataObj[0].armazem;
                            var spnDataArrumacao=dataObj[0].dataarrumacao;
                            var spnCorredor=dataObj[0].corredor;
                            var spnModulo=dataObj[0].Modulo;
                            var spnCelula=dataObj[0].Celula;
                            var spnFileira=dataObj[0].Fileira;
                            var spnProfundidade=dataObj[0].Profundidade;
                            var spnNivelNaFileira=dataObj[0].nuvelnafileira;


                            $(".caixaNumber").text(numero);
                            $(".dataAdd").text(data);
                            $(".spnIdCx").text(spnIdCx);
                            $(".spnCliente").text(spnCliente);
                            $(".spnCodeCliente").text(spnCodeCliente);
                            $(".spnDepartamento").text(spnDepartamento);
                            $(".spnEstadoCaixa").text(spnEstadoCaixa);
                            $(".spnFuncionario").text(spnFuncionario);
                            $(".spnQtdIndexes").text(spnQtdIndexes);
                            $(".spnArmazem").text(spnArmazem);
                            $(".spnDataArrumacao").text(spnDataArrumacao);
                            $(".spnCorredor").text(spnCorredor);
                            $(".spnModulo").text(spnModulo);
                            $(".spnCelula").text(spnCelula);
                            $(".spnFileira").text(spnFileira);
                            $(".spnProfundidade").text(spnProfundidade);
                            $(".spnNivelNaFileira").text(spnNivelNaFileira);

                            $(".okayMessage").show().delay(2000).fadeOut();
                            $(".okayMessage2").hide();
                            
                            // $(".resultadoPesquisa").show();
                            $(".resultadoPositivo").show();
                            $(".resultadoNegativo").hide();
                       }




                });
            });
        });


    </script>
@endsection
