@extends('layouts.app')

@section('title', 'Dashboard')

@section('breadcrumb')
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@push('styles')
    <style>
        .stat-card {
            border-radius: 12px;
            padding: 20px;
            color: #fff;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
            transition: transform .15s ease;
            height: 100%;
        }
        .stat-card:hover { transform: translateY(-3px); }
        .stat-card .stat-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 56px;
            opacity: .18;
        }
        .stat-card h3 { font-size: 2rem; font-weight: 700; margin: 0; }
        .stat-card p { margin: 0 0 8px; font-size: .95rem; opacity: .95; }
        .stat-card a { color: #fff; font-size: .85rem; text-decoration: underline; }
        .bg-grad-primary { background: linear-gradient(135deg, #007bff, #0056b3); }
        .bg-grad-success { background: linear-gradient(135deg, #28a745, #1e7e34); }
        .bg-grad-info { background: linear-gradient(135deg, #17a2b8, #117a8b); }
        .bg-grad-warning { background: linear-gradient(135deg, #e0a800, #c69500); }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-3 col-6 mb-3">
            <div class="stat-card bg-grad-primary">
                <h3>{{ $totalAsistenAhli }}</h3>
                <p>SK Asisten Ahli</p>
                <a href="{{ route('sk.index', ['jenis' => 'asisten_ahli']) }}">Lihat Data <i class="fas fa-arrow-circle-right"></i></a>
                <div class="stat-icon"><i class="fas fa-user-graduate"></i></div>
            </div>
        </div>
        <div class="col-lg-3 col-6 mb-3">
            <div class="stat-card bg-grad-success">
                <h3>{{ $totalLektor }}</h3>
                <p>SK Lektor</p>
                <a href="{{ route('sk.index', ['jenis' => 'lektor']) }}">Lihat Data <i class="fas fa-arrow-circle-right"></i></a>
                <div class="stat-icon"><i class="fas fa-chalkboard-teacher"></i></div>
            </div>
        </div>
        <div class="col-lg-3 col-6 mb-3">
            <div class="stat-card bg-grad-info">
                <h3>{{ $arsipAsistenAhli }}</h3>
                <p>Arsip Asisten Ahli</p>
                <a href="{{ route('arsip-sk.index', ['jenis' => 'asisten_ahli']) }}">Lihat Arsip <i class="fas fa-arrow-circle-right"></i></a>
                <div class="stat-icon"><i class="fas fa-archive"></i></div>
            </div>
        </div>
        <div class="col-lg-3 col-6 mb-3">
            <div class="stat-card bg-grad-warning">
                <h3>{{ $arsipLektor }}</h3>
                <p>Arsip Lektor</p>
                <a href="{{ route('arsip-sk.index', ['jenis' => 'lektor']) }}">Lihat Arsip <i class="fas fa-arrow-circle-right"></i></a>
                <div class="stat-icon"><i class="fas fa-archive"></i></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-chart-bar mr-1"></i> SK Dibuat per Bulan — Tahun {{ $tahun }}</h3>
                </div>
                <div class="card-body">
                    <canvas id="grafik-sk" height="120"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-plus-circle mr-1"></i> Buat SK Baru</h3>
                </div>
                <div class="card-body">
                    <a href="{{ route('sk.create', ['jenis' => 'asisten_ahli']) }}" class="btn btn-primary btn-lg btn-block">
                        <i class="fas fa-user-graduate mr-1"></i> SK Asisten Ahli
                    </a>
                    <a href="{{ route('sk.create', ['jenis' => 'lektor']) }}" class="btn btn-success btn-lg btn-block">
                        <i class="fas fa-chalkboard-teacher mr-1"></i> SK Lektor
                    </a>
                    <hr>
                    <p class="text-muted mb-1"><i class="fas fa-file-contract mr-1"></i> Total SK: <strong>{{ $totalSk }}</strong></p>
                    <p class="text-muted mb-0"><i class="fas fa-archive mr-1"></i> Total Arsip: <strong>{{ $arsipAsistenAhli + $arsipLektor }}</strong></p>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-outline card-secondary">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-history mr-1"></i> SK Terbaru</h3>
        </div>
        <div class="card-body p-0">
            <table class="table table-striped mb-0">
                <thead>
                    <tr>
                        <th>Nomor SK</th>
                        <th>Nama</th>
                        <th>Jabatan</th>
                        <th>Dibuat</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($terbaru as $sk)
                        <tr>
                            <td>{{ $sk->nomor_sk ?: '-' }}</td>
                            <td>{{ $sk->nama_gelar }}</td>
                            <td>
                                <span class="badge badge-{{ $sk->jenis === 'lektor' ? 'success' : 'primary' }}">{{ $sk->jabatan_label }}</span>
                            </td>
                            <td>{{ $sk->created_at->translatedFormat('d F Y') }}</td>
                            <td class="text-right">
                                <a href="{{ route('sk.cetak', $sk) }}" target="_blank" class="btn btn-xs btn-outline-dark" title="Cetak"><i class="fas fa-print"></i></a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="text-center text-muted py-3">Belum ada data SK.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
        $(function () {
            new Chart(document.getElementById('grafik-sk'), {
                type: 'bar',
                data: {
                    labels: @json($grafikLabels),
                    datasets: [
                        {
                            label: 'Asisten Ahli',
                            data: @json($grafikAsistenAhli),
                            backgroundColor: '#007bff',
                            borderRadius: 6,
                        },
                        {
                            label: 'Lektor',
                            data: @json($grafikLektor),
                            backgroundColor: '#28a745',
                            borderRadius: 6,
                        },
                    ],
                },
                options: {
                    responsive: true,
                    plugins: { legend: { position: 'bottom' } },
                    scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
                },
            });
        });
    </script>
@endpush