@extends('admin.layouts.master')

@section('title', 'System Activity & Audit Logs')

@section('css')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <style>
        .audit-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 16px;
            padding: 1.75rem 2rem;
            color: #ffffff;
            margin-bottom: 2rem;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
        }
        .kpi-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 1.25rem 1.5rem;
            height: 100%;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        }
        .kpi-val {
            font-size: 1.8rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.2;
        }
        .kpi-lbl {
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .kpi-icon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }
        .table-audit-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 1.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }
        .table-audit th {
            background: #f8fafc;
            color: #475569;
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #e2e8f0;
        }
    </style>
@endsection

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="audit-hero d-flex align-items-center justify-content-between">
            <div>
                <h2 class="mb-1 font-weight-bold" style="font-size: 1.6rem;">
                    <i class="fas fa-shield-alt text-primary mr-2"></i> System Activity & Forensic Audit Desk
                </h2>
                <p class="mb-0 text-slate-300" style="font-size: 0.95rem; opacity: 0.85;">
                    Real-time monitoring of authentication events, result management operations, and administrative actions.
                </p>
            </div>
            <div>
                <span class="badge badge-success px-3 py-2" style="font-size: 0.85rem; border-radius: 8px;">
                    <i class="fas fa-lock mr-1"></i> Audit Logging Active
                </span>
            </div>
        </div>

        <!-- Metric KPI Cards -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="kpi-card d-flex align-items-center justify-content-between">
                    <div>
                        <div class="kpi-lbl">Total Logs Today</div>
                        <div class="kpi-val">{{ number_format($totalToday) }}</div>
                    </div>
                    <div class="kpi-icon bg-primary-subtle text-primary" style="background: #e0f2fe; color: #0284c7;">
                        <i class="fas fa-calendar-day"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="kpi-card d-flex align-items-center justify-content-between">
                    <div>
                        <div class="kpi-lbl">Auth Events Today</div>
                        <div class="kpi-val">{{ number_format($authEvents) }}</div>
                    </div>
                    <div class="kpi-icon" style="background: #e0e7ff; color: #4338ca;">
                        <i class="fas fa-user-shield"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="kpi-card d-flex align-items-center justify-content-between">
                    <div>
                        <div class="kpi-lbl">Security Alerts</div>
                        <div class="kpi-val text-danger">{{ number_format($securityAlerts) }}</div>
                    </div>
                    <div class="kpi-icon" style="background: #fee2e2; color: #dc2626;">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="kpi-card d-flex align-items-center justify-content-between">
                    <div>
                        <div class="kpi-lbl">Total System Logs</div>
                        <div class="kpi-val">{{ number_format($totalLogs) }}</div>
                    </div>
                    <div class="kpi-icon" style="background: #f1f5f9; color: #475569;">
                        <i class="fas fa-database"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Audit Table Card -->
        <div class="table-audit-card">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h5 class="font-weight-bold mb-0 text-dark">
                    <i class="fas fa-list-alt mr-2 text-primary"></i> Activity Log Register
                </h5>
                <div class="form-inline">
                    <label class="mr-2 font-weight-bold text-muted" style="font-size: 0.85rem;">Filter Channel:</label>
                    <select id="logFilter" class="form-control form-control-sm" style="border-radius: 8px;">
                        <option value="">All Activity Logs</option>
                        <option value="auth">Authentication (auth)</option>
                        <option value="security">Security Alerts (security)</option>
                        <option value="result">Result Operations (result)</option>
                        <option value="post">Grievance Support (post)</option>
                    </select>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover table-audit w-100" id="activityLogsTable">
                    <thead>
                        <tr>
                            <th style="width: 60px;">ID</th>
                            <th style="width: 140px;">Channel</th>
                            <th style="width: 160px;">User / Actor</th>
                            <th>Description & Details</th>
                            <th style="width: 120px;">IP Address</th>
                            <th style="width: 180px;">Timestamp</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    <!-- 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>
    $(document).ready(function() {
        $.fn.dataTable.ext.errMode = 'none';

        var table = $('#activityLogsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.activity-logs') }}",
                type: "GET",
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                data: function (d) {
                    d.log_name = $('#logFilter').val();
                },
                error: function (xhr, error, thrown) {
                    console.error('DataTables ActivityLog AJAX error:', xhr.status, thrown);
                    if (xhr.status === 401 || xhr.status === 419) {
                        window.location.reload();
                    }
                }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'log_name', name: 'log_name' },
                { data: 'user', name: 'user', searchable: false, orderable: false },
                { data: 'description', name: 'description' },
                { data: 'ip_address', name: 'ip_address', orderable: false, searchable: false },
                { data: 'created_at', name: 'created_at' }
            ],
            order: [[0, 'desc']],
            pageLength: 15,
            pagingType: "simple_numbers",
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search activity logs..."
            }
        });

        $('#logFilter').on('change', function() {
            table.draw();
        });
    });
    </script>
@endsection