@extends('layouts.app')

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    --brand-primary: #1a56db;
    --brand-primary-light: #e8f0fe;
    --brand-success: #0d9488;
    --brand-success-light: #ccfbf1;
    --brand-warning: #d97706;
    --brand-warning-light: #fef3c7;
    --brand-danger: #dc2626;
    --brand-danger-light: #fee2e2;
    --surface-base: #ffffff;
    --surface-page: #f4f6fa;
    --surface-raised: #ffffff;
    --border-soft: rgba(0,0,0,0.07);
    --border-medium: rgba(0,0,0,0.12);
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body, .dashboard-wrap * {

}

.dashboard-wrap {
    background: var(--surface-page);
    min-height: 100vh;
    padding: 28px 32px 48px;
}

/* ─── HEADER ─── */
.db-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.db-header-left .db-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 4px;
}

.db-header-left h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.5px;
}

.db-user-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-base);
    border: 1px solid var(--border-soft);
    border-radius: 40px;
    padding: 6px 14px 6px 8px;
    box-shadow: var(--shadow-xs);
}

.db-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a56db 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    letter-spacing: 0;
}

.db-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ─── STAT CARDS ─── */
.db-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface-base);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-card.primary::before { background: var(--brand-primary); }
.stat-card.success::before { background: var(--brand-success); }
.stat-card.warning::before { background: var(--brand-warning); }
.stat-card.danger::before  { background: var(--brand-danger); }

.stat-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.stat-card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.stat-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.stat-icon.primary { background: var(--brand-primary-light); color: var(--brand-primary); }
.stat-icon.success { background: var(--brand-success-light); color: var(--brand-success); }
.stat-icon.warning { background: var(--brand-warning-light); color: var(--brand-warning); }
.stat-icon.danger  { background: var(--brand-danger-light);  color: var(--brand-danger); }

.stat-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -1.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: 'DM Mono', monospace;
}

/* ─── SECTION LABEL ─── */
.section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
}

/* ─── CARD BASE ─── */
.db-card {
    background: var(--surface-base);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.db-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.db-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-card-title .title-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.db-card-title .title-dot.primary { background: var(--brand-primary); }
.db-card-title .title-dot.teal    { background: var(--brand-success); }

.db-card-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--surface-page);
    color: var(--text-secondary);
    border: 1px solid var(--border-soft);
}

.db-card-body {
    padding: 20px;
}

/* ─── CHARTS GRID ─── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

/* ─── DATA LISTS ─── */
.data-lists-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 20px;
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.15s ease;
}

.data-row:last-child { border-bottom: none; }

.data-row:hover { background: var(--surface-page); }

.data-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.data-row-index {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-family: 'DM Mono', monospace;
    min-width: 18px;
}

.data-row-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.data-row-sub {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--surface-page);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 2px 8px;
}

.score-badge {
    font-size: 13px;
    font-weight: 700;
    font-family: 'DM Mono', monospace;
    color: #fff;
    background: var(--brand-success);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    letter-spacing: 0.5px;
}

.score-badge.high { background: #0d9488; }
.score-badge.mid  { background: #d97706; }
.score-badge.low  { background: #dc2626; }

/* ─── QUICK ACTIONS ─── */
.quick-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-base);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    padding: 18px 24px;
}

.qa-left h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
}

.qa-left small {
    font-size: 12px;
    color: var(--text-muted);
}

.qa-buttons {
    display: flex;
    gap: 10px;
}

.btn-qa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}

.btn-qa:hover { transform: translateY(-1px); filter: brightness(0.95); }

.btn-qa.primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-qa.success {
    background: var(--brand-success);
    border-color: var(--brand-success);
    color: #fff;
}

.btn-qa.outline {
    background: transparent;
    border-color: var(--border-medium);
    color: var(--text-primary);
}

/* ─── EMPTY STATE ─── */
.empty-state {
    padding: 28px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ================================================================
   RESPONSIVE MOBILE & TABLET
   Hanya menambahkan media query — tidak ada variabel/logika diubah
   ================================================================ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .dashboard-wrap {
        padding: 24px 20px 40px;
    }

    .db-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

    .data-lists-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    .dashboard-wrap {
        padding: 16px 14px 36px;
    }

    /* Header — stack vertikal */
    .db-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }

    .db-header-left h1 {
        font-size: 20px;
    }

    /* Stat cards — 2 kolom di mobile */
    .db-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat-card {
        padding: 16px 16px;
        gap: 10px;
    }

    .stat-value {
        font-size: 28px;
        letter-spacing: -1px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Charts — 1 kolom */
    .charts-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    /* Data lists — 1 kolom */
    .data-lists-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    /* Data row — nama bisa wrap */
    .data-row-name {
        font-size: 12px;
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .data-row-sub {
        font-size: 11px;
        padding: 2px 6px;
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Quick actions — stack vertikal */
    .quick-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 18px;
    }

    .qa-buttons {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-qa {
        flex: 1;
        justify-content: center;
        padding: 9px 12px;
        font-size: 12px;
        min-width: 0;
    }
}

/* Extra small phones (≤ 380px) */
@media (max-width: 380px) {
    .dashboard-wrap {
        padding: 14px 12px 32px;
    }

    .db-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 14px 12px;
    }

    .stat-value {
        font-size: 24px;
    }

    .stat-card-label {
        font-size: 10px;
    }

    .db-header-left h1 {
        font-size: 18px;
    }

    /* Sembunyikan nama user di badge, cukup avatar */
    .db-user-name {
        display: none;
    }

    .db-user-badge {
        padding: 6px 10px 6px 8px;
    }
}
</style>

<div class="dashboard-wrap">

    {{-- HEADER --}}
    <div class="db-header">
        <div class="db-header-left">
            <div class="db-eyebrow">Panel Admin</div>
            <h1>Dashboard</h1>
        </div>

        <div class="db-user-badge">
            <div class="db-user-avatar">
                {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
            </div>
            <span class="db-user-name">{{ auth()->user()->name }}</span>
        </div>
    </div>

    {{-- STATISTIK --}}
    @php
        $cards = [
            ['title' => 'Total Siswa',  'value' => $jumlahSiswa,  'color' => 'primary', 'icon' => 'fa-solid fa-user-graduate'],
            ['title' => 'Total Guru',   'value' => $jumlahGuru,   'color' => 'success', 'icon' => 'fa-solid fa-chalkboard-teacher'],
            ['title' => 'Total Kelas',  'value' => $jumlahKelas,  'color' => 'warning', 'icon' => 'fa-solid fa-school'],
            ['title' => 'Mata Pelajaran', 'value' => $jumlahMapel, 'color' => 'danger',  'icon' => 'fa-solid fa-book'],
        ];
    @endphp

    <div class="db-stats-grid">
        @foreach($cards as $c)
        <div class="stat-card {{ $c['color'] }}">
            <div class="stat-card-top">
                <span class="stat-card-label">{{ $c['title'] }}</span>
                <div class="stat-icon {{ $c['color'] }}">
                    <i class="{{ $c['icon'] }}"></i>
                </div>
            </div>
            <div class="stat-value">{{ number_format($c['value']) }}</div>
        </div>
        @endforeach
    </div>

    {{-- CHARTS --}}
    <p class="section-label">Visualisasi Data</p>
    <div class="charts-grid">

        {{-- CHART SISWA PER KELAS --}}
        <div class="db-card">
            <div class="db-card-header">
                <div class="db-card-title">
                    <span class="title-dot primary"></span>
                    Siswa per Kelas
                </div>
                <span class="db-card-badge">Bar chart</span>
            </div>
            <div class="db-card-body">
                <div style="position: relative; height: 280px;">
                    <canvas id="chartKelas" role="img" aria-label="Bar chart jumlah siswa per kelas"></canvas>
                </div>
            </div>
        </div>

        {{-- CHART DISTRIBUSI NILAI --}}
        <div class="db-card">
            <div class="db-card-header">
                <div class="db-card-title">
                    <span class="title-dot teal"></span>
                    Distribusi Nilai
                </div>
                <span class="db-card-badge">Pie chart</span>
            </div>
            <div class="db-card-body">
                <div style="position: relative; height: 280px;">
                    <canvas id="chartNilai" role="img" aria-label="Pie chart distribusi nilai siswa"></canvas>
                </div>
            </div>
        </div>

    </div>

    {{-- DATA LISTS --}}
    <p class="section-label">Data Terkini</p>
    <div class="data-lists-grid">

        {{-- SISWA TERBARU --}}
        <div class="db-card">
            <div class="db-card-header">
                <div class="db-card-title">
                    <span class="title-dot primary"></span>
                    Siswa Terbaru
                </div>
            </div>
            @forelse($siswaTerbaru as $i => $siswa)
                <div class="data-row">
                    <div class="data-row-left">
                        <span class="data-row-index">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <span class="data-row-name">{{ $siswa->nama }}</span>
                    </div>
                    <span class="data-row-sub">{{ $siswa->kelas->nama ?? '—' }}</span>
                </div>
            @empty
                <div class="empty-state">Belum ada data siswa</div>
            @endforelse
        </div>

        {{-- NILAI TERTINGGI --}}
        <div class="db-card">
            <div class="db-card-header">
                <div class="db-card-title">
                    <span class="title-dot teal"></span>
                    Nilai Tertinggi
                </div>
            </div>
            @forelse($nilaiTertinggi as $n)
                <div class="data-row">
                    <div class="data-row-left">
                        <span class="data-row-index">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <span class="data-row-name">{{ $n->siswa->nama ?? '—' }}</span>
                    </div>
                    @php $score = $n->nilai; @endphp
                    <span class="score-badge {{ $score >= 85 ? 'high' : ($score >= 70 ? 'mid' : 'low') }}">
                        {{ $score }}
                    </span>
                </div>
            @empty
                <div class="empty-state">Belum ada data nilai</div>
            @endforelse
        </div>

    </div>

    {{-- QUICK ACTIONS --}}
    <div class="quick-actions">
        <div class="qa-left">
            <h5>Aksi Cepat</h5>
            <small>Tambah atau kelola data langsung dari sini</small>
        </div>
        <div class="qa-buttons">
            <a href="{{ route('admin.guru.create') }}" class="btn-qa primary">
                <i class="fa-solid fa-plus" style="font-size:11px;"></i> Tambah Guru
            </a>
            <a href="{{ route('admin.siswa.create') }}" class="btn-qa success">
                <i class="fa-solid fa-plus" style="font-size:11px;"></i> Tambah Siswa
            </a>
            <a href="{{ route('admin.mapel.index') }}" class="btn-qa outline">
                <i class="fa-solid fa-book" style="font-size:11px;"></i> Mata Pelajaran
            </a>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {

    const kelasLabels = {!! json_encode($kelasLabels ?? []) !!};
    const kelasData   = {!! json_encode($kelasData ?? []) !!};

    const nilaiLabels = {!! json_encode(array_keys(($nilaiDistribusi ?? collect())->toArray())) !!};
    const nilaiData   = {!! json_encode(array_values(($nilaiDistribusi ?? collect())->toArray())) !!};

    console.log("Kelas:", kelasLabels, kelasData);
    console.log("Nilai:", nilaiLabels, nilaiData);

    Chart.defaults.font.family = "'Plus Jakarta Sans', sans-serif";
    Chart.defaults.font.size   = 12;

    // ── CHART KELAS (Bar) ──────────────────────────────────
    if (kelasLabels.length > 0) {
        new Chart(document.getElementById('chartKelas'), {
            type: 'bar',
            data: {
                labels: kelasLabels,
                datasets: [{
                    label: 'Jumlah Siswa',
                    data: kelasData,
                    backgroundColor: 'rgba(26, 86, 219, 0.12)',
                    borderColor: 'rgba(26, 86, 219, 0.9)',
                    borderWidth: 2,
                    borderRadius: 6,
                    borderSkipped: false,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#111827',
                        titleColor: '#fff',
                        bodyColor: '#9ca3af',
                        padding: 12,
                        cornerRadius: 8,
                        displayColors: false,
                        callbacks: {
                            label: ctx => `  ${ctx.parsed.y} siswa`
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        border: { display: false },
                        ticks: { color: '#9ca3af', autoSkip: false, maxRotation: 30 }
                    },
                    y: {
                        grid: { color: 'rgba(0,0,0,0.05)', drawTicks: false },
                        border: { display: false, dash: [4, 4] },
                        ticks: { color: '#9ca3af', padding: 8, precision: 0 },
                        beginAtZero: true
                    }
                }
            }
        });
    }

    // ── CHART NILAI (Pie) ──────────────────────────────────
    if (nilaiLabels.length > 0) {
        new Chart(document.getElementById('chartNilai'), {
            type: 'pie',
            data: {
                labels: nilaiLabels,
                datasets: [{
                    data: nilaiData,
                    backgroundColor: [
                        'rgba(26, 86, 219, 0.85)',
                        'rgba(13, 148, 136, 0.85)',
                        'rgba(217, 119,  6, 0.85)',
                        'rgba(220,  38, 38, 0.85)',
                        'rgba(99,  102, 241, 0.85)',
                        'rgba(236, 72, 153, 0.85)',
                    ],
                    borderColor: '#ffffff',
                    borderWidth: 3,
                    hoverOffset: 6,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            color: '#6b7280',
                            padding: 14,
                            boxWidth: 10,
                            boxHeight: 10,
                            font: { size: 12, weight: '500' }
                        }
                    },
                    tooltip: {
                        backgroundColor: '#111827',
                        titleColor: '#fff',
                        bodyColor: '#9ca3af',
                        padding: 12,
                        cornerRadius: 8,
                        callbacks: {
                            label: ctx => `  ${ctx.label}: ${ctx.parsed}`
                        }
                    }
                }
            }
        });
    }

});
</script>
@endpush