@extends('layouts.app')

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

@section('content')
@php
use App\Models\AcademicCalendar;

$user = auth()->user();
$upcomingEvents = AcademicCalendar::active()
    ->where('show_to_mahasiswa', true)
    ->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">
    <!-- Welcome Section -->
    <div class="col-12 mb-4">
        <div class="welcome-card">
            <div class="welcome-content">
                <h4 class="mb-1">Selamat Datang, {{ $user->name }}!</h4>
                <p class="mb-0 opacity-75">
                    @if(isset($tahunAktif))
                        {{ $tahunAktif->nama }}
                    @else
                        Semester belum ditentukan
                    @endif
                </p>
            </div>
            <div class="welcome-icon">
                <i class="bi bi-mortarboard-fill"></i>
            </div>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row mb-4 dashboard-stats-grid">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon primary">
                <i class="bi bi-card-checklist"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $krsDisetujui ?? 0 }}</h3>
                <p>Matakuliah Diambil</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon success">
                <i class="bi bi-journal-check"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $totalSks ?? 0 }}</h3>
                <p>Total SKS</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon warning">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $krsPending ?? 0 }}</h3>
                <p>Menunggu Persetujuan</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card">
            <div class="stat-icon info">
                <i class="bi bi-megaphone"></i>
            </div>
            <div class="stat-content">
                <h3>{{ $announcements->count() }}</h3>
                <p>Pengumuman Baru</p>
            </div>
        </div>
    </div>
</div>

<!-- Quick Menu & Calendar -->
@if(isset($catatans) && $catatans->count() > 0)
<div class="row mb-4">
    @foreach($catatans as $catatan)
    <div class="col-md-{{ $catatans->count() == 1 ? '12' : '6' }} mb-3">
        <div class="catatan-card border-start border-4 border-{{ $catatan->color }} bg-white rounded shadow-sm h-100">
            <div class="p-3">
                <div class="d-flex align-items-start gap-3">
                    <div class="catatan-icon bg-{{ $catatan->color }} text-white rounded p-2">
                        <i class="bi {{ $catatan->icon }}"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="mb-1">{{ $catatan->title }}</h6>
                        <p class="mb-0 text-muted small">{!! $catatan->content !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endif

<!-- Chart IPK per Semester -->
@if(isset($ipkPerSemester) && count($ipkPerSemester) > 0)
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up me-2"></i>Grafik IP per Semester</h5>
            </div>
            <div class="card-body">
                <canvas id="ipkChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>
@endif

<div class="row">
    <!-- Announcements Section -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-megaphone me-2"></i>Pengumuman Terbaru</h5>
                <a href="{{ route('mahasiswa.announcements.index') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
            </div>
            <div class="card-body p-0">
                @forelse($announcements as $announcement)
                <a href="{{ route('mahasiswa.announcements.show', $announcement) }}" class="text-decoration-none">
                    <div class="announcement-item {{ $announcement->priority == 'high' ? 'priority-high' : '' }}">
                        <div class="d-flex align-items-start gap-3">
                            <div class="announcement-icon">
                                <i class="bi bi-megaphone-fill"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <span class="badge {{ $announcement->priority_badge }}">{{ $announcement->priority_label }}</span>
                                    <small class="text-muted">{{ $announcement->created_at->diffForHumans() }}</small>
                                </div>
                                <h6 class="mb-1 text-dark">{{ $announcement->title }}</h6>
                                <p class="text-muted mb-0 small text-announcement">{{ Str::limit(strip_tags($announcement->content), 150) }}</p>
                            </div>
                            <div class="text-muted">
                                <i class="bi bi-chevron-right"></i>
                            </div>
                        </div>
                    </div>
                </a>
                @empty
                <div class="text-center py-4">
                    <i class="bi bi-megaphone fs-1 text-muted d-block mb-2"></i>
                    <p class="text-muted mb-0">Belum ada pengumuman</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Quick Menu -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><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('krs.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-card-checklist"></i>
                                <small>KRS</small>
                            </div>
                        </a>
                        <a href="{{ route('khs.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-file-earmark-text"></i>
                                <small>KHS</small>
                            </div>
                        </a>
                        <a href="{{ route('khs.transkrip') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-file-earmark-bar-graph"></i>
                                <small>Transkrip</small>
                            </div>
                        </a>
                        <a href="{{ route('presensi.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-clipboard-check"></i>
                                <small>Absensi</small>
                            </div>
                        </a>
                        <a href="{{ route('calendar.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-calendar-month"></i>
                                <small>Kalender</small>
                            </div>
                        </a>
                        <a href="{{ route('mahasiswa.announcements.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-megaphone"></i>
                                <small>Pengumuman</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($unreadCount > 0)
                                <span class="quick-menu-badge">{{ $unreadCount > 9 ? '9+' : $unreadCount }}</span>
                                @endif
                            </div>
                        </a>
                        <a href="{{ route('akademik.pesan.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-envelope"></i>
                                <small>Pesan</small>
                            </div>
                        </a>
                        <a href="{{ route('profile.index') }}" class="text-decoration-none">
                            <div class="quick-menu-item">
                                <i class="bi bi-person"></i>
                                <small>Profil</small>
                            </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">
                                    <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>
/* Dashboard Calendar Styles */
.dashboard-calendar-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.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;
}

.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;
}

.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 {
    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;
}

.welcome-card {
    background: linear-gradient(135deg, var(--primary) 0%, #5a5fe0 100%);
    border-radius: 16px;
    padding: 24px 30px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-content h4 {
    font-weight: 600;
}

.welcome-icon {
    font-size: 48px;
    opacity: 0.3;
}

.catatan-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.catatan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
.catatan-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.announcement-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.2s;
}
.announcement-item:hover {
    background: var(--gray-100);
}
.announcement-item:last-child {
    border-bottom: none;
}
.announcement-item.priority-high {
    background: rgba(255, 75, 75, 0.05);
    border-left: 3px solid var(--danger);
}
.announcement-icon {
    width: 40px;
    height: 40px;
    background: rgba(105, 108, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}
.announcement-item.priority-high .announcement-icon {
    background: rgba(255, 75, 75, 0.1);
    color: var(--danger);
}

.quick-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    transition: all 0.2s;
    color: var(--gray-800);
}
.quick-menu-item:hover {
    border-color: var(--primary);
    background: rgba(105, 108, 255, 0.02);
    transform: translateX(4px);
}
.quick-menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.quick-menu-item strong {
    font-size: 14px;
}
.text-announcement {
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 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-grid .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;
    flex-shrink: 0;
}

.quick-menu-grid .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-grid .quick-menu-item i {
    font-size: 1.5rem;
    color: var(--primary);
}

.quick-menu-grid .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;
    }

    .quick-menu-grid .quick-menu-item {
        flex-shrink: unset;
    }
}

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

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

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

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

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

@if(isset($ipkPerSemester) && count($ipkPerSemester) > 0)
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('ipkChart').getContext('2d');

    const semesters = {!! json_encode(array_column($ipkPerSemester, 'semester')) !!};
    const ips = {!! json_encode(array_column($ipkPerSemester, 'ip')) !!};

    // Gradient for the line
    const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
    gradient.addColorStop(0, 'rgba(105, 108, 255, 0.3)');
    gradient.addColorStop(1, 'rgba(105, 108, 255, 0.05)');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: semesters,
            datasets: [{
                label: 'Indeks Prestasi (IP)',
                data: ips,
                borderColor: '#696cff',
                backgroundColor: gradient,
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointBackgroundColor: '#696cff',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 6,
                pointHoverRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(59, 63, 92, 0.9)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: '600'
                    },
                    bodyFont: {
                        size: 13
                    },
                    callbacks: {
                        label: function(context) {
                            return 'IP: ' + context.parsed.y.toFixed(2);
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 4.0,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    },
                    ticks: {
                        stepSize: 0.5,
                        font: {
                            size: 12
                        },
                        color: '#8392ab'
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 12
                        },
                        color: '#8392ab'
                    }
                }
            }
        }
    });
});
</script>
@endif

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('dashboardCalendarFull');
        if (calendarEl) {
            const dashboardCalendar = new FullCalendar.Calendar(calendarEl, {
                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,
            });
            dashboardCalendar.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>
@endpush

<!-- 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>
@endsection