@extends('layout')

@section('cssUrl')
<link rel="stylesheet" href="{{ asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css') }}">
@endsection

@section('csss')
    <style>
        tbody {
            cursor: pointer;
        }
    </style>
@endsection

@php
    $title = 'Lista de Emissões NF'
@endphp

@section('title')
    {{ $title }}
@endsection

@section('conteudo')
<section class="content">
    <div class="body_scroll">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-7">
                    <h2 class="uppercase">{{ $title }}</h2>
                </div>

                <div class="col-sm-12">
                    <button id="btNovo" class="btn btn-primary"
                        data-urlnew="{{ route('nfegerador.show', ['0']) }}">
                        Novo Registro
                    </button>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="card">
                <div class="body">
                    <div class="table-responsive">
                        <table id="listarDataTable" width="100%" class="table table-bordered table-striped table-hover js-basic-example dataTableordered table-striped table-hover dataTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Cliente</th>
                                    <th>Data Emissão</th>
                                    <th>Valor</th>
                                    <th>Status</th>
                                    <th>Protocolo</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Cliente</th>
                                    <th>Data Emissão</th>
                                    <th>Valor</th>
                                    <th>Status</th>
                                    <th>Protocolo</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scriptUrl')
    <script src="{{ asset('assets/bundles/datatablescripts.bundle.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/js/formjs.js') }}"></script>
@endsection

@section('scripts')
<script>
$(document).ready(function() {

    $('#listarDataTable').DataTable({
        serverSide: true,
        processing: true,
        responsive: true,
        order: [0, 'desc'],
        ajax: {
            url: "{!! route('nfegerador.listDataTable') !!}"
        },
        columns: [
            { data: 'id_provedor_nf_emissoes' },
            { data: 'nome_cliente' },
            { data: 'emissao_provedor_nf_emissoes' },
            { data: 'valor_provedor_nf_emissoes' },
            { data: 'status_provedor_nf_emissoes' },
            { data: 'protocolo_provedor_nf_emissoes' }
        ],
        language: {
            "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
            "zeroRecords": "Nenhum registro encontrado",
            "search": "Buscar:"
        }
    });

});

// clique na linha
$('#listarDataTable').on('click', 'tbody tr td', function() {
    let id = $(this).closest('tr').children()[0].textContent;
    window.location.href = "{{ route('nfegerador.show') }}/" + id;
});
</script>
@endsection