@extends('layouts.app')

@section('title', 'Activity Log - SIAKAD')
@section('page-title', 'Log Aktivitas')

@section('content')
@php
$currentFilters = [
    'search' => request('search'),
    'role' => request('role'),
    'event' => request('event'),
    'date_from' => request('date_from'),
    'date_to' => request('date_to'),
];
$hasFilters = collect($currentFilters)->filter()->isNotEmpty();
@endphp

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-lg-2 col-md-4 col-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon primary">
                <i class="bi bi-list-check"></i>
            </div>
            <div class="stat-content">
                <h3>{{ number_format($stats['total']) }}</h3>
                <p>Total Aktivitas</p>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon success">
                <i class="bi bi-box-arrow-in-right"></i>
            </div>
            <div class="stat-content">
                <h3>{{ number_format($stats['logins']) }}</h3>
                <p>Login</p>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon primary">
                <i class="bi bi-plus-circle"></i>
            </div>
            <div class="stat-content">
                <h3>{{ number_format($stats['creates']) }}</h3>
                <p>Dibuat</p>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon warning">
                <i class="bi bi-pencil"></i>
            </div>
            <div class="stat-content">
                <h3>{{ number_format($stats['updates']) }}</h3>
                <p>Diperbarui</p>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon danger">
                <i class="bi bi-trash"></i>
            </div>
            <div class="stat-content">
                <h3>{{ number_format($stats['deletes']) }}</h3>
                <p>Dihapus</p>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon info">
                <i class="bi bi-people"></i>
            </div>
            <div class="stat-content">
                <h3>{{ number_format($stats['admins'] + $stats['dosens'] + $stats['mahasiswas']) }}</h3>
                <p>Aktif Users</p>
            </div>
        </div>
    </div>
</div>

<!-- Activity by Role -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <span class="badge bg-danger"><i class="bi bi-shield"></i></span>
                    <strong>Admin</strong>
                    <span class="badge bg-secondary ms-auto">{{ $stats['admins'] }} aktivitas</span>
                </div>
                @forelse($recentByRole['admin'] as $log)
                <div class="d-flex align-items-start gap-2 py-2 border-bottom">
                    <i class="bi {{ $log->event_icon }} text-danger"></i>
                    <div class="flex-grow-1">
                        <small class="d-block">{{ Str::limit($log->description, 40) }}</small>
                        <small class="text-muted">{{ $log->created_at->diffForHumans() }}</small>
                    </div>
                </div>
                @empty
                <p class="text-muted small mb-0">Belum ada aktivitas</p>
                @endforelse
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <span class="badge bg-primary"><i class="bi bi-mortarboard"></i></span>
                    <strong>Dosen</strong>
                    <span class="badge bg-secondary ms-auto">{{ $stats['dosens'] }} aktivitas</span>
                </div>
                @forelse($recentByRole['dosen'] as $log)
                <div class="d-flex align-items-start gap-2 py-2 border-bottom">
                    <i class="bi {{ $log->event_icon }} text-primary"></i>
                    <div class="flex-grow-1">
                        <small class="d-block">{{ Str::limit($log->description, 40) }}</small>
                        <small class="text-muted">{{ $log->created_at->diffForHumans() }}</small>
                    </div>
                </div>
                @empty
                <p class="text-muted small mb-0">Belum ada aktivitas</p>
                @endforelse
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <span class="badge bg-success"><i class="bi bi-person"></i></span>
                    <strong>Mahasiswa</strong>
                    <span class="badge bg-secondary ms-auto">{{ $stats['mahasiswas'] }} aktivitas</span>
                </div>
                @forelse($recentByRole['mahasiswa'] as $log)
                <div class="d-flex align-items-start gap-2 py-2 border-bottom">
                    <i class="bi {{ $log->event_icon }} text-success"></i>
                    <div class="flex-grow-1">
                        <small class="d-block">{{ Str::limit($log->description, 40) }}</small>
                        <small class="text-muted">{{ $log->created_at->diffForHumans() }}</small>
                    </div>
                </div>
                @empty
                <p class="text-muted small mb-0">Belum ada aktivitas</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Main Activity Table -->
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0">Log Aktivitas Sistem</h5>
                <small class="text-muted">Memantau semua aktivitas user dalam sistem</small>
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="toggleFilter()">
                    <i class="bi bi-funnel"></i> Filter
                    @if($hasFilters)
                    <span class="badge bg-danger ms-1">!</span>
                    @endif
                </button>
                <form action="{{ route('admin.activity-log.export') }}" method="GET" class="d-inline">
                    @foreach(request()->only(['role', 'event', 'date_from', 'date_to']) as $key => $value)
                        @if($value)
                            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                        @endif
                    @endforeach
                    <button type="submit" class="btn btn-outline-success btn-sm">
                        <i class="bi bi-download"></i> Export CSV
                    </button>
                </form>
                <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirmClearAll()">
                    <i class="bi bi-trash"></i> Clear All
                </button>
            </div>
        </div>
    </div>

    <!-- Filter Panel -->
    <div id="filterPanel" class="card-body border-bottom {{ $hasFilters ? '' : 'd-none' }}">
        <form method="GET" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Pencarian</label>
                <input type="text" name="search" class="form-control" placeholder="Cari user, deskripsi..." value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Role</label>
                <select name="role" class="form-select">
                    <option value="">Semua Role</option>
                    <option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                    <option value="dosen" {{ request('role') == 'dosen' ? 'selected' : '' }}>Dosen</option>
                    <option value="mahasiswa" {{ request('role') == 'mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Event</label>
                <select name="event" class="form-select">
                    <option value="">Semua Event</option>
                    <option value="login" {{ request('event') == 'login' ? 'selected' : '' }}>Login</option>
                    <option value="logout" {{ request('event') == 'logout' ? 'selected' : '' }}>Logout</option>
                    <option value="create" {{ request('event') == 'create' ? 'selected' : '' }}>Create</option>
                    <option value="update" {{ request('event') == 'update' ? 'selected' : '' }}>Update</option>
                    <option value="delete" {{ request('event') == 'delete' ? 'selected' : '' }}>Delete</option>
                    <option value="view" {{ request('event') == 'view' ? 'selected' : '' }}>View</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Dari Tanggal</label>
                <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Sampai Tanggal</label>
                <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
            </div>
            <div class="col-md-1">
                <label class="form-label">&nbsp;</label>
                <div class="d-flex gap-1">
                    <button type="submit" class="btn btn-primary flex-grow-1">
                        <i class="bi bi-search"></i>
                    </button>
                    <a href="{{ route('admin.activity-log.index') }}" class="btn btn-secondary" title="Reset Filter">
                        <i class="bi bi-x-lg"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th style="width: 50px;">#</th>
                    <th style="width: 140px;">Waktu</th>
                    <th style="width: 120px;">User</th>
                    <th style="width: 100px;">Role</th>
                    <th style="width: 100px;">Event</th>
                    <th>Deskripsi</th>
                    <th style="width: 100px;">IP Address</th>
                    <th style="width: 60px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($logs as $index => $log)
                <tr class="activity-row" data-id="{{ $log->id }}" data-user="{{ $log->user_name }}" data-role="{{ $log->user_role }}" data-event="{{ $log->event }}" data-desc="{{ htmlspecialchars($log->description) }}" data-ip="{{ $log->ip_address }}" data-agent="{{ htmlspecialchars($log->user_agent) }}" data-created="{{ $log->created_at->format('d M Y H:i:s') }}">
                    <td class="text-muted">{{ $logs->firstItem() + $index }}</td>
                    <td>
                        <small class="d-block">{{ $log->created_at->format('d M Y') }}</small>
                        <small class="text-muted">{{ $log->created_at->format('H:i:s') }}</small>
                    </td>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <div class="user-avatar-sm" style="background: {{ $log->user_role == 'admin' ? 'var(--danger)' : ($log->user_role == 'dosen' ? 'var(--primary)' : 'var(--success)') }}">
                                {{ strtoupper(substr($log->user_name ?? 'U', 0, 1)) }}
                            </div>
                            <span class="small fw-medium">{{ $log->user_name ?? 'System' }}</span>
                        </div>
                    </td>
                    <td>
                        <span class="badge {{ $log->roleBadge['class'] }}">
                            {{ $log->roleBadge['label'] }}
                        </span>
                    </td>
                    <td>
                        <span class="badge {{ $log->eventBadge['class'] }}">
                            <i class="bi {{ $log->eventBadge['icon'] }} me-1"></i>
                            {{ ucfirst($log->event) }}
                        </span>
                    </td>
                    <td>
                        <small>{{ $log->description }}</small>
                        @if($log->properties)
                        <button class="btn btn-sm p-0 ms-2 text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#props-{{ $log->id }}">
                            <i class="bi bi-braces"></i> Details
                        </button>
                        <div class="collapse small mt-1" id="props-{{ $log->id }}">
                            <pre class="mb-0 p-2 bg-light rounded" style="font-size: 11px;">{{ json_encode($log->properties, JSON_PRETTY_PRINT) }}</pre>
                        </div>
                        @endif
                    </td>
                    <td>
                        <code class="small">{{ $log->ip_address ?? '-' }}</code>
                    </td>
                    <td>
                        <button type="button" class="action-btn view" onclick="showDetail(this)" title="Detail">
                            <i class="bi bi-eye"></i>
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-5">
                        <div class="text-muted">
                            <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                            <span>Belum ada log aktivitas</span>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($logs->hasPages())
    <div class="card-footer bg-white">
        <div class="d-flex justify-content-between align-items-center">
            <span class="text-muted">
                Menampilkan {{ $logs->firstItem() }} - {{ $logs->lastItem() }} dari {{ $logs->total() }} data
            </span>
            {{ $logs->withQueryString()->links('pagination::bootstrap-4') }}
        </div>
    </div>
    @endif
</div>

<!-- Detail Modal -->
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-clock-history me-2"></i>Detail Aktivitas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detailContent">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>
</div>

<!-- Clear All Modal -->
<div class="modal fade" id="clearAllModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle me-2"></i>Peringatan!</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Anda akan menghapus <strong>SEMUA</strong> log aktivitas sistem.</p>
                <p class="text-muted">Tindakan ini tidak dapat dibatalkan.</p>
                <div class="alert alert-warning">
                    <strong>Ketik <code>DELETE_ALL_LOGS</code> untuk mengkonfirmasi:</strong>
                    <input type="text" id="clearConfirmInput" class="form-control mt-2" placeholder="Ketik DELETE_ALL_LOGS">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <form action="{{ route('admin.activity-log.clearAll') }}" method="POST" id="clearAllForm">
                    @csrf
                    <input type="hidden" name="confirm" id="clearConfirmValue">
                    <button type="submit" class="btn btn-danger" id="clearAllBtn" disabled>
                        <i class="bi bi-trash me-2"></i>Hapus Semua
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .user-avatar-sm {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
        font-weight: 600;
    }
    .badge.bg-login { background-color: var(--success) !important; }
    .badge.bg-logout { background-color: var(--gray-500) !important; }
    .badge.bg-create { background-color: var(--primary) !important; }
    .badge.bg-update { background-color: var(--warning) !important; }
    .badge.bg-delete { background-color: var(--danger) !important; }
    .badge.bg-view { background-color: var(--info) !important; }
</style>

@push('scripts')
<script>
    function toggleFilter() {
        const panel = document.getElementById('filterPanel');
        panel.classList.toggle('d-none');
    }

    function showDetail(btn) {
        const row = btn.closest('tr');
        const data = row.dataset;

        const eventBadges = {
            'login': 'bg-success',
            'logout': 'bg-secondary',
            'create': 'bg-primary',
            'update': 'bg-warning',
            'delete': 'bg-danger',
            'view': 'bg-info'
        };

        const roleBadges = {
            'admin': { class: 'bg-danger', label: 'Admin' },
            'dosen': { class: 'bg-primary', label: 'Dosen' },
            'mahasiswa': { class: 'bg-success', label: 'Mahasiswa' }
        };

        const eventIcons = {
            'login': 'bi-box-arrow-in-right',
            'logout': 'bi-box-arrow-right',
            'create': 'bi-plus-circle-fill',
            'update': 'bi-pencil-fill',
            'delete': 'bi-trash-fill',
            'view': 'bi-eye-fill'
        };

        const roleBadge = roleBadges[data.role] || { class: 'bg-secondary', label: 'Unknown' };
        const eventClass = eventBadges[data.event] || 'bg-info';
        const eventIcon = eventIcons[data.event] || 'bi-circle';
        const roleColor = data.role == 'admin' ? 'var(--danger)' : (data.role == 'dosen' ? 'var(--primary)' : 'var(--success)');

        const html = `
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-sm mb-0">
                        <tr>
                            <td class="fw-medium" style="width: 120px;">User</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div style="width: 32px; height: 32px; background: ${roleColor}; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px;">
                                        ${(data.user || 'S').charAt(0).toUpperCase()}
                                    </div>
                                    <span class="fw-semibold">${data.user || 'System'}</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-medium">Role</td>
                            <td><span class="badge ${roleBadge.class}">${roleBadge.label}</span></td>
                        </tr>
                        <tr>
                            <td class="fw-medium">Event</td>
                            <td><span class="badge ${eventClass}"><i class="bi ${eventIcon} me-1"></i>${data.event ? data.event.charAt(0).toUpperCase() + data.event.slice(1) : '-'}</span></td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <table class="table table-sm mb-0">
                        <tr>
                            <td class="fw-medium" style="width: 120px;">Waktu</td>
                            <td>${data.created}</td>
                        </tr>
                        <tr>
                            <td class="fw-medium">IP Address</td>
                            <td><code>${data.ip || '-'}</code></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="mt-3">
                <label class="fw-medium">Deskripsi:</label>
                <p class="mb-0 p-3 bg-light rounded">${data.desc || '-'}</p>
            </div>
            <div class="mt-3">
                <label class="fw-medium">User Agent:</label>
                <p class="mb-0 small text-muted p-2 bg-light rounded" style="word-break: break-all;">${data.agent || '-'}</p>
            </div>
        `;

        document.getElementById('detailContent').innerHTML = html;
        new bootstrap.Modal(document.getElementById('detailModal')).show();
    }

    function confirmClearAll() {
        const modal = new bootstrap.Modal(document.getElementById('clearAllModal'));
        const input = document.getElementById('clearConfirmInput');
        const btn = document.getElementById('clearAllBtn');
        const value = document.getElementById('clearConfirmValue');

        input.value = '';
        btn.disabled = true;

        input.addEventListener('input', function() {
            if (this.value === 'DELETE_ALL_LOGS') {
                btn.disabled = false;
                value.value = 'DELETE_ALL_LOGS';
            } else {
                btn.disabled = true;
                value.value = '';
            }
        });

        modal.show();
    }
</script>
@endpush
@endsection