@extends('layouts.app')
@section('title', 'Entrada Estoque')
@section('content')

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<!-- Estilizando um componente do select2 que estava desajustando o layout -->
<style type="text/css">
    .select2-container .select2-selection--single {
        height: unset !important;
    }

    .slidecontainer {
        width: 100%;
    }

    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
    }
</style>

@include('layouts.headers.cards_prod')
@include('layouts.footers.auth')
<!-- 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-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">{{ __('Componentes do Produto') }}</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body p-1 m-1">
                    <div class="container rounded p-0">
                        <div class="container p-0">
                            <div class="table-responsive table-sm" id="canvas_div_pdf">
                                <table class="table align-items-center table-lighter table-bordered table-sm m-0" id="test">
                                    <thead class="thead-light">
                                        <tr class="text-center">
                                            <th style="width:100px" scope="col-1">Código</th>
                                            <th scope="col-1">Imagem</th>
                                            <th scope="col-1">Produto</th>
                                            <th style="width:100px" scope="col-1">Quantidade</th>
                                            <th>Estoque</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody-componentes">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 order-xl-4 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">{{ __('Fabricar Produto') }}</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body p-1 m-1">
                    <div class="form-group">
                        <label>Selecionar Produto</label>
                        <select class="w-100" id='select_produtos' name="produto_fabricar" form="formulario_fabricar">
                            <option></option>
                            @foreach ($produtos as $produto )
                            <option value="{{$produto->id}}">{{$produto->nome_produto}}</option>
                            @endforeach
                        </select>
                        <br><br>
                        <label>Quantidade a ser fabricada</label>
                        <input type="number" id="quantidade_fabricar" name="quantidade_fabricar" form="formulario_fabricar" class="form-control" min="1" value="1">
                    </div>

                    <div class="mx-auto text-center">
                        <div class="row mt-2">
                            <div class="col-md-6 col-sm-6">
                                <button type="button" class="btn btn-block btn-lg btn-info btn-componentes" value=""> Componentes</button>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <button type="submit" class="btn btn-block btn-lg btn-dark btn-submit" form="formulario_fabricar" disabled> Fabricar</button>
                            </div>
                            <form action="{{route('os.componentes_decrementar')}}" class="d-none" id="formulario_fabricar" method="POST">
                                @csrf
                            </form>
                        </div>
                    </div>

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

<div class="modal fade d-none" id="modal-fabricar-produto" tabindex="-1" role="dialog" aria-labelledby="modal-fabricar-produto" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="mx-auto text-uppercase">Fabricar Produto</h2>
            </div>
            <div class="modal-body">
                <p>Defina a quantidade que será fabricada</p>
                <input type="text" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger text-white font-weight-bold" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

@endsection

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

<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.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>

<!-- Select2 -->
<script>
    $(document).ready(function() {
        function setImage(image) {
            if (!image.id) {
                return image.text;
            }
            var baseUrl = "../img/produtos_cadastrados";
            var $image = $(
                '<span><img width="50" src="' + baseUrl + '/img_' + image.element.value + '.jpg" /> ' + image.text + '</span>'
            );
            return $image;
        };

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

        $('#select_fornecedores').select2({
            placeholder: 'Selecione um fornecedor',
            allowClear: true
        });
    })
</script>

<!-- Select change produtos -->
<script>
    $('#select_produtos').change(function() {
        var valor = this.value;
        $('.btn-componentes').val(valor);
    });
</script>

<!-- Adicionar produto a grid -->
<script>
    $('.btn-componentes').click(function() {
        $('#tbody-componentes').children().remove();
        let valor = $(this).val();
        let quantidade = $('#quantidade_fabricar').val();
        $.ajax({
            url: "{{route('os.componentes')}}",
            method: 'get',
            dataType: 'json',
            data: {
                valor: valor
            },

            success: function(data) {
                for (let x = 0; x < data.length; x++) {

                    $('#tbody-componentes').append('<tr class="text-center align-middle font-weight-bold tr_' + x + '">' +
                        '<td scope="row">' +
                        '<input type="number" name="codigo_componente[]" form="formulario_fabricar" value="' + data[x].componente_id_fk + '" class="form-control text-center form-control-flush" readonly>' +
                        '</td>' +
                        '<td scope="row">' +
                        '<img class="avatar" width="100" height="100" src="../' + data[x].imagem_produto + '">' +
                        '</td>' +
                        '<td style=" white-space: pre-wrap;">' +
                        '<span class="mb-0 text-sm">' + data[x].nome_produto + '</span>' +
                        '</td>' +
                        '<td>' +
                        '<input type="number" name="quantidade_componente[]" form="formulario_fabricar"  value="' + (data[x].quantidade_produto_composto * quantidade) + '" class="form-control text-center form-control-flush" readonly>' +
                        '</td>' +
                        ' <td>' + data[x].quantidade_produtos + '</td>' +
                        '</tr>'
                    );

                    if ((data[x].quantidade_produto_composto * quantidade) > data[x].quantidade_produtos) {
                        $('.tr_' + x).children().addClass('border-danger');
                    }

                }
                $('.btn-submit').removeAttr('disabled');
            },
            error: function(data) {
                alert(JSON.stringify(data));
            }
        });
    });
</script>

@endpush