@extends('layouts.app')

@section('subtitle', 'Usuários Atualizados')
@section('content_header_title', 'Usuarios')
@section('content_header_subtitle', 'Atualizados')

@section('content_body')
<div class="dataTables_wrapper dt-bootstrap4">
    <div class="row">
        <div class="col-lg-12 col-12">
            <label for="start-date">Data Inicial:</label>
            <input type="date" id="start-date" name="start-date">
            <label for="end-date">Data Final:</label>
            <input type="date" id="end-date" name="end-date">
        <table id="usuarios-table"  class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Nome do Usuário</th>
                    <th>Status do Usuário</th>
                    <th>Situação</th>
                    <th>Data de Criação</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        </div>
    </div>
</div>
@stop
@push('css')
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
@endpush

@push('js')
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        function setDefaultDate() {
            var today = new Date().toISOString().split('T')[0];
            $('#start-date').val(today);
            $('#end-date').val(today);
        }

        // Definir as datas padrão quando a página carrega
        setDefaultDate();
        var table = $('#usuarios-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('logusers.atualizados') }}',
                data: function (d) {
                        d.start_date = $('#start-date').val();
                        d.end_date = $('#end-date').val();
                }
            },
            columns: [
                { data: 'usuario_nome', name: 'usuario_nome' },
                { data: 'status_usuario', name: 'status_usuario' },
                { data: 'situacao_usuario', name: 'situacao_usuario' },
                { data: 'created_at', name: 'created_at' }
            ],
            "language": {
                "sProcessing":    "Procesando...",
                "sLengthMenu":    "Mostrar _MENU_ registros",
                "sZeroRecords":   "Sem resultados",
                "sEmptyTable":    "Sem resultados",
                "sInfo":          "Mostrando registros de _START_ a _END_ de um total de _TOTAL_ registros",
                "sInfoEmpty":     "Mostrando registros de 0 a 0 de un total de 0 registros",
                "sInfoFiltered":  "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":   "",
                "sSearch":        "Buscar:",
                "sUrl":           "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Carregando...",
                "oPaginate": {
                    "sFirst":    "Primeiro",
                    "sLast":    "Último",
                    "sNext":    "Próximo",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            }
        });
        $('#start-date, #end-date').change(function() {
                table.draw();
        });
    });
</script>
@endpush