@extends('donamarmita-admin')
@section('title', 'Log de Atividades')
@section('content')

<div class="right_col" role="main" style="min-height: 100vh;">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="page-header">
                <div class="row">
                    <div class="col-md-8 col-sm-8" style="padding-left: 30px;">
                        <div class="page-title">
                            <h1><i class="fa fa-history"></i> Log de Atividades</h1>
                            <p class="text-muted">Registo de todas as atividades dos utilizadores no sistema</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 text-right" style="padding-right: 35px;">
                        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#filtersModal">
                            <i class="fa fa-filter"></i> Filtros
                        </button>
                        <form id="clearLogsForm" 
                                action="{{ route('admin.users.activity.clear') }}" 
                                method="POST" 
                                style="display:none;">
                            @csrf
                            @method('DELETE')
                        </form>

                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <!-- Estatísticas Rápidas -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <h4>{{ $totalActivities }}</h4>
                                    <p>Total Atividades</p>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="fa fa-list fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <h4>{{ $todayActivities }}</h4>
                                    <p>Hoje</p>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="fa fa-calendar-day fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <h4>{{ $uniqueUsers }}</h4>
                                    <p>Utilizadores Ativos</p>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="fa fa-users fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <h4>{{ $criticalActivities }}</h4>
                                    <p>Críticas</p>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="fa fa-exclamation-triangle fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Painel Principal -->
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <div class="row align-items-center">
                        <div class="col-md-6 blue">
                            <h3 class="mb-0"><i class="fa fa-clipboard-list"></i> Registo de Atividades</h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-outline-secondary" id="exportBtn">
                                    <i class="fa fa-download"></i> Exportar
                                </button>
                                <button type="button" class="btn btn-outline-danger" id="clearLogsBtn">
                                    <i class="fa fa-trash"></i> Limpar Logs
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Filtros Ativos -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="active-filters">
                                @if($filters['user'])
                                    <span class="badge badge-primary">Utilizador: {{ $filters['user']->name }}</span>
                                @endif
                                @if($filters['type'])
                                    <span class="badge badge-info">Tipo: {{ $filters['type'] }}</span>
                                @endif
                                @if($filters['date_from'])
                                    <span class="badge badge-success">De: {{ $filters['date_from'] }}</span>
                                @endif
                                @if($filters['date_to'])
                                    <span class="badge badge-success">Até: {{ $filters['date_to'] }}</span>
                                @endif
                                @if($filters['module'])
                                    <span class="badge badge-warning">Módulo: {{ $filters['module'] }}</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover" 
                                id="activitiesTable"
                                data-url="{{ route('admin.activities.data') }}">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Data/Hora</th>
                                    <th>Utilizador</th>
                                    <th>Ação</th>
                                    <th>Módulo</th>
                                    <th>Descrição</th>
                                    <th>IP</th>
                                    <th>Nível</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Filtros -->
<div class="modal fade" id="filtersModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-filter"></i> Filtrar Atividades</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.users.activity') }}" method="GET">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="user_id" class="font-weight-bold">Utilizador</label>
                                <select class="form-control" id="user_id" name="user_id">
                                    <option value="">Todos os utilizadores</option>
                                    @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->first_name }} {{ $user->last_name }} ({{ $user->email }})
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="module" class="font-weight-bold">Módulo</label>
                                <select class="form-control" id="module" name="module">
                                    <option value="">Todos os módulos</option>
                                    @foreach($modules as $module)
                                    <option value="{{ $module }}" {{ request('module') == $module ? 'selected' : '' }}>
                                        {{ $module }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="action" class="font-weight-bold">Tipo de Ação</label>
                                <select class="form-control" id="action" name="action">
                                    <option value="">Todas as ações</option>
                                    <option value="login" {{ request('action') == 'login' ? 'selected' : '' }}>Login</option>
                                    <option value="create" {{ request('action') == 'create' ? 'selected' : '' }}>Criar</option>
                                    <option value="update" {{ request('action') == 'update' ? 'selected' : '' }}>Atualizar</option>
                                    <option value="delete" {{ request('action') == 'delete' ? 'selected' : '' }}>Eliminar</option>
                                    <option value="view" {{ request('action') == 'view' ? 'selected' : '' }}>Visualizar</option>
                                    <option value="export" {{ request('action') == 'export' ? 'selected' : '' }}>Exportar</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="level" class="font-weight-bold">Nível</label>
                                <select class="form-control" id="level" name="level">
                                    <option value="">Todos os níveis</option>
                                    <option value="info" {{ request('level') == 'info' ? 'selected' : '' }}>Informação</option>
                                    <option value="warning" {{ request('level') == 'warning' ? 'selected' : '' }}>Aviso</option>
                                    <option value="error" {{ request('level') == 'error' ? 'selected' : '' }}>Erro</option>
                                    <option value="critical" {{ request('level') == 'critical' ? 'selected' : '' }}>Crítico</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="date_from" class="font-weight-bold">Data Inicial</label>
                                <input type="date" class="form-control" id="date_from" name="date_from" 
                                       value="{{ request('date_from') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="date_to" class="font-weight-bold">Data Final</label>
                                <input type="date" class="form-control" id="date_to" name="date_to" 
                                       value="{{ request('date_to') }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="{{ route('admin.users.activity') }}" class="btn btn-secondary">Limpar Filtros</a>
                    <button type="submit" class="btn btn-primary">Aplicar Filtros</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Detalhes -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-info-circle"></i> Detalhes da Atividade</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <pre id="detailsContent" class="p-3 bg-light border rounded"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<div id="dm-loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
    <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
</div>

@push('styles')
<style>
    .user-info {
        display: flex;
        align-items: center;
    }

    .user-details {
        margin-left: 10px;
    }

    .activity-description {
        max-width: 300px;
        word-wrap: break-word;
    }

    .module-badge {
        background: #e9ecef;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 0.8em;
        color: #495057;
    }

    .active-filters .badge {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .activity-row:hover {
        cursor: pointer;
        background-color: #f8f9fa !important;
    }

    .dataTables_processing {
        display: none !important;
    }

    /* Mantém o teu loader custom bonito */
    #dm-loader {
        position: fixed;              /* Fica sempre no ecrã */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centro absoluto */
        z-index: 99999;               /* Muito acima de tudo */
        background: rgba(255,255,255,0.7); /* Leve fundo difuso (opcional) */
        padding: 20px;
        border-radius: 8px;
        display: none;
    }

    #dm-loader img {
        width: 60px;
        height: 60px;
        animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    let table = $('#activitiesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: $('#activitiesTable').data('url'),
        pageLength: 20,

        columns: [
            { data: 'datetime', name: 'created_at' },
            { data: 'user', name: 'user.name', orderable: false, searchable: false },
            { data: 'action', name: 'act_action' },
            { data: 'module', name: 'act_module' },
            { data: 'description', name: 'act_description' },
            { data: 'ip', name: 'act_ip' },
            { data: 'level', name: 'act_level' }
        ],

        columnDefs: [
            { className: "text-center", targets: [0, 2, 3, 5, 6] }
        ],

        language: {
            url: "/vendor/datatables/Portuguese.json",
            processing: "" 
        }
    });

    // Loader global — REUTILIZAR
    table.on('processing.dt', function (e, settings, processing) {
        if (processing) $('#dm-loader').show();
        else $('#dm-loader').hide();
    });


    // Ver detalhes da atividade
    $('.view-details').on('click', function(e) {
        e.stopPropagation();
        var details = $(this).data('details');
        $('#detailsContent').text(JSON.stringify(JSON.parse(details), null, 2));
        $('#detailsModal').modal('show');
    });

    // Linha clicável para ver detalhes
    $('.activity-row').on('click', function() {
        var activityId = $(this).data('activity-id');
        // Aqui pode redirecionar para uma página de detalhes ou mostrar modal
        console.log('Ver detalhes da atividade:', activityId);
    });

    // Exportar logs
    $('#exportBtn').on('click', function() {
        var params = new URLSearchParams(window.location.search);
        window.location.href = "{{ route('admin.users.activity.export') }}?" + params.toString();
    });

    // Limpar logs
    $('#clearLogsBtn').on('click', function() {
        if (confirm('Tem a certeza que deseja limpar todos os logs? Esta ação não pode ser desfeita.')) {
            $('#clearLogsForm').submit();
        }
    });

});
</script>
@endpush

@endsection