@extends('adminlte::page')
@section('title', 'Sigo 2.0')

@section('content_header')

<div class="row">
    <div class="col">
        <h1>Log de Processamento - {{ $referencia }}</h1>
    </div>
    <div class="col d-flex justify-content-end">
        <button class="btn btn-primary" onclick="location.href='{{ url('producao/principal/' . $referencia) }}'"><i class="fas fa-arrow-left fa-xs"></i>&nbsp;&nbsp;Voltar</button>
    </div>
</div>

@stop

@section('content')
<div class="row" id="divListagemProducao">
    <div class="row mb-3 ml-0">
        <div class="col">
            <button class="btn btn-primary" onClick="window.location.reload()">Atualizar</button>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Tabela de Produções executadas</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body p-0">
                <table id="listagemDaProducao" class="table table-striped p-3">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Data de Início</th>
                            <th>Última Atualização</th>
                            <th>Usuário</th>
                            <th>Status</th>
                            <th>Andamento</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row" id="divDetalhes" style="display: none;">
    <div class="col-md-12">
        <div>
            <input type="button" class="btn btn-primary mb-3" value="Fechar Detalhes" onclick="mostraDetalhes('abrirListagem')">
        </div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Detalhes da Produção</h3>
            </div>

            <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap" id="tbDetalhesLog">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Status</th>
                            <th>Log Produção</th>
                            <th>Detalhe</th>
                        </tr>
                    </thead>
                    <tbody id="resultadoTbDetalhesLog">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@stop

@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugins', true)

@section('js')
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/operacional/producao.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.13.4/sorting/datetime-moment.js"></script>
<script>
    // VIEW SHOW PRODUCAO
    $(document).ready(function() {
        $.fn.dataTable.moment( 'DD/MM/YYYY HH:mm:ss' );
        var table = $('#listagemDaProducao').DataTable({
            order: [[2, 'desc']],
            "responsive": true,
            "lengthChange": false,
            "autoWidth": false,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"],
            "language": {
                "zeroRecords": "Nenhum registro encontrado",
                "info": "Mostrando os registos _START_ a _END_. Total: _TOTAL_",
                "search": "Procurar:",
                "infoEmpty": "Mostrando 0 registos",
                "infoFiltered": "(Filtrado num total de _MAX_ registros)",
                "paginate": {
                    "previous": "Anterior",
                    "next": "Próximo"
                },
            },
            data: JSON.parse('{!! $logs !!}', true),
            columns: [{
                    className: 'dt-control',
                    orderable: false,
                    data: null,
                    defaultContent: '<i class="icon fas fa-plus"></i>',
                },
                {
                    data: 'inicio'
                },
                {
                    data: 'atualizacao'
                }, {
                    data: 'lop_login'
                }, {
                    data: 'status'
                }, {
                    data: '',
                    render: function(data, type, row) {
                        return '<a href="#" class="text-primary" onclick="buscaDetalhesLog(' + row.lop_id + ')">' + row.lop_andamento + '</a>'
                    }
                },
            ],

        });

        // Add event listener for opening and closing details
        $('#listagemDaProducao tbody').on('click', 'td.dt-control', function() {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

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

    function format(d) {
        var total = parseFloat(d.lop_pre_pagamento) + parseFloat(d.lop_custo_operacional) + parseFloat(d.lop_pos_pagamento) + parseFloat(d.lop_intercambio);
        return (
            '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" class="table table-bordered">' +
            '<tr>' +
            '<td>Pré Pagamento</td>' +
            '<td>Custo Operacional</td>' +
            '<td>Pós Pagamento</td>' +
            '<td>Intercâmbio</td>' +
            '<td>Total</td>' +
            '</tr>' +
            '<tr>' +
            '<td>' + formataMoeda(d.lop_pre_pagamento) + '</td>' +
            '<td>' + formataMoeda(d.lop_custo_operacional) + '</td>' +
            '<td>' + formataMoeda(d.lop_pos_pagamento) + '</td>' +
            '<td>' + formataMoeda(d.lop_intercambio) + '</td>' +
            '<td>' + (total ? formataMoeda(total) : "R$ 0") + '</td>' +
            '</tr>' +

            '</table>'
        );
    }
</script>
@stop