@extends('layouts.app')

@section('content')
<main class="content">
    <div class="container-fluid p-0">

        <h1 class="h3 mb-3">Bens</h1>

        <div class="row">
            <div class="action-buttons mt-3 mb-3 text-end">
                <a href="#" class="btn text-primary bg-primary bg-opacity-25 fw-medium">
                    <i class="ri-dashboard-line align-middle"></i> Confeccionar Plaquetas
                </a>
            </div>
            <div class="col-12 p-3">
                <div class="card flex-fill table-responsive p-3">

                    <table class="table table-hover my-0" id="bens">
                        <thead>
                            <tr>
                                <th>N°</th>
                                <th >Descrição</th>
                                <th >Data de Aquisição</th>
                                <th >Grupo</th>
                                <th >Setor</th>
                                <th >Número do Emepenho</th>
                                <th >Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Itens Via JS -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection

@section('scripts')
<script>
    moment.locale('pt-br');

    $(document).ready(function () {
        $('#bens').DataTable({
            ajax: {
                url: '{{ url("/bens-json") }}',
                dataSrc: 'data'
            },
            columns: [
                { data: 'numeroPatrimonio' },
                { data: 'descricaoPatrimonio' },
                {
                    data: 'dataAquisicao',
                    render: function (data) {
                        return moment(data).format('DD/MM/YYYY');
                    }
                },
                { data: 'grupo' },
                { data: 'setor' },
                {
                    data: 'numeroEmpenho',
                    render: function (data) {
                        return data ? data : 'Sem Informação';
                    }
                },
                {
                    data: 'numeroPatrimonio',
                    render: function (data) {
                        return `<a href="/item/${data}" class="btn btn-sm text-primary bg-primary bg-opacity-10">Detalhes</a>`;
                    },
                    orderable: false
                }
            ],
            pageLength: 10,
            responsive: true,
            language: {
                url: "{{ asset('assets/js/datatables_translate.json') }}"
            }
        });
    });
</script>

@endsection