@extends('layouts.app')

@section('title', 'Dashboard Admin - SIAKAD')
@section('page-title', 'Dashboard Admin')

@section('content')
@php
$unreadNotifications = $notifications ?? collect();
$totalUnread = $unreadCount ?? 0;
use App\Models\AcademicCalendar;

// Data statistik mahasiswa per prodi
$prodiStats = \App\Models\Prodi::withCount('mahasiswas')->get();
$totalMahasiswa = $prodiStats->sum('mahasiswas_count');
$maxCount = $prodiStats->max('mahasiswas_count') ?: 1;

// Calendar data
$upcomingEvents = AcademicCalendar::active()
    ->inRange(now()->format('Y-m-d'), now()->addDays(30)->format('Y-m-d'))
    ->orderBy('start_date')
    ->take(5)
    ->get();
$eventTypes = AcademicCalendar::getEventTypes();
@endphp

<div class="row dashboard-stats-grid">
    <!-- Stats Cards -->
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-icon primary">
                <i class="bi bi-building"></i>
            </div>
            <div class="stat-content">
                <h3>{{ \App\Models\Prodi::count() }}</h3>
                <p>Program Studi</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-icon success">
                <i class="bi bi-person-badge"></i>
            </div>
            <div class="stat-content">
                <h3>{{ \App\Models\Dosen::count() }}</h3>
                <p>Dosen</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-icon warning">
                <i class="bi bi-people"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $totalMahasiswa }}</h3>
                <p>Mahasiswa</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-icon danger">
                <i class="bi bi-book"></i>
            </div>
            <div class="stat-content">
                <h3>{{ \App\Models\Matakuliah::count() }}</h3>
                <p>Mata Kuliah</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card clickable" onclick="location.href='{{ route('notifications.index') }}'">
            <div class="stat-icon info">
                <i class="bi bi-bell"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $totalUnread }}</h3>
                <p>Notifikasi Baru</p>
            </div>
        </div>
    </div>
</div>

<!-- Quick Menu & Notifications -->
<div class="row mt-4 dashboard-stats-grid">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-bar-chart me-2"></i>Statistik Mahasiswa per Program Studi</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Line Chart -->
                    <div class="col-lg-8 col-12 mb-3">
                        <div class="chart-container" style="position: relative; height: 320px; overflow: hidden;">
                            <canvas id="mahasiswaChart"></canvas>
                        </div>
                    </div>

                    <!-- Summary Cards -->
                    <div class="col-lg-4 col-12">
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="stat-summary-card bg-gradient-primary">
                                    <div class="stat-summary-icon">
                                        <i class="bi bi-people-fill"></i>
                                    </div>
                                    <div class="stat-summary-content">
                                        <h4>{{ $totalMahasiswa }}</h4>
                                        <small>Total Mahasiswa</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="stat-summary-card bg-gradient-success">
                                    <div class="stat-summary-icon">
                                        <i class="bi bi-building"></i>
                                    </div>
                                    <div class="stat-summary-content">
                                        <h4>{{ $prodiStats->count() }}</h4>
                                        <small>Program Studi</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="stat-summary-card bg-gradient-warning">
                                    <div class="stat-summary-icon">
                                        <i class="bi bi-person-check"></i>
                                    </div>
                                    <div class="stat-summary-content">
                                        <h4>{{ $prodiStats->max('mahasiswas_count') ?: 0 }}</h4>
                                        <small>Prodi Terbanyak</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="stat-summary-card bg-gradient-danger">
                                    <div class="stat-summary-icon">
                                        <i class="bi bi-graph-down"></i>
                                    </div>
                                    <div class="stat-summary-content">
                                        <h4>{{ $prodiStats->min('mahasiswas_count') ?: 0 }}</h4>
                                        <small>Prodi Tersedikit</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Top Prodi -->
                        @php
                            $topProdi = $prodiStats->sortByDesc('mahasiswas_count')->first();
                        @endphp
                        @if($topProdi)
                        <div class="top-prodi-card mt-3">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <i class="bi bi-trophy-fill text-warning"></i>
                                <span class="fw-semibold">Prodi Paling Populer</span>
                            </div>
                            <h5 class="mb-1">{{ $topProdi->nama }}</h5>
                            <p class="text-muted mb-0 small">{{ $topProdi->mahasiswas_count }} mahasiswa terdaftar</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Menu & Notifications -->
<div class="row mt-4">
    <!-- Recent Notifications -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-bell me-2"></i>Notifikasi Terbaru</h5>
                <a href="{{ route('notifications.index') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
            </div>
            <div class="card-body p-0">
                @forelse($unreadNotifications as $notif)
                <div class="notif-item px-4 py-3 border-bottom {{ !$notif->is_read ? 'bg-light' : '' }}">
                    <div class="d-flex align-items-start gap-3">
                        <div>
                            @if($notif->type == 'krs_approved')
                                <div class="bg-success bg-opacity-10 text-success rounded-circle p-2">
                                    <i class="bi bi-check-circle-fill"></i>
                                </div>
                            @elseif($notif->type == 'krs_rejected')
                                <div class="bg-danger bg-opacity-10 text-danger rounded-circle p-2">
                                    <i class="bi bi-x-circle-fill"></i>
                                </div>
                            @elseif($notif->type == 'krs_request')
                                <div class="bg-info bg-opacity-10 text-info rounded-circle p-2">
                                    <i class="bi bi-hourglass-split"></i>
                                </div>
                            @elseif($notif->type == 'nilai_new')
                                <div class="bg-warning bg-opacity-10 text-warning rounded-circle p-2">
                                    <i class="bi bi-star-fill"></i>
                                </div>
                            @elseif($notif->type == 'nilai_reminder')
                                <div class="bg-warning bg-opacity-10 text-warning rounded-circle p-2">
                                    <i class="bi bi-alarm-fill"></i>
                                </div>
                            @elseif($notif->type == 'jadwal_change')
                                <div class="bg-info bg-opacity-10 text-info rounded-circle p-2">
                                    <i class="bi bi-calendar-event-fill"></i>
                                </div>
                            @else
                                <div class="bg-primary bg-opacity-10 text-primary rounded-circle p-2">
                                    <i class="bi bi-bell-fill"></i>
                                </div>
                            @endif
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">{{ $notif->title }}</h6>
                                    <p class="mb-1 text-muted small">{{ Str::limit($notif->message, 80) }}</p>
                                    <small class="text-muted">{{ $notif->created_at->diffForHumans() }}</small>
                                </div>
                                <a href="{{ route('notifications.read', $notif) }}" class="btn btn-sm btn-outline-success" title="Tandai dibaca">
                                    <i class="bi bi-check-lg"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="text-center py-4">
                    <i class="bi bi-bell-slash fs-4 text-muted d-block mb-2"></i>
                    <p class="text-muted mb-0">Belum ada notifikasi baru</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Quick Menu -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-grid-3x3-gap me-2"></i>Menu Cepat</h5>
            </div>
            <div class="card-body p-2">
                <div class="quick-menu-wrapper">
                    <div class="quick-menu-grid">
                        <a href="{{ route('admin.prodi.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-building"></i>
                                <small>Program Studi</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.dosen.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-person-badge"></i>
                                <small>Dosen</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.mahasiswa.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-people"></i>
                                <small>Mahasiswa</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.jadwal.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-calendar-week"></i>
                                <small>Jadwal</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.matakuliah.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-book"></i>
                                <small>Mata Kuliah</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.nilai.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-pencil-square"></i>
                                <small>Nilai</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.presensi.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-clipboard-check"></i>
                                <small>Presensi</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.jadwal-krs.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-calendar-range"></i>
                                <small>Jadwal KRS</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.import.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-upload"></i>
                                <small>Import</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.export.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-download"></i>
                                <small>Export</small>
                            </div>
                        </a>
                        <a href="{{ route('admin.statistik.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-bar-chart"></i>
                                <small>Statistik</small>
                            </div>
                        </a>
                        <a href="{{ route('notifications.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item position-relative">
                                <i class="bi bi-bell"></i>
                                <small>Notifikasi</small>
                                @if($totalUnread > 0)
                                <span class="quick-menu-badge">{{ $totalUnread > 9 ? '9+' : $totalUnread }}</span>
                                @endif
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Kalender Akademik -->
<div class="row mt-4">
    <div class="col-12">
        <div class="dashboard-calendar-card">
            <div class="calendar-card-header">
                <div class="d-flex align-items-center gap-2">
                    <div class="calendar-header-icon">
                        <i class="bi bi-calendar-month"></i>
                    </div>
                    <div>
                        <h5 class="mb-0">Kalender Akademik</h5>
                        <small class="text-white-50">Jadwal kegiatan semester</small>
                    </div>
                </div>
                <a href="{{ route('calendar.index') }}" class="btn btn-sm btn-light">
                    <i class="bi bi-arrows-fullscreen me-1"></i>Lihat Detail
                </a>
            </div>
            <div class="calendar-card-body">
                <div class="row g-4">
                    <div class="col-lg-8">
                        <div id="dashboardCalendarFull" class="dashboard-calendar"></div>
                    </div>
                    <div class="col-lg-4">
                        <div class="upcoming-events-panel">
                            <div class="upcoming-header">
                                <i class="bi bi-clock-history"></i>
                                <span>Event Mendatang</span>
                                <span class="badge bg-white text-primary">{{ $upcomingEvents->count() }}</span>
                            </div>
                            <div class="upcoming-list">
                                @forelse($upcomingEvents as $event)
                                <div class="upcoming-event-item" data-event-type="{{ $event->event_type }}">
                                    <div class="event-dot" style="background: {{ $event->color_style }};"></div>
                                    <div class="event-content">
                                        <div class="event-title">{{ Str::limit($event->title, 30) }}</div>
                                        <div class="event-date">
                                            <i class="bi bi-calendar3"></i>
                                            {{ $event->start_date->format('d M') }}
                                            @if($event->start_date->format('Y-m-d') != $event->end_date->format('Y-m-d'))
                                                - {{ $event->end_date->format('d M Y') }}
                                            @endif
                                        </div>
                                    </div>
                                    <span class="event-type-pill" style="background: {{ $event->color_style }};">
                                        {{ $eventTypes[$event->event_type] ?? 'Event' }}
                                    </span>
                                </div>
                                @empty
                                <div class="upcoming-empty">
                                    <i class="bi bi-calendar-x"></i>
                                    <p>Tidak ada event terdekat</p>
                                </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Mobile Responsive Fixes */
    @media (max-width: 767.98px) {
        /* FullCalendar Mobile Styles */
        .dashboard-calendar {
            overflow-x: auto !important;
            max-width: 100%;
        }

        .dashboard-calendar .fc {
            min-width: 500px !important;
            font-size: 0.8rem;
        }

        .dashboard-calendar .fc-toolbar {
            flex-direction: column;
            gap: 0.5rem;
        }

        .dashboard-calendar .fc-toolbar-title {
            font-size: 1rem !important;
        }

        .dashboard-calendar .fc-button {
            padding: 0.3rem 0.5rem !important;
            font-size: 0.7rem !important;
        }

        .dashboard-calendar .fc-col-header-cell-cushion {
            font-size: 0.65rem !important;
            padding: 0.25rem !important;
        }

        .dashboard-calendar .fc-daygrid-day-number {
            font-size: 0.75rem !important;
            padding: 0.125rem !important;
        }

        .dashboard-calendar .fc-daygrid-day {
            min-height: 40px !important;
        }

        .dashboard-calendar .fc-event {
            font-size: 0.65rem !important;
            padding: 1px 3px !important;
        }

        /* Upcoming Events Panel */
        .upcoming-events-panel {
            max-height: 200px !important;
            overflow-y: auto !important;
        }

        .upcoming-list {
            overflow-y: auto !important;
        }

        .upcoming-event-item {
            padding: 0.5rem !important;
        }

        .event-modal-detail {
            flex-direction: column !important;
            gap: 0.5rem !important;
        }

        .event-modal-icon {
            display: none !important;
        }

        /* Calendar Header */
        .calendar-card-header {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 0.5rem;
        }

        .calendar-card-header .btn {
            width: 100%;
        }

        /* Stat Summary Cards in Grid */
        .stat-summary-card {
            padding: 0.5rem !important;
        }

        .stat-summary-card h4 {
            font-size: 1rem !important;
        }

        .stat-summary-icon {
            width: 32px !important;
            height: 32px !important;
        }

        .stat-summary-icon i {
            font-size: 1rem !important;
        }

        /* Prodi Chart Container */
        .chart-container {
            height: 200px !important;
        }

        /* Quick Action Buttons */
        .d-none.d-md-flex.gap-2 {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 0.5rem !important;
        }

        .d-none.d-md-flex.gap-2 .btn {
            padding: 0.4rem 0.5rem !important;
            font-size: 0.7rem !important;
        }

        .d-none.d-md-flex.gap-2 .btn i {
            font-size: 0.8rem !important;
        }
    }

    .dashboard-calendar-card {
        background: white;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        max-width: 100%;
    }

    .calendar-card-header {
        background: linear-gradient(135deg, var(--primary) 0%, #5a5fe0 100%);
        padding: 1.25rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-header-icon {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.25rem;
    }

    .calendar-card-header h5 {
        color: white;
        font-weight: 600;
        margin: 0;
    }

    .calendar-card-body {
        padding: 1.5rem;
    }

    .dashboard-calendar {
        background: var(--gray-100);
        border-radius: 0.75rem;
        padding: 1rem;
    }

    /* FullCalendar Dashboard Styles */
    .dashboard-calendar .fc {
        font-family: 'DM Sans', sans-serif;
    }

    .dashboard-calendar .fc-toolbar-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--gray-800);
    }

    .dashboard-calendar .fc-button {
        background-color: white;
        border: 1px solid var(--gray-200);
        color: var(--gray-700);
        font-weight: 500;
        padding: 0.4rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.8rem;
        transition: all 0.2s;
    }

    .dashboard-calendar .fc-button:hover {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    .dashboard-calendar .fc-button-active,
    .dashboard-calendar .fc-button:focus {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        color: white !important;
        box-shadow: none !important;
    }

    .dashboard-calendar .fc-daygrid-day:hover {
        background-color: var(--gray-200);
    }

    .dashboard-calendar .fc-daygrid-day-number {
        font-size: 0.85rem;
        color: var(--gray-700);
        padding: 0.25rem;
    }

    .dashboard-calendar .fc-col-header-cell-cushion {
        font-weight: 600;
        color: var(--gray-600);
        font-size: 0.7rem;
        text-transform: uppercase;
    }

    .dashboard-calendar .fc-daygrid-day.fc-day-today {
        background-color: rgba(105, 108, 255, 0.08) !important;
    }

    .dashboard-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
        background: var(--primary);
        color: white;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-calendar .fc-event {
        border-radius: 6px;
        padding: 2px 6px;
        font-size: 0.75rem;
        cursor: pointer;
        border: none !important;
        font-weight: 500;
    }

    .dashboard-calendar .fc-event:hover {
        transform: scale(1.02);
    }

    /* Upcoming Events Panel */
    .upcoming-events-panel {
        background: var(--gray-100);
        border-radius: 0.75rem;
        overflow: hidden;
        height: 100%;
    }

    .upcoming-header {
        background: linear-gradient(135deg, var(--primary) 0%, #5a5fe0 100%);
        color: white;
        padding: 0.875rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .upcoming-header .badge {
        margin-left: auto;
    }

    .upcoming-list {
        padding: 0.5rem;
        max-height: 340px;
        overflow-y: auto;
    }

    .upcoming-event-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: white;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        transition: all 0.2s;
        cursor: pointer;
    }

    .upcoming-event-item:hover {
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .upcoming-event-item:last-child {
        margin-bottom: 0;
    }

    .event-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .upcoming-event-item .event-content {
        flex-grow: 1;
        min-width: 0;
    }

    .upcoming-event-item .event-title {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--gray-800);
        margin-bottom: 0.15rem;
    }

    .upcoming-event-item .event-date {
        font-size: 0.75rem;
        color: var(--gray-500);
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .event-type-pill {
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
        font-size: 0.65rem;
        font-weight: 500;
        color: white;
        flex-shrink: 0;
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .upcoming-empty {
        padding: 2rem;
        text-align: center;
        color: var(--gray-500);
    }

    .upcoming-empty i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        opacity: 0.4;
    }

    .upcoming-empty p {
        margin: 0;
        font-size: 0.85rem;
    }
</style>

<style>
    .hover-card {
        transition: all 0.3s ease;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
    }
    .hover-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary);
    }
    .stat-card.clickable {
        cursor: pointer;
    }
    .stat-card.clickable:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    .stat-icon.info { background: rgba(14, 165, 233, 0.1); color: #0EA5E9; }
    .notif-item {
        transition: background 0.2s;
    }
    .notif-item:hover {
        background: var(--gray-100);
    }

    /* Quick Menu Grid - Horizontal Scroll */
    .quick-menu-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--gray-300) transparent;
    }

    .quick-menu-wrapper::-webkit-scrollbar {
        height: 4px;
    }

    .quick-menu-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .quick-menu-wrapper::-webkit-scrollbar-thumb {
        background: var(--gray-300);
        border-radius: 4px;
    }

    .quick-menu-grid {
        display: flex;
        gap: 0.75rem;
        padding: 0.25rem;
        min-width: max-content;
    }

    .quick-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
        min-width: 90px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        text-decoration: none;
        transition: all 0.2s ease;
        position: relative;
    }

    .quick-menu-item:hover {
        border-color: var(--primary);
        background: rgba(105, 108, 255, 0.05);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .quick-menu-item i {
        font-size: 1.5rem;
        color: var(--primary);
    }

    .quick-menu-item small {
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-align: center;
        white-space: nowrap;
    }

    .quick-menu-badge {
        position: absolute;
        top: 0.375rem;
        right: 0.375rem;
        background: var(--danger);
        color: white;
        font-size: 0.6rem;
        padding: 0.125rem 0.375rem;
        border-radius: 10px;
        min-width: 16px;
        text-align: center;
    }

    /* Desktop: 3 columns visible with scroll */
    @media (min-width: 768px) {
        .quick-menu-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            min-width: unset;
            overflow-x: visible;
        }
    }

    /* Mobile: horizontal scroll */
    @media (max-width: 767.98px) {
        .quick-menu-wrapper {
            margin: 0 -0.75rem;
            padding: 0 0.75rem;
        }

        .quick-menu-item {
            padding: 0.875rem 1rem;
            min-width: 80px;
        }

        .quick-menu-item i {
            font-size: 1.25rem;
        }

        .quick-menu-item small {
            font-size: 0.65rem;
        }
    }
</style>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const prodiNames = @json($prodiStats->pluck('nama'));
        const mahasiswaCounts = @json($prodiStats->pluck('mahasiswas_count'));

        const ctx = document.getElementById('mahasiswaChart').getContext('2d');

        // Create gradient for the line chart
        const gradient = ctx.createLinearGradient(0, 0, 0, 300);
        gradient.addColorStop(0, 'rgba(105, 108, 255, 0.3)');
        gradient.addColorStop(1, 'rgba(105, 108, 255, 0.0)');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: prodiNames,
                datasets: [{
                    label: 'Jumlah Mahasiswa',
                    data: mahasiswaCounts,
                    borderColor: '#696cff',
                    backgroundColor: gradient,
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#696cff',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 6,
                    pointHoverRadius: 8,
                    pointHoverBackgroundColor: '#5a5fe0',
                    pointHoverBorderColor: '#fff',
                    pointHoverBorderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        align: 'end',
                        labels: {
                            usePointStyle: true,
                            pointStyle: 'circle',
                            padding: 20,
                            font: {
                                family: "'DM Sans', sans-serif",
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(59, 63, 92, 0.9)',
                        titleFont: {
                            family: "'DM Sans', sans-serif",
                            size: 14,
                            weight: 'bold'
                        },
                        bodyFont: {
                            family: "'DM Sans', sans-serif",
                            size: 13
                        },
                        padding: 12,
                        cornerRadius: 8,
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                return context.parsed.y + ' mahasiswa';
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                family: "'DM Sans', sans-serif",
                                size: 11
                            },
                            color: '#8392ab'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            font: {
                                family: "'DM Sans', sans-serif",
                                size: 11
                            },
                            color: '#8392ab',
                            stepSize: 1,
                            callback: function(value) {
                                return value;
                            }
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        });
    });

    // Dashboard Calendar Full
    const calendarFullEl = document.getElementById('dashboardCalendarFull');
    if (calendarFullEl) {
        const dashboardCalendarFull = new FullCalendar.Calendar(calendarFullEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,listWeek'
            },
            height: 'auto',
            events: function(info, successCallback, failureCallback) {
                fetch('/calendar/events?start=' + info.startStr + '&end=' + info.endStr)
                    .then(response => response.json())
                    .then(data => successCallback(data))
                    .catch(error => failureCallback(error));
            },
            eventClick: function(info) {
                showEventDetail(info.event);
            },
            eventDisplay: 'block',
            displayEventTime: false,
            dayMaxEvents: 3,
        });
        dashboardCalendarFull.render();
    }

    function showEventDetail(event) {
        const eventTypes = {
            'semester_start': 'Awal Semester',
            'semester_end': 'Akhir Semester',
            'registration': 'Pendaftaran',
            'mid_exam': 'Ujian Tengah Semester',
            'final_exam': 'Ujian Akhir Semester',
            'uts': 'UTS',
            'uas': 'UAS',
            'holiday': 'Libur',
            'registration_mhs_baru': 'Pendaftaran Mahasiswa Baru',
            'krs': 'Periode KRS',
            'yudisium': 'Yudisium',
            'wisuda': 'Wisuda',
            'other': 'Lainnya'
        };

        const eventType = eventTypes[event.extendedProps.event_type] || 'Lainnya';
        const dateRange = event.endStr !== event.startStr
            ? event.startStr + ' - ' + event.endStr
            : event.startStr;

        const modal = new bootstrap.Modal(document.getElementById('dashboardEventModal'));
        document.getElementById('dashboardEventModalTitle').innerHTML = '<i class="bi bi-calendar-event me-2"></i>' + event.title;
        document.getElementById('dashboardEventModalBody').innerHTML = `
            <div class="event-modal-detail">
                <div class="event-modal-icon"><i class="bi bi-calendar3"></i></div>
                <div>
                    <div class="event-modal-label">Tanggal</div>
                    <div class="event-modal-value">${dateRange}</div>
                </div>
            </div>
            <div class="event-modal-detail">
                <div class="event-modal-icon"><i class="bi bi-tag"></i></div>
                <div>
                    <div class="event-modal-label">Jenis</div>
                    <div class="event-modal-value">
                        <span class="badge" style="background: ${event.backgroundColor};">${eventType}</span>
                    </div>
                </div>
            </div>
            ${event.extendedProps.description ? `
            <div class="event-modal-detail">
                <div class="event-modal-icon"><i class="bi bi-text-left"></i></div>
                <div>
                    <div class="event-modal-label">Deskripsi</div>
                    <div class="event-modal-value">${event.extendedProps.description}</div>
                </div>
            </div>
            ` : ''}
        `;
        modal.show();
    }
</script>

<!-- Event Detail Modal -->
<div class="modal fade" id="dashboardEventModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, var(--primary) 0%, #5a5fe0 100%); color: white;">
                <h5 class="modal-title text-white" id="dashboardEventModalTitle">
                    <i class="bi bi-calendar-event me-2"></i>Detail Event
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="dashboardEventModalBody" style="padding: 1rem 1.5rem;">
            </div>
        </div>
    </div>
</div>

<style>
    .event-modal-detail {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.875rem 0;
        border-bottom: 1px solid var(--gray-100);
    }
    .event-modal-detail:last-child {
        border-bottom: none;
    }
    .event-modal-icon {
        width: 36px;
        height: 36px;
        background: var(--gray-100);
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        flex-shrink: 0;
    }
    .event-modal-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 0.15rem;
    }
    .event-modal-value {
        font-size: 0.9rem;
        color: var(--gray-800);
        font-weight: 500;
    }
</style>
@endpush
@endsection