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

@section('conteudo')
<nav class="d-none">
    {{-- {{ $clientes=\App\Models\Cliente::join('departamentosclientes','departamentosclientes.cliente_id','=','clientes.id')->select('clientes.*')->distinct()->get() }} --}}
    {{ $checkins=\App\Models\Checkin::get() }}
</nav>

<div class="mb-5 p-4 bg-white shadow-sm">
    <h3>LISTA DE CHECK-INS</h3>
    <hr>
    <br><br><br>
    <nav class="col-12 table-responsive">
        <table id="reservasTable" class="table container  table-striped table-hover">
             <thead>
                 <tr class="">
                  
                      <th>Id</th>
                      <th>Quantidade de caixas</th>
                      <th>Tipo de caixa</th>
                      <th>Cliente</th>
                      <th>Funcionario</th>
                      <th>Data</th>
                      <th>Ver Mais</th>
                    </tr>
                    </thead>
                    <tbody>
                      @foreach($checkins as $checkin)
                        <div class="d-none">
                           {{ $caixascheckin=$checkin->getCaixaCheckin->first() }}
                           
                        </div>
                        @if($caixascheckin)
                            @if($caixascheckin->getCaixa)
                            <tr>
                               
                              <td>{{ $checkin->id }}</td>
                              <td>{{ $checkin->qtdcaixas }}</td>
                              <td>{{ $caixascheckin->getCaixa->getReserva->getTipoCaixa->tipocaixa }}</td>
                              <td>{{ $caixascheckin->getCaixa->getReserva->getCliente->getUser->getPessoa->nome }}</td>
                              <td>{{ $checkin->getUser->getPessoa->nome }}</td>
                              <td>{{ $checkin->created_at }}</td>
                              <td>
                                  <a href="{{ route('us.armazem.gestao.caixas.ver.checkin',$checkin->id ) }}" class="btn btn-sm btn-primary"> <i class="fa fa-eye"></i> </a>
                             </td>
                             @endif
                        @endif
                      </tr> 
                      @endforeach
                 </tbody>
             <tfoot></tfoot>
         </table>
     </nav>

</div>


  <!-- Modal -->
  <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  ">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Check-in</h5>
          <button type="button" class="btn-close invisible" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body justify-content-center text-center">
            <h3 class="textoModal">FAZENDO O CHECK-IN...</h3> <br><br>
            <div class="d-flex justify-content-center  loadSpinner">
                <div class="spinner-border" role="status">
                </div>
            </div>
            <div class="justify-content-center d-none text-success successModalResult">
                <br>
                <i class=" fa fa-check fa-3x"></i>
                <br>
            </div>
            <div class="justify-content-center d-none text-danger errorModalResult">
                <br>
                <i class=" fa fa-times fa-3x"></i>
                <br>
            </div>
            <br><br><br>
        </div>
        {{-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div> --}}
      </div>
    </div>
  </div>

    <script>

        $(document).ready(function () {

            $('#reservasTable').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true,
            });


        });

    </script>
@endsection