@extends('layouts.app')
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .white-space {
        white-space: pre-wrap !important;
    }

    .etiqueta {
        border-width: thin !important;
        border-style: dashed !important;
        border-color: black !important;
        height: 3.5cm !important;
        width: 9.8cm !important;
    }

    div.page-break:nth-child(14) {
        page-break-before: always !important;
    }
</style>

@section('title', 'QRcode')
@section('content')

<!-- Estilizando um componente do select2 que estava desajustando o layout -->
<style type="text/css">
    .select2-container .select2-selection--single {
        height: unset !important;
    }
</style>

@include('layouts.headers.cards_prod')

<!-- A consulta desta tabela deve envolver INNER JOIN por causa dos nomes da família, nome do grupo e subgrupo, todos vindos das respectivas chaves estrangeiras -->
<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-xl-8 order-xl-2 order-sm-1">
            <div class="card bg-white shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <h3 class="mb-0">{{ __('QrCode') }}</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body p-1 m-1 " id="canvas_div_pdf">
                    <div class="container rounded p-0 overflow-hidden">
                        <div class="row text-center" id="grid">
                            @forelse($qrcodes as $qrcode)
                            <div class="col-lg-6 mb-2 px-2 page-break">
                                <div class="card card-stats etiqueta m-auto">
                                    <div class="card-body p-1">
                                        <div class="row h-100 m-0">
                                            <div class="col-auto my-auto p-1">
                                                {!! QrCode::size(120)->generate(route('estoque.produto',$qrcode->id)); !!}
                                            </div>
                                            <div class="col my-auto p-1">
                                                <h3 class="card-title text-uppercase font-weight-bold mb-1">{{$qrcode->nome_produto}}</h3>
                                                <span class="h5 font-weight-bold mb-0">Cod: {{$qrcode->id}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="col-lg-12 mb-2">
                                <p>Sem produtos selecionados</p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-danger" onclick="getPDF()" id="gerar_pdf"><i class="fas fa-file-pdf"> </i> PDF</button>
            </div>
        </div>

        <div class="col-xl-4 order-xl-2 order-sm-1">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <h3 class="mb-0">{{ __('Selecionar Produto') }}</h3>
                            <span>Selecione até 14 elementos por pagina</span>
                        </div>
                    </div>
                </div>
                <div class="card-body p-1 m-1">
                    <div class="row">
                        <div class="col-md-12 col-lg-12 col-sm-12">
                            <div class="form-group">
                                <select class="w-100 select_clientes" id='select_produtos'>
                                    <option></option>
                                    @foreach($produtos as $produto)
                                    <option cod='{{$produto->id}}' produto='{{$produto->nome_produto}}' imagem='{{$produto->imagem_produto}}'> ({{$produto->id}}) {{$produto->nome_produto}}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="form-group mb-0">
                        <input type="hidden" id="codigo" class="form-control" placeholder="Codigo" readonly>
                        <input type="hidden" id="imagem" class="form-control" placeholder="Imagem" readonly>
                        <input type="hidden" id="produto" class="form-control" placeholder="Imagem" readonly>

                    </div>
                                        <div class="pt-2 text-center">
                        <form action="{{route('produtos.qrcode_data')}}" method="get" id="form-qrcode">
                            <!--@csrf-->
                            <button type="button" class="btn btn-info btn-grid"><i class="fas fa-box"> </i> Selecionar</button>
                            <button type="submit" class="btn btn-success"><i class="fas fa-qrcode"> </i> Gerar Qrcode</button>
                            
                        </form>
                    </div>
                    <ul id="list-produto" class="list-group list-group-flush list">

                    </ul>

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

@endsection

@push('js')

<script src="{{ asset('js')}}/print/es6-promise.auto.min.js"></script>
<script src="{{ asset('js')}}/print/jspdf.min.js"></script>
<script src="{{ asset('js')}}/print/html2canvas.min.js"></script>
<script src="{{ asset('js')}}/print/html2pdf.min.js"></script>

<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

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

        $('#select_produtos').select2({
            placeholder: 'Selecione um produto',
            allowClear: true,
            minimumInputLength: 2,
            language: {
                inputTooShort: function() {
                    return "Coloque pelo menos 2 letras...";
                }
            }
        });
    })
</script>

<script>
    $('#select_produtos').change(function() {
        var cod = $(this).find(':selected').attr('cod');
        var produto = $(this).find(':selected').attr('produto');
        var imagem = $(this).find(':selected').attr('imagem');

        document.getElementById('codigo').setAttribute("value", cod);
        document.getElementById('produto').setAttribute("value", produto);
        document.getElementById('imagem').setAttribute("value", imagem);
    });
</script>

<script>
    var items = [];
    $(document).on('click', '.btn-grid', function() {
        var cod = $('#codigo').val();
        var produto = $('#produto').val();
        var imagem = $('#imagem').val();

        $("#list-produto").append(
            '<li class="list-group-item px-0">' +
            '<div class="row align-items-center">' +
            '<div class="col-auto">' +
            '<a href="#" class="avatar avatar-sm rounded">' +
            '<img alt="Image placeholder" src="../' + imagem + '">' +
            '</a>' +
            '</div>' +
            '<div class="col ml--2">' +
            '<h4 class="mb-0">' +
            '<span>' + produto + '</span>' +
            '</h4>' +
            '<!-- <span class="text-success">●</span>' +
            '<small>Online</small> -->' +
            '</div>' +
            '</div>' +
            '</li>');

        $("#form-qrcode").append('<input type="hidden" name="ids[]" value="' + cod + '" class="form-control" readonly>');

    });
</script>

<script>
    function getPDF() {
        var element = document.getElementById('canvas_div_pdf');
        var opt = {
            margin: 0,
            filename: 'qrcode.pdf',
            image: {
                type: 'jpeg',
                quality: 0.98
            },
            html2canvas: {
                scale: 2,
                y: window.scrollY,
                logging: true
            },
            jsPDF: {
                unit: 'mm',
                format: 'a4',
                orientation: 'portrait'
            }
        };

        // New Promise-based usage:
        html2pdf().set(opt).from(element).save();
    };
</script>

<script>
    $(document).on('click', '.btn-remove', function() {
        $(this).parent().parent().remove();
    });
</script>

<script>
    $(document).on('click', '.btn-qrcode', function() {
        $('#grid').children().remove();
        let valor = $('#ids').val();

        $.ajax({
            url: "{{route('produtos.qrcode_data')}}",
            method: 'get',
            dataType: 'json',
            data: {
                id: valor
            },
            success: function(retorno) {

                for (let x = 0; x < retorno.produtos.length; x++) {
                    $('#grid').append(
                        '<div class="col-lg-6">' +
                        '<div class="card card-stats">' +
                        '<div class="card-body">' +
                        '<div class="row">' +
                        '<div class="col-auto">' +
                        '<div class="avatar avatatar-lg">' +

                        '</div>' +
                        '<div class="col">' +
                        '<h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>' +
                        '<span class="h2 font-weight-bold mb-0">350,897</span>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<p class="mt-3 mb-0 text-sm">' +
                        '<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>' +
                        '<span class="text-nowrap">Since last month</span>' +
                        '</p>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    );
                }
            },
            error: function(retorno) {
                alert(JSON.stringify(retorno));
            }
        })
    });
</script>

@endpush