@extends('layouts.admin')
@section('title','Monitoring')
@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@endpush
@section('content')
<div style="margin-bottom:20px;">
    <h1 style="font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:#0d1117;">📊 Statistik & Activity Log</h1>
    <p style="font-size:12px;color:#64748b;margin-top:3px;">FR-A-11 · Monitoring pengguna, tes, dan aktivitas sistem</p>
</div>

{{-- Stat mini --}}
<div class="cards-grid" style="grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); margin-bottom:20px;">
    @foreach([['Siswa Aktif',$siswaAktif,'#ecfdf5','#059669'],['Siswa Nonaktif',$siswaInaktif,'#fef2f2','#dc2626'],['Guru BK Aktif',$guruBkAktif,'#eff6ff','#2563eb'],['Guru BK Nonaktif',$guruBkInaktif,'#fef2f2','#dc2626']] as [$label,$val,$bg,$c])
    <div style="background:{{ $bg }};border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;">
        <div style="font-size:11px;font-weight:700;color:#64748b;margin-bottom:4px;">{{ $label }}</div>
        <div style="font-family:'Syne',sans-serif;font-size:26px;font-weight:800;color:{{ $c }};">{{ $val }}</div>
    </div>
    @endforeach
</div>

{{-- Charts --}}
<div class="cards-grid" style="grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); margin-bottom:20px;">
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.06);">
        <div style="font-family:'Syne',sans-serif;font-size:13.5px;font-weight:700;margin-bottom:16px;">🏆 Peminat Jurusan</div>
        <div style="position:relative;height:300px;">
            <canvas id="chartJurusan"></canvas>
        </div>
    </div>
</div>

{{-- Activity Log --}}
<div class="res-table" style="background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06);">
    <div style="padding:15px 20px;border-bottom:1px solid #e2e8f0;">
        <div style="font-family:'Syne',sans-serif;font-size:13.5px;font-weight:700;">📋 Activity Log</div>
    </div>
    <table style="width:100%;border-collapse:collapse;">
        <thead>
            <tr style="background:#f8fafc;">
                <th style="padding:9px 16px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:1px solid #e2e8f0;">Waktu</th>
                <th style="padding:9px 16px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:1px solid #e2e8f0;">User</th>
                <th style="padding:9px 16px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:1px solid #e2e8f0;">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse($activityLogs as $log)
            <tr style="border-bottom:1px solid #e2e8f0;">
                <td style="padding:10px 16px;font-size:11.5px;color:#64748b;">{{ $log->created_at }}</td>
                <td style="padding:10px 16px;font-size:12.5px;font-weight:600;">{{ $log->user_nama ?? '-' }}</td>
                <td style="padding:10px 16px;font-size:12.5px;">{{ $log->aksi ?? '-' }}</td>
            </tr>
            @empty
            <tr><td colspan="3" style="padding:24px;text-align:center;color:#94a3b8;font-size:13px;">Belum ada log aktivitas.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div style="padding:12px 16px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;">
        <div style="font-size:11px;color:#64748b;line-height:1.4;">
            {{ $activityLogs->firstItem() ?? 0 }}-{{ $activityLogs->lastItem() ?? 0 }}
            dari {{ $activityLogs->total() }} data
        </div>

        <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;">
            @if ($activityLogs->onFirstPage())
                <span style="font-size:11px;padding:5px 9px;border:1px solid #e2e8f0;border-radius:7px;color:#94a3b8;background:#f8fafc;line-height:1.2;">
                    Prev
                </span>
            @else
                <a href="{{ $activityLogs->previousPageUrl() }}"
                style="font-size:11px;padding:5px 9px;border:1px solid #e2e8f0;border-radius:7px;text-decoration:none;color:#334155;background:#fff;line-height:1.2;">
                    Prev
                </a>
            @endif

            <span style="font-size:11px;padding:5px 8px;color:#64748b;line-height:1.2;">
                {{ $activityLogs->currentPage() }}/{{ $activityLogs->lastPage() }}
            </span>

            @if ($activityLogs->hasMorePages())
                <a href="{{ $activityLogs->nextPageUrl() }}"
                style="font-size:11px;padding:5px 9px;border:1px solid #e2e8f0;border-radius:7px;text-decoration:none;color:#334155;background:#fff;line-height:1.2;">
                    Next
                </a>
            @else
                <span style="font-size:11px;padding:5px 9px;border:1px solid #e2e8f0;border-radius:7px;color:#94a3b8;background:#f8fafc;line-height:1.2;">
                    Next
                </span>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
const jurusanLabels = {!! json_encode($peminatJurusan->map(fn($p) => $p->jurusan->nama_jurusan ?? 'N/A')) !!};
const jurusanData   = {!! json_encode($peminatJurusan->pluck('total')) !!};
new Chart(document.getElementById('chartJurusan'), {
    type: 'doughnut',
    data: { labels: jurusanLabels, datasets: [{ data: jurusanData, backgroundColor: ['#2563eb','#059669','#f0a500','#7c3aed','#dc2626','#0891b2','#d97706','#db2777'] }] },
    options: {
        maintainAspectRatio: false,
        plugins: { legend: { position: 'right', labels: { font: { size: 11 } } } }
    }
});
</script>
@endpush
@endsection