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

@section('conteudo')

    <nav class="d-none">



    </nav>
    <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">

                 
                        <nav class="d-none">
                            {{ $cliente=\App\Models\Cliente::where('id',$idCliente)->first() }}

                        </nav>
                        <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: {{ $cliente->getUser->getPessoa->nome }}</h5>
                                    <small>Cliente {{$cliente->id}}</small>
                                    </div>
                                    <div class="row">
                                        <div class="col-2   text-start ">
                                            <img width="80" class="shadow border" src="{{ asset('storage/img/clientes/'.$cliente->getUser->avatar) }}">
                                        </div>
                                        <div class="col-9 text-start">
                                          {{--  <label class="mb-1">Departamento:{{ $cliente->getDepartamento->departamento}}</label> <br> --}}
                                            <label class="mb-1">Id: {{$cliente->id}}</label> <br>
                                            <label class="mb-1">Codigo: {{$cliente->numerocliente}}</label> <br>
                                            <label class="mb-1">Email: {{$cliente->getUser->email}}</label> <br>
                                            {{-- <label class="mb-1">Some placeholder content in a paragraph</label> <br> --}}

                                        </div>
                                    </div>

                                </a>
                                
                        </div>
                        <div>
                        <br>
                            <h4>Escolha uma caixa (Caixas na entrada)</h4>
                            {{-- <p>Para encontrar suas caixas</p> --}}
                            <div class="d-none">
                                {{$caixas=\App\Models\Caixa::join('reservas','caixas.reserva_id','=','reservas.id')->join('clientes','clientes.id','=','reservas.cliente_id')->where('caixas.estado','Anulado')->where('clientes.id',$idCliente)->select('caixas.*')->distinct()->orderBy('caixas.numerodacaixa','Asc')->paginate(10)}}
                            </div>
                            <div id="stepper1" class="bs-stepper">
                                
                                <table id="tabelaClientes" class="table   table-striped table-hover">
                                    <thead>
                                        <tr class="">
                                            <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>Código</th>-->
                                            <th>Número</th>
                                            <th>Estado</th>
                                            <th>Ver mais</th>
                                            
                                            </tr>
                                            </thead>
                                            <tbody id="listaCaixasTableBody">
                                                <div class="d-none">
                                                    {{ $i=1 }}

                                                </div>
                                            <label class="d-none">{{ $i=1 }}</label>
                                            @foreach($caixas as $caixa)
                                            <tr>
       
                                                <td 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>
                                                </td>
                            
                                                <!--<td>{{ $caixa->id }}</td>-->
                                                <td>{{ $caixa->numerodacaixa}}</td>
                                                <td>{{ $caixa->estado}}</td>
                                                {{-- <td>{{ $caixa->getUser->getPessoa->nome}}</td> --}}
                                                {{-- <td>{{ $caixa->getUser->email}}</td> --}}

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



                                                <td>
                                                    <a href="{{ route('us.armazem.gestao.caixas.ver.caixa',[$cliente->id,$caixa->id]) }}" class="btn btn-sm  btnSelecionarReserva"> <i class="fa fa-eye "></i></a>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    <tfoot></tfoot>
                                </table>

                            </div>


            </nav>
        </div>
        <br>
        <div class="d-flex justify-content-center">
                {!! $caixas->links() !!}
        </div>   
        
        <button class="btn btn-outline-mdb-color waves-effect btnGerarEtiquetas btn-sm"><i class="fas fa-tag fa-sm pr-2" aria-hidden="true"></i> Gerar etiquetas</button>
        <a class="btn btn-outline-info btn-sm" href="{{ route('us.armazem.gestao.caixas.pesquisar.caixas.replicadas.cliente',$cliente->id) }}"><i class="fas fa-share fa-sm pr-2" aria-hidden="true"></i> Caixas duplicadas</a>
      
        @if($caixas->count()>0)
        <a class="btn btn-outline-success btn-sm" href="{{route('us.armazem.gestao.caixas.exportar.cx',$cliente->id)}}"><i class="fas fa-download fa-sm pr-2" aria-hidden="true"></i> Baixar .xls</a>
        @endif
    </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>

        $(function(){

            $('#tabelaClientes').DataTable({
                "paging": false,
                "lengthChange": true,
                "searching": false,
                "ordering": true,
                "info": false,
                "autoWidth": false,
            });
            var qtdCaixasGerais={{ $caixas->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
