@extends('layouts.app')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.min.css">
<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">

<style>
    td {
        padding: 0.3rem !important
    }

    .form-control {
        margin-bottom: 10px;
    }
</style>

@section('title', 'Ordem de Produção')
@section('content')
@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-12 order-xl-1">
            <div class="card bg-secondary shadow">
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h3 class="mb-0">{{ __('Listagem do estoque') }}</h3>
                        </div>
                        <div class="col-4 text-right">
                            <button class="btn btn-sm btn-inventario btn-primary" data-toggle="modal" data-target="#InventarioModal">Inventario</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive ">
                        <table class="table table-flush table-bordered table-dark w-100 table-sm" id="table">
                            <thead class="thead-dark">
                                <tr class="text-center font-weight-bold">
                                    <th></th>
                                    <th>Codigo</th>
                                    <th>Imagem</th>
                                    <th>Nome</th>
                                    <th>Quantidade</th>
                                    <th>Produzidos</th>
                                    <th>Data</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="border border-default rounded p-1 overflow-hidden d-none" id="canvas_div_pdf_producao">
    <table class="table table-sm table-bordered border-dark m-0">
        <tr class="text-center align-items-center">
            <td class="p-3" rowspan="3"><img class="img-fluid my-auto" width="100" src="{{ asset('argon') }}/img/brand/{{auth()->user()->logo}}" alt="logo"></td>
        </tr>
        <tr class="text-center align-items-center">
            <td class="p-0 m-0">
                <h2 class="mx-auto">Ordem de Produção Nº <span class="campo-id"></span></h2>
            </td>
        </tr>
    </table>
    <div class="p-0 overflow-hidden">
        <div class="table-responsive">
            <table class="table align-items-center table-bordered table-lighter table-sm" id="test">
                <thead class="thead-light">
                    <tr class="text-center">
                        <th colspan="3">Produto em Produção</th>
                    </tr>
                </thead>
                <tbody class="thead-light">
                    <tr>
                        <th>Codigo: </th>
                        <td><span class="campo-cod"></span></td>
                        <td rowspan="4"><img class="d-block mx-auto avatar avatar-xl campo-imagem" src=""></td>
                    </tr>
                    <tr>
                        <th>Produto: </th>
                        <td><span class="campo-prod"></span></td>
                    </tr>
                    <tr>
                        <th>Quantidade: </th>
                        <td> <span class="campo-quantidade"></span></td>
                    </tr>
                </tbody>
                <thead class="thead-light">
                    <tr class="text-center">
                        <th colspan="3">Componentes utilizados na fabricação</th>
                    </tr>
                </thead>
                <tbody class="thead-light" id="tbody_componentes">

                </tbody>

                <tfoot>
                    <tr class="text-right">
                        <td colspan="3">Data: <span class="campo-data"></span></td>
                    </tr>
                </tfoot>

            </table>
        </div>
    </div>
</div>
@endsection

@push('js')
<script type="text/javascript" src="/js/print/es6-promise.auto.min.js"></script>
<script type="text/javascript" src="/js/print/jspdf.min.js"></script>
<script type="text/javascript" src="/js/print/html2canvas.min.js"></script>
<script type="text/javascript" src="/js/print/html2pdf.min.js"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.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>

<!-- Datatable Ordem de Produção-->
<script>
    $(document).ready(function() {
        var table = $('#table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{ route('os.ordem_producao_data')}}",
            "deferRender": true,

            columns: [{
                    "class": "align-middle text-center details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": '',
                    "searchable": false,
                    "render": function() {
                        return '<i class="far fa-eye" aria-hidden="true"></i>';
                    },
                    width: "15px"
                },
                {
                    data: 'id',
                    name: 'id',
                    className: 'align-middle text-center',
                },
                {
                    "className": 'align-middle text-center',
                    "orderable": false,
                    "data": 'imagem_produto',
                    "defaultContent": '',
                    "searchable": false,
                    "render": function(data, type, row) {
                        return "<img class='avatar avatar-md rounded' src='../" + data + "'>";
                    }
                },
                {
                    data: 'nome_produto',
                    name: 'nome_produto',
                    className: 'align-middle text-center',
                },

                {
                    data: 'quantidade_producao',
                    name: 'quantidade_producao',
                    className: 'align-middle text-center',
                },
                {
                    data: 'concluida_producao',
                    name: 'concluida_producao',
                    className: 'align-middle text-center',
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    className: 'align-middle text-center',
                },
                {
                    "class": "align-middle text-center actions",
                    "defaultContent": '',
                    "data": 'produto_id_fk',
                    "render": function(data, type, row) {
                        if (row.quantidade_producao > row.conluida_producao)
                            btn_concluir = '<button type="button" class="btn btn-success btn-concluir" data-produto="' + row.produto_id_fk + '" data-ordem="' + row.id + '"> Produzir </button>';
                        else
                            btn_concluir = '';

                        btn_pdf = '<button type="button" class="btn btn-danger btn-pdf-producao" value="' + data + '" data-quantidade="' + row.quantidade_producao + '"> PDF </button>';

                        return btn_pdf + btn_concluir;

                    }
                },
            ],
            "language": {
                "info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
                "search": "Procurar:",
                "paginate": {
                    "first": "Primeiro",
                    "previous": "<",
                    "next": ">",
                    "last": "Último"
                }
            },

            dom: 'frtip',
            lengthMenu: [
                [10, 25, 50, -1],
                ['10 linhas', '25 linhas', '50 linhas', 'Todas as linhas']
            ],
            buttons: [{
                    extend: 'pageLength',
                    className: 'btn bg-light rounded'
                },
                {
                    extend: 'pdfHtml5',
                    className: 'btn bg-danger text-white rounded',
                    exportOptions: {
                        columns: [1, 2, 3, 4]
                    }
                },
                {
                    extend: 'excelHtml5',
                    className: 'btn bg-success text-white rounded',
                    exportOptions: {
                        columns: [1, 2, 3, 4]
                    }
                },
                {
                    extend: 'colvis',
                    text: 'Colunas',
                    className: 'btn bg-default text-white rounded'
                }
            ]
        });


        $('#table tbody').on('click', 'tr', function() {
            produto = table.row(this).data();

            $('.campo-id').html(produto.id)
            $('.campo-cod').html(produto.produto_id_fk)
            $('.campo-prod').html(produto.nome_produto)
            $('.campo-quantidade').html(produto.quantidade_producao)
            $('.campo-imagem').attr('src', '../' + produto.imagem_produto)
            $('.campo-data').html(produto.created_at)

            $('#tbody_componentes').children().remove();
            valor = produto.produto_id_fk;
            quantidade = produto.quantidade_producao;

            $.ajax({
                url: "{{route('os.componentes')}}",
                method: 'get',
                dataType: 'json',
                data: {
                    valor: valor
                },
                success: function(retorno) {
                    for (let x = 0; x < retorno.length; x++) {
                        $('#tbody_componentes').append(
                            "<tr class='text-center'>" +
                            "<td>" + retorno[x].nome_produto + "</td>" +
                            "<td>" + (retorno[x].quantidade_produto_composto) * quantidade + "</td>" +
                            "</tr>"
                        );
                    }
                },
                error: function(retorno) {
                    alert(JSON.stringify(retorno));
                }
            })

        });

        $('#table tbody').on('click', 'td.details-control', function() {
            var tr = $(this).closest('tr');
            var tdi = tr.find("i.far");
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                tdi.first().removeClass('fa-eye-slash');
                tdi.first().addClass('fa-eye');
            } else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
                tdi.first().removeClass('fa-eye');
                tdi.first().addClass('fa-eye-slash');
            }
        });

        table.on("user-select", function(e, dt, type, cell, originalEvent) {
            if ($(cell.node()).hasClass("details-control")) {
                e.preventDefault();
            }
        });

    });

    function format(d) {
        // `d` is the original data object for the row
        //     return '<table class="table-sm table-bordered w-100 table-light" cellpadding="5" cellspacing="0" border="0">' +
        //         '<thead class="thead-dark">' +
        //         '<th class="align-middle text-center col-auto"> </th>' +
        //         '<th class="align-middle text-center col-auto"> </th>' +
        //         '<th class="align-middle text-center col-auto"> </th>' +
        //         '<th class="align-middle text-center col-auto"> </th>' +
        //         '</thead>' +
        //         '<tbody class="thead-dark">' +
        //         '<tr>' +
        //         '<th class="align-middle text-center p-1 m-1">CNPJ/CPF</th>' +
        //         '<td class="align-middle text-center text-muted">' + '</td>' +

        //         '<th class="align-middle text-center p-1 m-1">Rua</th>' +
        //         '<td class="align-middle text-center text-muted">' + '</td>' +

        //         '<th class="align-middle text-center p-1 m-1">Limite</th>' +
        //         '<td class="align-middle text-center text-muted">' + '</td>' +
        //         '</tr>' +
        //         '<tr>' +
        //         '<th class="align-middle text-center p-1 m-1">Email</th>' +
        //         '<td class="align-middle text-center text-muted">' + '</td>' +
        //         '<th class="align-middle text-center p-1 m-1">Número</th>' +
        //         '<td class="align-middle text-center text-muted">' + '</td>' +
        //         '<th class="align-middle text-center p-1 m-1">Saldo</th>' +
        //         '<td class="align-middle text-center text-muted">' + '</td>' +
        //         '</tr>' +
        //         '<tr>' +
        //         '<th class="align-middle text-center p-1 m-1">IE</th>' +
        //         '<td class="align-middle text-center text-muted">' + '</td>' +
        //         '<th class="align-middle text-center p-1 m-1">Bairro</th>' +
        //         '<td class="align-middle text-center text-muted">' + '</td>' +
        //         '<th class="align-middle text-center p-1 m-1">-</th>' +
        //         '<td class="align-middle text-center text-muted">-</td>' +
        //         '</tr>' +
        //         '</tbody>' +
        //         '</table>';
    }
</script>

<!--Ajax Produtos -->
<script>
    $(document).on('click', '.btn-pdf-producao', function() {

        $('#canvas_div_pdf_producao').removeClass('d-none')

        setTimeout(function() {
            var element = document.getElementById('canvas_div_pdf_producao');
            var opt = {
                margin: [1, 1, 1, 1],
                filename: 'producao.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();

        }, 2500);

        setTimeout(function() {
            $('#canvas_div_pdf_producao').addClass('d-none')
        }, 2000);

    });
</script>

<script>
    $(document).on('click', '.btn-concluir', function() {

        produto = $(this).data('produto');
        ordem = $(this).data('ordem');

        $(this).attr("disabled", "true");

        $.ajax({
            url: "{{route('os.produzir_produto')}}",
            method: 'get',
            dataType: 'json',
            data: {
                produto: produto,
                ordem: ordem
            },
            success: function(retorno) {
                $('#table').DataTable().ajax.reload(null, false);
            },
            error: function(retorno) {
                alert(JSON.stringify(retorno));
            }
        })

    });
</script>

@endpush