@extends('adminlte.app')

@section('content')

<div class="content-wrapper pb-3">
    <!-- Content Header (Page header) -->
   
    <!-- /.content-header -->

    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        <p>{{ $message }}</p>
    </div>
    @endif

    <div class="card mx-3 mt-3">
        <div class="card-header">
            <div class="row">  
                <div class="col-3">
                    Logs
                </div>
            </div>

        </div>
        <div class="card-body">


                <div class="row bg-dark text-white">
                    <div class="col-12">
                        Filtros
                    </div>
                </div>
                    <div class="row border">
                        @csrf
                        <div class="col-md-3">
                            <label for="data_inicio" class="col-form-label">Data Início</label>
                            <input type="date" name="data_inicio" id="data_inicio" class="form-control" value="{{$data_inicio ?? date('Y-m-d')}}">
                        </div>
                        <div class="col-md-3">
                            <label for="data_fim" class="col-form-label">Data Fim</label>
                            <input type="date" name="data_fim" id="data_fim" class="form-control" value="{{$data_fim ?? date('Y-m-d')}}">
                        </div>
                        <div class="col-md-3">
                            <label for="tela" class="col-form-label">Tela</label>
                            <input type="text" name="tela" id="tela" class="form-control" value="{{$tela ?? ''}}">
                        </div>
                        <div class="col-md-3">
                            <label for="usuario" class="col-form-label">Usuário</label>
                            <select name="usuario" id="usuario" class="form-control">
                                <option value="">Selecione</option>
                                @foreach($usuarios as $usuario)
                                    <option value="{{$usuario->id}}">{{$usuario->name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-12 text-center">
                            <button id="btn_consultar" class="btn btn-primary mt-4 mb-3">Consultar</button>
                        </div>
                    </div>

             
        </div>


        <div class="card mx-3 mt-3">
          
            <div class="card-body">


                <div class="table-responsive">
    
                        <table id="tbl_log" class="table table-bordered text-center">
                            <thead>
                                <tr>
                                    <th>Data</th>
                                    <th>Tela</th>
                                    <th>Usuário</th>
                                    <th>Descrição</th>
                                    <th>IP</th>
                                    <th>Localização</th>
                        
                                </tr>
                            </thead>
                            <tbody>
                        
                            </tbody>
                        </table>
                </div>
            </div>
        </div>

    </div>

</div>


<!-- DataTables  & Plugins -->
<script src={{ asset('/plugins/datatables/jquery.dataTables.min.js') }}></script>
<script src={{ asset('/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}></script>
<script src={{ asset('/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}></script>
<script src={{ asset('/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}></script>
<script src={{ asset('/plugins/jszip/jszip.min.js') }}></script>
<script src={{ asset('/plugins/pdfmake/pdfmake.min.js') }}></script>
<script src={{ asset('/plugins/pdfmake/vfs_fonts.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/buttons.html5.min.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/buttons.print.min.js') }}></script>
<script src={{ asset('/plugins/datatables-buttons/js/buttons.colVis.min.js') }}></script>



<script>

$('#tbl_log').DataTable( {

"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": false,
"order": [[ 0, "desc" ]],
processing: true,
serverSide: true,
ajax: {
    url: '{{ route('consultar_log') }}',
    type: 'POST',
    data: function(d) {
            d._token = $('input[name="_token"]').val();
            d.data_inicio = $('#data_inicio').val();
            d.data_fim = $('#data_fim').val();
            d.tela = $('#tela').val();
            d.usuario = $('#usuario').val();
        }
},
columns: [
    { data: 'data_criacao',
    render: function(data) {
        if (data !== null) {
            const date = new Date(data);
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0'); // Mês começa do 0
            const year = date.getFullYear();
            return `${day}/${month}/${year}`;
        }
        return '';
    }
 },
    { data: 'tela',
    render: function(data, type, row, meta) {
        return data !== null ? data : '';
    },
 },
    { data: 'user_name',
    render: function(data, type, row, meta) {
        return data !== null ? data : '';
    },
 },
 {
        data: 'descricao',
        render: function(data) {
            if (data !== null) {
                try {
                    // Tenta converter a string JSON em um objeto
                    const obj = JSON.parse(data);
                    
                    // Mapeia o objeto em uma string formatada
                    return Object.entries(obj)
                        .map(([key, value]) => `<strong>${key}:</strong> ${value !== null ? value : 'N/A'}`)
                        .join('<br>');
                } catch (e) {
                    // Se não for JSON válido, retorna o próprio valor
                    return data;
                }
            }
            return '';
        }
    },
    { data: 'user_ip',
    render: function(data, type, row, meta) {
            return data !== null ? data : '';
        },
    },
        { data: 'localizacao',
    render: function(data, type, row, meta) {
            return data !== null ? data : '';
        },
        
    },
    
],
"buttons": {
    "buttons": [ 
        {"extend":"csv","text":"CSV", className: 'btn btn-primary text-xs' },
        {"extend":"excel","text":"Excel", className: 'btn btn-primary text-xs' },
        {"extend":"pdf","text":"PDF", className: 'btn btn-primary text-xs' },
        {"extend":"print","text":"Imprimir", className: 'btn btn-primary text-xs' },
        {"extend":"colvis","text":"Colunas", className: 'btn btn-primary text-xs' }
        ],

        "dom": {
            "button": {
            "className": ''
            }
        },
    },
"lengthMenu": [[8, 10, 25, 50, -1], [8, 10, 25, 50, "All"]],
        "bJQueryUI": true,
        "oLanguage": {
            "sProcessing":   "Processando...",
            "sLengthMenu":   "Registros _MENU_ ",
            "sZeroRecords":  "Não foram encontrados resultados",
            "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
            "sInfoFiltered": "",
            "sInfoPostFix":  "",
            "sSearch":       "Buscar:",
            "sUrl":          "",
            "oPaginate": {
                "sFirst":    "Primeiro",
                "sPrevious": "Anterior",
                "sNext":     "Seguinte",
                "sLast":     "Último"
            }
        },
} ).buttons().container().appendTo('#tbl_log_wrapper .col-md-6:eq(0)');

$('#btn_consultar').click(function(){
    $('#tbl_log').DataTable().ajax.reload();
});

</script>

@endsection