@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() }} --}}
    {{ $checkin=\App\Models\Checkin::where('id',$id)->first() }}
    {{ $chaixaCheck=$checkin->getCaixaCheckin->first() }}
    {{ $caixa=$chaixaCheck->getCaixa }}


</nav>
<div class="btn-group" role="group" aria-label="Basic example">
    <a href="{{ route('us.armazem.gestao.caixas.checkin') }}"  class="btn blue-gradient"><i class="fa fa-bars"></i> Outros Checkins</a>
    <!--<a href="{{ route('us.armazem.gestao.caixas.nova.reserva') }}"  class="btn blue-gradient"><i class="fa fa-plus"></i> Novo checkin</a>-->
</div>
<hr>

<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">
            <br>
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">CHECKIN</h5>
                <small class="text-muted">Data de checkin {{$checkin->created_at}}</small>
            </div>
            <hr>
            <label class="mb-1">Código do checkin: {{$checkin->id}}</label> <br><hr>
            <label for="">Quantidade de caixas: {{ $checkin->qtdcaixas }}</label> <br> <hr>
           
            <label for="">Funcionário Responsável: {{ $checkin->getUser->getPessoa->nome }}</label> <br>  
            <hr>
        </a>

        <br><br>



        <!-- 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 na lista</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($checkin->getCaixaCheckin as $cx)


                        <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="{{ $cx->getCaixa->id }}">
                                    <input class="form-check-input" type="hidden" value="{{ $cx->getCaixa->numerodacaixa }}">
                                </form>
                            </th>
                            <td>{{ $cx->getCaixa->id }}</td>
                            <td> {{ $cx->getCaixa->numerodacaixa }}</td>

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

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

            </div>

        </div>
        <!-- Table with panel -->
        <br><br><br><br>
        {{-- @if($caixasDisponiveis>0)
            @endif --}}
            <div class="text-center">



                  <div class="btn-group" role="group" aria-label="Basic example">
                    {{-- <button id="btnGroupVerticalDrop2"    class="btn btn-indigo dropdown-toggle"  data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Etiquetas
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                        <a class="dropdown-item" href="#">Gerar etiquetas agora</a>
                        <a class="dropdown-item" href="#">Abrir gerador de etiquetas</a>
                    </div> --}}
                    <a href="{{ route('us.armazem.gestao.caixas.ver.reserva',$caixa->reserva_id) }}" class="btn btn-outline-mdb-color waves-effect"><i class="fas fa-eye fa-sm pr-2" aria-hidden="true"></i> reserva</a>
                    <a class="btn btn-outline-mdb-color waves-effect"><i class="fas fa-building fa-sm pr-2" aria-hidden="true"></i> Arrumar</a>
                    <!--<a href="{{ route('us.armazem.gestao.caixas.etiquetas') }}" class="btn btn-outline-mdb-color waves-effect"><i class="fas fa-cog fa-sm pr-2" aria-hidden="true"></i> Gerador de etiquetas</a>-->
                    <button class="btn btn-outline-mdb-color waves-effect btnGerarEtiquetas"><i class="fas fa-tag fa-sm pr-2" aria-hidden="true"></i> Gerar etiquetas</button>


                    <button id="btnGroupVerticalDrop4" class="btn btn-indigo dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Relatórios
                    </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
                        <a class="dropdown-item" target="blank" href="{{ route('us.armazem.gestao.caixas.checkin.relatorio',$id) }}">Ver relatório</a>
                        <a class="dropdown-item" target="_blank" href="{{ route('us.armazem.gestao.caixas.checkin.relatorio.baixar',$id) }}">Baixar relatório</a>
                        </div>
                  </div>
            </div>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.js" integrity="sha512-UNbeFrHORGTzMn3HTt00fvdojBYHLPxJbLChmtoyDwB6P9hX5mah3kMKm0HHNx/EvSPJt14b+SlD8xhuZ4w9Lg==" crossorigin="anonymous"></script>

  <script>
       $(document).ready(function () {
            var qtdCaixasGerais={{ $checkin->getCaixaCheckin->count() }}
           $("#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);

                    }
                }
            });
            
            $(".btnGerarEtiquetas").click(function(){
                caixasEscolhidas=[];
                NumeroCaixasEscolhidas=[];
                var listaCaixasTableBody=$("#listaCaixasTableBody");
                qtdCaixasEscolhidas=0;
                cxEsc="";
              
                console.log(qtdCaixasGerais)
                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.push(codigoId.value);
                        NumeroCaixasEscolhidas.push(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){ 
                   $.post("{{ route('us.armazem.gestao.caixas.etiquetas.imp') }}",{
                        '_token':'{{ csrf_token() }}',
                        'caixas_numero':NumeroCaixasEscolhidas,
                        'caixas_id':caixasEscolhidas
                    },function(data){
                        
                         
                       let blob = new Blob([data], { type: "text/plain;charset=utf-8" });
                        saveAs(blob, "Etiquetas_de_caixas.txt");
                     
                       const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                            didOpen: (toast) => {
                                toast.addEventListener('mouseenter', Swal.stopTimer)
                                toast.addEventListener('mouseleave', Swal.resumeTimer)
                            }
                        })

                        Toast.fire({
                            icon: 'success',
                            title: 'Etiqueta(s) gerada(s) com sucesso'
                        });
                    });
                }
         
            });
            
        
        });
  </script>
@endsection