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

@section('conteudo')
<style>

  </style>
<nav class="d-none">
    {{-- {{ $clientes=\App\Models\Cliente::join('departamentosclientes','departamentosclientes.cliente_id','=','clientes.id')->select('clientes.*')->distinct()->get() }} --}}
    {{ $reserva=\App\Models\Reserva::where('id',$id)->first() }}
    {{ $caixas=\App\Models\Caixa::where('reserva_id',$id)->get() }}
    {{ $qtdCxCheckins=0 }}
    @foreach($caixas as $caixa)
        {{ $caixasCheckin=\App\Models\CaixaCheckin::join('caixas','caixas.id','=','caixascheckins.caixa_id')->where('caixas.id',$caixa->id)->first() }}
        @if($caixasCheckin!=null)
        {{ $qtdCxCheckins++ }}
        @endif
    @endforeach
    {{ $checkins=\App\Models\Checkin::join('caixascheckins','caixascheckins.checkin_id','=','checkins.id')->join('caixas','caixas.id','=','caixascheckins.caixa_id')->where('caixas.reserva_id',$id)->select('checkins.*')->distinct('checkins.id')->get() }}
    {{ $caixasEmprocesso=$qtdCxCheckins }}
    {{ $caixasDisponiveis=$reserva->quantcaixas-$caixasEmprocesso }}
    {{ $qtdCxProcesso=0 }}

    {{ $ultimoNumeroCx=\App\Models\Caixa::join('reservas','reservas.id','=','caixas.reserva_id')->where('reservas.cliente_id',$reserva->getCliente->id)->select('caixas.*')->latest('caixas.created_at')->first() }}
    {{ $ultimoNumeroCxR=\App\Models\Reserva::where('cliente_id',$reserva->getCliente->id)->latest()->first() }}
    {{-- {{ $ultimoNumeroCx=\App\Models\Caixa::join('reservas','reservas.id','=','caixas.reserva_id')->select('caixas.id')->latest()->first() }} --}}
    {{ $ultimoNumeroCaixa=$ultimoNumeroCxR->getCaixa->last()->numerodacaixa }}
    {{-- join('caixasreservas','caixasreservas.caixa_id','=','caixas.id')-> --}}
    {{-- ->join('checkins','checkins.id','=','caixasreservas.checkin_id')->where('checkins.reserva_id',$id) --}}
    {{-- @foreach ($checkins as $checkin)
        {{ $qtdCxProcesso+=$checkin->getReserva->quantcaixas }}
    @endforeach --}}
</nav>
<div class="btn-group" role="group" aria-label="Basic example">
    <a href="{{ route('us.armazem.gestao.caixas.ver.reservas') }}"  class="btn blue-gradient"><i class="fa fa-bars"></i> Outras reservas</a>
    <a href="{{ route('us.armazem.gestao.caixas.nova.reserva') }}"  class="btn blue-gradient"><i class="fa fa-plus"></i> Nova reserva</a>
</div>
<hr>

{{-- {{ $cx=0002030105 }}
{{ $clienteId=1000 }}
{{ $texto=" q480 \n FR \"ETIQ2\" \n ? \n CX".$cx." \n ".$clienteId }}
{{ $y=date('Y')}}
{{ $m=date('m')}}
{{ $d=date('d')}}
{{ $h=date('H')}}
{{ $path= 'public/etiquetas/ano/'.$y.'/'.'mês/'.$m.'/'.'dia/'.$d.'/hora'.'/'.$h.'/etiqueta_'.$clienteId.'_'.$cx.'.gestdoc'}} --}}
{{-- {{ $rand=Faker::random(1000) }}  --}}
{{-- {{
    Storage::put($path,"\n". $texto)

    }}

{{
     response()->download($path)

}} --}}
<div class="bs-stepper">
    <div class="bs-stepper-header" role="tablist">
      <!-- your steps here -->
      <div class="step" data-target="#logins-part">
        <button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
          <span class="bs-stepper-circle">1</span>
          <span class="bs-stepper-label">Visualizar reserva</span>
        </button>
      </div>
      <div class="line"></div>
      <div class="step" data-target="#information-part">
        <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
          <span class="bs-stepper-circle"> <i class="fa fa-box"></i></span>
          <span class="bs-stepper-label">Checkin</span>
        </button>
      </div>
      <div class="line"></div>
      <div class="step" data-target="#End-part">
        <button type="button" class="step-trigger" role="tab" aria-controls="End-part" id="End-part-trigger">
          <span class="bs-stepper-circle  "><i class="fa fa-check"></i></span>
          <span class="bs-stepper-label">Resultado</span>
        </button>
      </div>
    </div>
    <div class="bs-stepper-content">
      <!-- your steps content here -->
      <div id="logins-part" class="content" role="tabpanel" aria-labelledby="logins-part-trigger">


        <hr>

        <div class="list-group  ">
            <a href="#" class="list-group-item list-group-item-action blue-gradient text-white" aria-current="true">
                <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">CLIENTE: {{ $reserva->getCliente->getUser->getPessoa->nome }}</h5>
                <small>Cliente {{$reserva->getCliente->id}}</small>
                </div>
                <div class="row">
                    <div class="col-2   text-center ">
                        <img width="80" class="shadow border" src="{{ asset('storage/img/clientes/'.$reserva->getCliente->getUser->avatar) }}">
                    </div>
                    <div class="col-9">
                        <label class="mb-1">Departamento:{{ $reserva->getCliente->getDepartamento->departamento}}</label> <br>
                        <label class="mb-1">Id: {{$reserva->getCliente->id}}</label> <br>
                        <label class="mb-1">Codigo: {{$reserva->getCliente->numerocliente}}</label> <br>
                        <label class="mb-1">Email: {{$reserva->getCliente->getUser->email}}</label> <br>
                        {{-- <label class="mb-1">Some placeholder content in a paragraph</label> <br> --}}

                    </div>
                </div>

            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">RESERVA</h5>
                <small class="text-muted">Reservado aos {{$reserva->created_at}}</small>
                </div>
                <label class="mb-1">Código da reserva: {{$reserva->id}}</label> <br>
                <label class="mb-1">Armazém: {{$reserva->getArmazem->nomearmazem}}</label> <br>

            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">CAIXA</h5>
                <small class="text-muted">Tipo: {{$reserva->getTipoCaixa->tipocaixa}}</small>
                </div>
                <label class="mb-1">Caixas reservadas: {{$reserva->quantcaixas}} cx</label> <br>
                <label class="mb-1">Caixas ainda disponíveis:{{$caixasDisponiveis}} cx</label> <br>
                <label class="mb-1">Caixas com checkin feito:{{$qtdCxCheckins}} cx</label> <br>
                <label class="mb-1">Número da última caixa reservada: {{ $ultimoNumeroCaixa}}</label> <br>
                {{-- <label class="mb-1">Número da última caixa arrumada: {{ $ultimoNumeroCaixa}}</label> <br> --}}
            </a>
            <br><br>
            @if($caixasEmprocesso>0)

                <div href="#" class="rounded shadow p-4 blue-gradient list-group-item list-group-item-action ">
                    <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1  text-white">Checkins feitos </h5>
                    <small class="text-white">{{ $checkins->count()}} Checkin(s)</small>
                    </div>
                    <nav class="row justify-content-center">
                        <label for="" class="d-none">{{ $count=1 }}</label>
                        @foreach($checkins as $checkin)
                            <div class="col  p-4 m-2 rounded shadow" style="background-color:#e5e5e5;">
                                <h6 class="mb-1">Checkin {{ $count++ }}</h6>
                                <small class="text-muted">{{ $checkin->qtdcaixas }} caixa(s) <br> {{$checkin->created_at}}</small>
                                <br>
                                Caixas:

                                <br>
                                @foreach($checkin->getCaixaCheckin as $caixasreserva)

                                    <small >cx({{ $caixasreserva->getCaixa->id }} | {{ $caixasreserva->getCaixa->numerodacaixa }})</small>


                                @endforeach

                                <br>
                                <a href="{{ route('us.armazem.gestao.caixas.ver.checkin',$checkin->id) }}" class="btn w-100 btn-sm btn-info">ver checkin</a>
                            </div>
                        @endforeach
                    </nav>

                </div>
                <br>
            @endif


            <!-- Table with panel -->
            <div class="card card-cascade narrower">

                <!--Card image-->
                <div
                class="view view-cascade shadow gradient-card-header blue-gradient narrower py-2 mx-4 mb-3 d-flex justify-content-between align-items-center">

                <div>
                    {{-- <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                    <i class="fas fa-th-large mt-0"></i>
                    </button>
                    <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                    <i class="fas fa-columns mt-0"></i>
                    </button> --}}
                </div>

                <a href="" class="white-text mx-3">Caixas reservadas</a>

                <div>
                    <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                    <i class="fas fa-pencil-alt mt-0"></i>
                    </button>
                    {{-- <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                    <i class="far fa-trash-alt mt-0"></i>
                    </button> --}}
                    <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                    <i class="fas fa-trash-restore mt-0"></i>
                    </button>
                </div>

                </div>
                <!--/Card image-->

                <div class="px-4">

                <div class="table-wrapper">
                    <!--Table-->
                    <table class="table table-hover mb-0">

                    <!--Table head-->
                    <thead>
                        <tr>
                        <th>
                            <input class="form-check-input" type="checkbox" id="checkbox">
                            <label class="form-check-label" for="checkbox" class="mr-2 label-table"></label>
                        </th>
                        <th class="th-lg">
                            <a>Código
                            <i class="fas fa-sort ml-1"></i>
                            </a>
                        </th>

                        <th class="th-lg">
                            <a href="">Numero
                            <i class="fas fa-sort ml-1"></i>
                            </a>
                        </th>
                        </tr>
                    </thead>
                    <!--Table head-->

                    <!--Table body-->
                    <tbody id="listaCaixasTableBody">

                        <label class="d-none">{{ $qtdCaixasGer=0 }}</label>
                        <label class="d-none">{{ $i=1 }}</label>
                        @foreach($caixas as $caixa)
                        <nav class="d-none">
                            {{ $caixascheckins=\App\Models\CaixaCheckin::where('caixa_id',$caixa->id)->first() }}
                        </nav>

                        @if($caixascheckins==null)


                            <tr>
                                <th scope="row">
                                    <form class="caixaCheck">

                                        <input class="form-check-input" type="checkbox" id="checkbox{{ $i }}"  >
                                        <label class="form-check-label" for="checkbox{{ $i }}" class="label-table"></label>
                                        <input class="form-check-input" type="hidden" value="{{ $caixa->id }}">
                                        <input class="form-check-input" type="hidden" value="{{ $caixa->numerodacaixa }}">
                                    </form>
                                </th>
                                <td>{{ $caixa->id }}</td>
                                <td>Caixa número: {{ $caixa->numerodacaixa }}</td>

                            </tr>
                            <nav class="d-none">
                                {{ $qtdCaixasGer++ }}
                            </nav>
                        @endif

                        @endforeach
                    </tbody>
                    <!--Table body-->
                    </table>
                    <!--Table-->
                </div>

                </div>

            </div>
            <!-- Table with panel -->
            <br><br><br><br>
            @if($caixasDisponiveis>0)
                <button class="btn btn-bd-download shadow blue-gradient w-25 shadow btnCheckin" > <i class="fa fa-check shadow"></i> Checkin &nbsp;&nbsp;&nbsp; <i class=" fa fa-angle-double-right animate__animated animate__infinite animate__fast animate__fadeInLeft"></i></button>
            @endif
      </div>
    </div>
      <div id="information-part" class="content " role="tabpanel" aria-labelledby="information-part-trigger">


                <center>
                    <div class="card w-50 ">

                        <!-- Card image -->
                        <div class="view overlay">
                        <img class="card-img-top"  src="{{ asset('img/box2.jpg') }}" alt="Card image cap">
                        {{-- <img class="card-img-top" width="100" height="300" src="https://media.giphy.com/media/vG1Dgq3JRXLMc/giphy.gif" alt="Card image cap"> --}}

                        <a href="#!">
                            <div class="mask rgba-white-slight"></div>
                        </a>
                        </div>

                        <!-- Card content -->
                        <div class="card-body">

                        <!-- Title -->
                        <h4 class="card-title">CAIXAS ESCOLHIDAS PARA O CHECKIN ( <span id="qtdCxEscolhidas"></span> )</h4>
                        <!-- Text -->
                        <p class="card-text">Caixas ( <span id="numerosCxs"></span> )</p>
                        <!-- Button -->

                        <button class="btn btn-bd-download blue-gradient w-75 shadow btnFinalCheck" > <i class="fa fa-sort-numeric-asc shadow"></i> Confirmar e finalizar checkin &nbsp;&nbsp;&nbsp; <i class=" fa fa-angle-double-right animate__animated animate__infinite animate__fast animate__fadeInLeft"></i></button>

                        </div>

                    </div>
                    <!-- Card -->
                </center>
                <!-- Card -->


        <br><br>
        <a class="btn btn-bd-download blue-gradient w-25 shadow  " href="" ><i class=" fa fa-angle-double-left animate__animated animate__infinite animate__fast animate__fadeInLeft"></i> &nbsp;&nbsp;&nbsp;   Voltar</a>


      </div>
      <div id="End-part" class="content" role="tabpanel" aria-labelledby="End-part-trigger">

        <div class="row">
            <div class="col-12">
                <div class="tabs">
                    <div class="tab-2">
                      <label for="tab2-1">RESULTADO</label>
                      <input id="tab2-1" name="tabs-two" type="radio" checked="checked">
                      <div>
                            <h4>Checkin feito com sucesso</h4>
                            <p>Relatório do checkin realizado<p>

                            <ul class="list-group">
                                <li class="list-group-item active">
                                    <div class="md-v-line"></div><i class="fas fa-boxes mr-4 pr-3"></i> Quantidade de caixas ( <span class="badge badge-primary badge-pill" id="numeroDeCaixas2"></span> )
                                </li>
                                <nav id="caixasLista">



                                </nav>


                            </ul>
                            <br><br><br><br>
                            {{-- <a class="btn btn-bd-download blue-gradient shadow btnFazerCheckin btnPrintRelatorios" >  Imprimir relatório <i class="fa fa-print animate__animated animate__infinite animate__fast animate__fadeIn"></i></a> --}}
                            <a href="{{ route('us.armazem.gestao.caixas.etiquetas') }}" class="btn btn-bd-download blue-gradient shadow btnFazerCheckin btnGerarEtiquetas" >  Gerador de etiquetas <i class="fa fa-ticket animate__animated animate__infinite animate__fast animate__fadeIn"></i></a>
                            {{-- <a class="btn btn-bd-download blue-gradient shadow btnFazerCheckin btnVerCheckin"  >  Ver mais <i class="fa fa-eye animate__animated animate__infinite animate__fast animate__fadeIn"></i></a> --}}

                        </div>
                    </div>
                    <div class="tab-2">
                        {{-- <label for="tab2-2"> <i class="fa fa-cog"></i> ETIQUETAS</label>
                        <input id="tab2-2" name="tabs-two" type="radio">
                        <div>
                            <h4>ETIQUETAS</h4>
                            <p>Pretende gerar etiquetas para as cahxas listadas?</p>
                            <!-- Editable table -->
                            <div class="card">
                                <h3 class="card-header text-center font-weight-bold text-uppercase py-4">
                                LISTA DE CAIXAS
                                </h3>
                                <div class="card-body">
                                <div id="table" class="table-editable">

                                    <table class="table table-bordered table-responsive-md table-striped text-center">
                                    <thead>
                                        <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Caixa</th>
                                        <th class="text-center">Numeração</th>
                                        <th class="text-center">Remover</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        <!-- This is our clonable table line -->
                                        <tr class="hide">
                                        <td class="pt-3-half" >1</td>
                                        <td class="pt-3-half" > Caixa 1 </td>
                                        <td class="pt-3-half" contenteditable="true">5232</td>



                                        </tr>
                                    </tbody>
                                    </table>
                                    <span class="table-add float-right mb-3 mr-2">
                                    <a href="#!" class="text-success"
                                        ><i class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
                                </div>
                                </div>
                            </div>
                            <!-- Editable table -->
                            <!--<button class="btn btn-bd-download aqua-gradient w-25 shadow btnFazerCheckin" > Gerar etiquetas<i class="fa fa-check animate__animated animate__infinite animate__fast animate__fadeIn"></i></button>-->

                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
        <br><br>
        <hr>
        <br><br>
        <a href="" class="btn btn-bd-download blue-gradient  shadow  " ><i class=" fa fa-angle-double-left animate__animated animate__infinite animate__fast animate__fadeInLeft"></i> &nbsp;&nbsp;&nbsp;   Visualizar reserva!  </a>

      </div>
    </div>
  </div>
  <button type="button" class="btn btnModal btn-primary d-none" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>

  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-full-height modal-top" role="document">


        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title w-100" id="myModalLabel">CHECKIN</h4> <br>

            {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button> --}}
            <button type="button" class="btn-close d-none btnCloseModal" data-bs-dismiss="modal" aria-label="Close"></button>

          </div>
          <div class="modal-body">
            <nav class="processingNumeration   text-center">

                    <span class="labelEnumering">

                    </span> <br> <br>
                <nav class="fazendoCheckin">
                    <img src="https://media.giphy.com/media/YqEtJ56h8z82FsxHAZ/giphy.gif" width="200" alt="fazendoCheckin">
                    <br>
                    <h6>Fazendo o checkin</h6>
                </nav>
                <nav class="checkinFinalizado">
                    <img src="https://media.giphy.com/media/ibolLe3mOqHE3PQTtk/giphy.gif" width="200" alt="fazendoCheckin">

                    <br>
                    <h6>Checkin terminado com sucesso</h6>
                </nav>
                <br>
                <br>
                <br>
                <label for="">Caixas escolhidas (Aguarde um instante)</label>
                <hr>
                <nav class="buttonsBox justify-content-start p-4 row">
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                          Numero de caixas
                          <span class="badge badge-primary badge-pill" id="numeroDeCaixas"></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                          Caixas processadas
                          <span class="badge badge-primary badge-pill" id="caixasProcessadas"></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                          Código da caixa actual:
                          <span class="badge badge-primary badge-pill" id="caixaCheck"></span>
                        </li>
                      </ul>
                </nav>
                <hr>

                <nav class=" justify-content-start text-start p-4 row">
                    <h6>Caixas prontas:</h6>
                    <ul class="list-group list-group-horizontal-xl" id="CaixasCheckinResult">


                    </ul>
                </nav>
                <br><br>
            </nav>
          </div>
          <div class="modal-footer justify-content-end">
            {{-- <button type="button" class="btn btnCancelar btn-secondary" data-dismiss="modal"> <i class="fa fa-times"></i> Cancelar</button> --}}
            {{-- <button type="button" class="btn btn-primary">Save changes</button> --}}
          <button class="btn btn-bd-download blue-gradient  shadow btnPronto" > <i class="fa fa-sort-numeric-asc shadow"></i> Finalizar  &nbsp;&nbsp;&nbsp; <i class=" fa fa-angle-double-right animate__animated animate__infinite animate__fast animate__fadeInLeft"></i></button>

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

  <script>
       $(document).ready(function () {

            $(".btnPronto").hide()
            var stepper = new Stepper($('.bs-stepper')[0]);
            var cxEsc="";
            var caixasEscolhidas=[0];
            var NumeroCaixasEscolhidas=[0];
            var qtdCaixasEscolhidas=0;
            var qtdCaixasGerais={{ $qtdCaixasGer }}

            $(".btnCheckin").click(function(){

                caixasEscolhidas=[];
                NumeroCaixasEscolhidas=[];
                var listaCaixasTableBody=$("#listaCaixasTableBody");
                qtdCaixasEscolhidas=0;
                cxEsc="";
                for (let index = 0; index < qtdCaixasGerais; index++) {

                    var child=listaCaixasTableBody[0].children;
                    var child2=child[index].children;
                    console.log(index);
                    var child3= child2[0].children;
                    var form=child3[0].children;
                    var checkState=form[0];
                    // console.log(checkState.checked);

                    if (checkState.checked==true)
                    {
                        var codigoId=form[2];
                        var numero=form[3];
                        caixasEscolhidas[index]=codigoId.value;
                        NumeroCaixasEscolhidas[index]=numero.value;
                        qtdCaixasEscolhidas++;
                        if (qtdCaixasEscolhidas<=1){
                            cxEsc+="Código("+codigoId.value+") / Número ("+numero.value+")";
                        }else{
                            cxEsc+=",Código("+codigoId.value+") / Número ("+numero.value+")";
                        }

                    }

                    $("#numerosCxs").text(cxEsc);
                }
                if (qtdCaixasEscolhidas>0){
                    stepper.next();
                    $("#qtdCxEscolhidas").text(qtdCaixasEscolhidas);
                }
            });


            $(".btnFinalCheck").click(function(){
                var caixasObj=JSON.parse(JSON.stringify(caixasEscolhidas));
                var numerosCaixasObj=JSON.parse(JSON.stringify(NumeroCaixasEscolhidas));

                // console.log(caixasObj )
                var cadastroBemSucedido=false;
                $("#numeroDeCaixas").text(qtdCaixasEscolhidas);
                $("#numeroDeCaixas2").text(qtdCaixasEscolhidas);
                $.confirm({
                    closeIcon: true,
                    columnClass: 'col-md-4 col-md-offset-4',
                    // autoClose: 'Finalizar|9000',
                    icon: 'fa fa-warning',
                    backgroundDismissAnimation: 'shake',
                    animation: 'zoom',closeAnimation: 'scale',
                    title: 'INFORMAÇÃO IMPORTANTE !',
                    content: 'Deseja prosseguir com checkin, lembrando: Checkin é um processo não interrupto mas pode edita-lo mais tarde. Tenha a certeza da veracidade deste processo resumo (Quantidade de caixa: '+qtdCaixasEscolhidas+', Numeros das caixas:'+cxEsc+')',
                    type: 'blue',
                    typeAnimated: true,
                    buttons: {

                        Finalizar: {
                            text: 'Fazer mesmo assim', // With spaces and symbols
                            action: function () {
                                $(".fazendoCheckin").show();
                                $(".checkinFinalizado").hide();
                                $(".btnPronto").hide()
                                $(".btnModal").click();
                                $.post("{{ route('us.armazem.gestao.caixas.fazer.checkin.novo.checkin') }}",{
                                    '_token':'{{ csrf_token() }}',
                                    'qtdCaixas':qtdCaixasEscolhidas

                                },function(data){
                                    $(".processingNumeration").show();
                                    var i=0;
                                    $("#caixasProcessadas").text(i);

                                    for (let index = 0; index < caixasObj.length; index++) {

                                        if(caixasObj[index]!=null){
                                            // alert(caixasObj[index]);
                                            $.post("{{ route('us.armazem.gestao.caixas.fazer.checkin.novo.caixa') }}",{
                                            '_token':'{{ csrf_token() }}',
                                            'lastIdCheckin':data,
                                            'numeroCaixa': caixasObj[index]},
                                            function(data){

                                                i++;
                                                $("#caixaCheck").text(caixasObj[index]+" | Nº("+numerosCaixasObj[index]+")");
                                                $("#CaixasCheckinResult").append(' <li class="list-group-item blue-gradient m-3 animate__animated animate__zoomIn text-white">Caixa '+data+' nº('+numerosCaixasObj[index]+')</li>');
                                                $("#caixasLista").append('<li class="list-group-item"><div class="md-v-line"></div><i class="fas fa-box mr-5"></i>  Caixa: <span class="badge badge-primary badge-pill">'+i+'</span> , Código: <span class="badge badge-primary badge-pill"  >'+caixasObj[index]+'</span>  , Número: <span  class="badge badge-primary badge-pill" >'+numerosCaixasObj[index]+'</span></li>');
                                                $("#caixasProcessadas").text(i);
                                                $("#caixasProcessadas").text(i);


                                               if(i>=qtdCaixasEscolhidas){
                                                    // $.alert("Checkin terminado com sucesso!")
                                                    $(".checkinFinalizado").show();
                                                    $(".fazendoCheckin").hide();
                                                    $(".btnPronto").show();
                                               }

                                            });
                                        }


                                    }

                                    var route="{{ route('us.armazem.gestao.caixas.ver.checkin',"+data+") }}";

                                    $(".btnVerCheckin").attr('href',route);
                                });
                            }
                        }
                    }
                });
                // var aceitarFazerCheckin=confirm("Deseja prosseguir com checkin, lembrando: Checkin é um processo não interrupto mas pode edita-lo mais tarde. Tenha a certeza da veracidade deste processo resumo(Quantidade de caixa: "+qtdCaixasEscolhidas+" Numeros das caixas:"+cxEsc+")");
                // $(".btnModal").click();

//      $.post("{{ route('us.armazem.gestao.caixas.fazer.checkin.novo.checkin') }}",{
//         '_token':'{{ csrf_token() }}',
//         'qtdCaixas':qtdCaixasEscolhidas

//     },function(data){

//         for (let index = 0; index < caixasObj.length; index++) {

//             if(caixasObj[index]!=null){
//                 // alert(caixasObj[index]);
//                 $.post("{{ route('us.armazem.gestao.caixas.fazer.checkin.novo.caixa') }}",{
//                 '_token':'{{ csrf_token() }}',
//                 'lastIdCheckin':data,
//                 'numeroCaixa': caixasObj[index]},
//                 function(data){

//                     console.log("Código da caixa:"+data)
//                     if (data>0)
//                          {

//                          }
//                     else
//                          {

//                          }
//                 });
//             }


//         }

// });


            });

            $(" .btnPronto ").click(function(){
                $(".btnCloseModal").click();
                stepper.next();
            });
            $(".btnVisualizarReservas, .btnPrepararCaixaBack").click(function(){

                stepper.previous();
            });
            $("#qtdCaixas").select2({
                placeholder: 'Selecione a quantidade de caixas'
            });

            var ultimoNumero={{ $ultimoNumeroCaixa }}+3
            var numerosCaixasObj=[0];
             $(".btnCancelar").click(function(){
                $(".btnCloseModal").click();
                $(".buttonsBox").empty();
                $(".btnFinalizarProcesso").hide()

                // console.log('_______________________________________')
                // console.log('array')
                console.log(numerosCaixasObj)

                var ultimoNumero={{ $ultimoNumeroCaixa }}+3;
                var numerosCaixasObj=[0];

             });
            $(".btnEnumerarCaixa").click(function(){
            //     var ultimoNumero={{ $ultimoNumeroCaixa }}+3;
            //     $(".btnFinalizarProcesso").hide()
            //     numerosCaixasObj[];
            //     $(".buttonsBox").empty();
            //     $("#caixasNumeradas").empty();
            //     var quantEscolhida= $("#qtdCaixas").val();
            //     $(".qtdCaixas").text(quantEscolhida);
            //     $(".btnModal").click();

            // // stepper.next();
            //     // for(i=1;i<=100;i++)
            //     // {
            //     // }
            //     for (let index = 1; index <= quantEscolhida; index++) {

            //         console.log("Quantidade Pos:"+numerosCaixasObj)
            //         numerosCaixasObj[index]=ultimoNumero++;
            //             // console.log("Valor na posição:("+index+"):"+numerosCaixasObj[index])
            //         var rnd =Math.floor((Math.random() * 1000) + 1);;
            //         $(this).animate({
            //             value: "1"

            //         }, rnd, function() {

            //             $(".qtdCaixasGeradas").text(index);
            //             $(".buttonsBox").append("<nav class=\"col-2\"><button class=\"btn w-100 blue-gradient  animate__animated animate__flipInY\">Caixa:  ["+index+"] , Número: <span  class=\"numero\">"+numerosCaixasObj[index]+"</span></button></nav>")
            //             if (index>=quantEscolhida){

            //                 $(".labelEnumering").text("100%");
            //                 // $(".btnCancelar").hide()
            //                 $(".btnFinalizarProcesso").show()

            //             }else{
            //                 $(".labelEnumering").text(index+"%");
            //             }
            //             $("#caixasNumeradas").append(" <li class=\"list-group-item\"><div class=\"md-v-line\"></div><i class=\"fas fa-box mr-5\"></i>  Caixa:  ["+index+"] , Número: <span  class=\"numero\">"+numerosCaixasObj[index]+"</span></li>");

            //         });
            //             $("#staticBackdrop").animate({ scrollTop: $("#staticBackdrop").height() }, 1000);

            //     }


            });

            $("#checkbox").change(function(){


                var listaCaixasTableBody=$("#listaCaixasTableBody");

                var estado = $(this);
                if (estado.is(":Checked"))
                {
                    for (let index = 0; index < qtdCaixasGerais; index++) {

                        var child=listaCaixasTableBody[0].children;
                        var child2=child[index].children;
                        var child3= child2[0].children;
                        var form=child3[0].children;
                        console.log(form);
                        var inpCheck=form[0].checked=true;
                        // console.log(inpCheck);

                    }
                // Do stuff
                }else{
                    for (let index = 0; index < qtdCaixasGerais; index++) {

                        var child=listaCaixasTableBody[0].children;
                        var child2=child[index].children;
                        var child3= child2[0].children;
                        var form=child3[0].children;
                        // console.log(form);
                        var inpCheck=form[0].checked=false;
                        // console.log(inpCheck);

                    }
                }
            });

            $(".btnFazerCheckinAuto").click(function(){
                // alert("Olá mundo")
                var numerosCaixa=JSON.parse(JSON.stringify(numerosCaixasObj));
                $.post("{{ route('us.armazem.gestao.caixas.fazer.checkin') }}",{
                        '_token':'{{ csrf_token() }}',
                        'numerosObj':numerosCaixa,
                        'reserva_id':{{ $id }},

                    },function(data){

                        console.log("______________________________________________________");
                        console.log("             Resultado Post");
                        console.log(data)
                         if(data==0){



                         }else{


                         }






                });
            });



        });
  </script>
@endsection