@extends('layouts.app')

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

        <h1 class="h3 mb-3">Usuários</h1>

        <div class="text-end">
            <a href="#" class="btn btn-primary">
                <i class="align-middle" data-feather="plus-circle"></i> Cadastrar Usuário
            </a>
        </div>

        <div class="row">
            <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 >Data de Criação</th>
                                <th >Nome</th>
                                <th>CPF</th>
                                <th >Registro</th>
                                <th >Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($usuarios as $usuario)
                                <tr>
                                    <td class="fw-bold" style="width: 5px;">{{ \Carbon\Carbon::parse($usuario->created_at)->format('d/m/Y H:i') }}</td>
                                    <td class="fw-bold">{{ $usuario->name }}</td>
                                    <td >{{ $usuario->cpf }}</td>
                                    <td >{{ $usuario->registration }}</td>
                                    <td><a href="#" class="btn btn-sm btn-primary">Gerenciar</a></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#bens').DataTable({
            "pageLength" : 10,
            "responsive": true,
            "language": {
                "url": "{{ asset('assets/js/datatables_translate.json') }}"
            },
            "columnDefs": [
                {
                    "targets": -1,
                    "orderable": false
                }
            ]
        });

    });
</script>
@endsection