@extends('layouts.app')

@section('title', 'Kalender Akademik - SIAKAD')
@section('page-title', 'Kalender Akademik')

@php
use App\Models\AcademicCalendar;

$userRole = Auth::check() ? Auth::user()->role : 'guest';
$roleLabel = [
    'admin' => 'Administrator',
    'dosen' => 'Dosen',
    'mahasiswa' => 'Mahasiswa'
];
$currentRoleLabel = $roleLabel[$userRole] ?? 'Guest';
$colors = AcademicCalendar::getColors();
$eventTypes = AcademicCalendar::getEventTypes();
@endphp

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css">
<style>
    /* Page Header */
    .page-header-card {
        background: linear-gradient(135deg, var(--primary) 0%, #5a5fe0 100%);
        border-radius: 1rem;
        padding: 2rem;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .page-header-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
    }

    .page-header-card::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: 20%;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .page-header-content {
        position: relative;
        z-index: 1;
    }

    .page-header-icon {
        width: 64px;
        height: 64px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .page-header-card h4 {
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .page-header-card p {
        opacity: 0.85;
        margin: 0;
        font-size: 0.95rem;
    }

    /* Legend Card */
    .legend-card {
        background: white;
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        border: none;
    }

    .legend-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gray-600);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .legend-title i {
        color: var(--primary);
    }

    .legend-items {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.75rem;
        background: var(--gray-100);
        border-radius: 2rem;
        transition: all 0.2s;
    }

    .legend-item:hover {
        background: var(--gray-200);
        transform: translateY(-1px);
    }

    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .legend-label {
        font-size: 0.8rem;
        color: var(--gray-700);
        font-weight: 500;
    }

    /* Upcoming Events Section */
    .upcoming-section {
        background: white;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

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

    .upcoming-header h6 {
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .upcoming-header .badge {
        background: rgba(255, 255, 255, 0.25);
        color: white;
        font-weight: 500;
    }

    .upcoming-body {
        padding: 0;
    }

    .event-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--gray-100);
        transition: all 0.2s;
    }

    .event-item:last-child {
        border-bottom: none;
    }

    .event-item:hover {
        background: var(--gray-100);
    }

    .event-icon {
        width: 48px;
        height: 48px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .event-info {
        flex-grow: 1;
        min-width: 0;
    }

    .event-title {
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 0.25rem;
        font-size: 0.95rem;
    }

    .event-date {
        font-size: 0.8rem;
        color: var(--gray-500);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .event-date i {
        font-size: 0.85rem;
    }

    .event-type-badge {
        padding: 0.35rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: white;
        flex-shrink: 0;
    }

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

    .event-empty i {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        opacity: 0.3;
    }

    .event-empty p {
        margin: 0;
        font-size: 0.9rem;
    }

    /* Calendar Card */
    .calendar-card {
        background: white;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .calendar-card .fc {
        padding: 1rem;
    }

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

    .fc .fc-toolbar {
        margin-bottom: 1rem !important;
    }

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

    .fc .fc-button {
        background-color: var(--gray-100);
        border: none;
        color: var(--gray-700);
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        transition: all 0.2s;
    }

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

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

    .fc .fc-button-primary:not(:disabled).fc-button-active {
        background-color: var(--primary);
    }

    .fc .fc-daygrid-day {
        transition: all 0.2s;
    }

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

    .fc .fc-daygrid-day-number {
        font-size: 0.9rem;
        color: var(--gray-700);
        padding: 0.5rem;
    }

    .fc .fc-col-header-cell-cushion {
        font-weight: 600;
        color: var(--gray-600);
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        padding: 0.75rem 0;
    }

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

    .fc .fc-daygrid-day-number.fc-day-today {
        color: var(--primary);
        font-weight: 700;
    }

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

    .fc .fc-event {
        border-radius: 6px;
        padding: 3px 8px;
        font-size: 0.8rem;
        cursor: pointer;
        border: none !important;
        font-weight: 500;
        transition: all 0.2s;
        margin: 2px 0;
    }

    .fc .fc-event:hover {
        transform: scale(1.02);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .fc .fc-event-title {
        font-weight: 500;
    }

    .fc .fc-more-link {
        color: var(--primary);
        font-weight: 600;
        font-size: 0.75rem;
    }

    .fc .fc-more-link:hover {
        text-decoration: underline;
    }

    .fc .fc-list-event:hover td {
        background-color: var(--gray-100);
    }

    .fc .fc-list-day-cushion {
        background-color: var(--gray-100);
    }

    /* Event Modal */
    .modal-event-header {
        background: linear-gradient(135deg, var(--primary) 0%, #5a5fe0 100%);
        color: white;
        padding: 1.5rem;
        border-radius: 0.75rem 0.75rem 0 0;
        margin: -1rem -1rem 1.5rem -1rem;
    }

    .modal-event-header h5 {
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .modal-event-body {
        padding: 0;
    }

    .event-detail-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .event-detail-item:last-child {
        border-bottom: none;
    }

    .event-detail-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--gray-100);
        color: var(--primary);
        flex-shrink: 0;
    }

    .event-detail-content {
        flex-grow: 1;
    }

    .event-detail-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.25rem;
    }

    .event-detail-value {
        font-size: 0.95rem;
        color: var(--gray-800);
        font-weight: 500;
    }

    .event-detail-description {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin-top: 0.5rem;
    }

    /* Quick Stats */
    .quick-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .quick-stat-item {
        background: white;
        border-radius: 1rem;
        padding: 1.25rem;
        text-align: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
    }

    .quick-stat-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .quick-stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.75rem;
        font-size: 1.25rem;
    }

    .quick-stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-800);
    }

    .quick-stat-label {
        font-size: 0.8rem;
        color: var(--gray-500);
        margin: 0;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .page-header-card {
            padding: 1.5rem;
        }

        .page-header-icon {
            width: 48px;
            height: 48px;
            font-size: 1.25rem;
        }

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

        .legend-items {
            gap: 0.5rem;
        }

        .legend-item {
            padding: 0.3rem 0.5rem;
        }

        .legend-label {
            font-size: 0.7rem;
        }
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header-card mb-4">
    <div class="page-header-content">
        <div class="page-header-icon">
            <i class="bi bi-calendar-month"></i>
        </div>
        <h4 class="mb-1">Kalender Akademik</h4>
        <p class="mb-0">
            <i class="bi bi-person-badge me-1"></i>
            {{ $currentRoleLabel }}
            <span class="mx-2">•</span>
            <i class="bi bi-calendar3 me-1"></i>
            {{ now()->format('d M Y') }}
        </p>
    </div>
</div>

<!-- Quick Stats -->
<div class="quick-stats">
    <div class="quick-stat-item">
        <div class="quick-stat-icon" style="background: rgba(105, 108, 255, 0.1); color: var(--primary);">
            <i class="bi bi-calendar-event"></i>
        </div>
        <div class="quick-stat-value" id="totalEvents">-</div>
        <p class="quick-stat-label mb-0">Total Events</p>
    </div>
    <div class="quick-stat-item">
        <div class="quick-stat-icon" style="background: rgba(2, 195, 154, 0.1); color: var(--success);">
            <i class="bi bi-hourglass-split"></i>
        </div>
        <div class="quick-stat-value" id="upcomingCount">-</div>
        <p class="quick-stat-label mb-0">Mendatang</p>
    </div>
    <div class="quick-stat-item">
        <div class="quick-stat-icon" style="background: rgba(252, 176, 44, 0.1); color: var(--warning);">
            <i class="bi bi-calendar-week"></i>
        </div>
        <div class="quick-stat-value" id="thisMonth">-</div>
        <p class="quick-stat-label mb-0">Bulan Ini</p>
    </div>
    <div class="quick-stat-item">
        <div class="quick-stat-icon" style="background: rgba(255, 75, 75, 0.1); color: var(--danger);">
            <i class="bi bi-flag"></i>
        </div>
        <div class="quick-stat-value" id="thisWeek">-</div>
        <p class="quick-stat-label mb-0">Minggu Ini</p>
    </div>
</div>

<div class="row">
    <!-- Upcoming Events -->
    <div class="col-lg-4 mb-4">
        <div class="upcoming-section h-100">
            <div class="upcoming-header">
                <h6>
                    <i class="bi bi-clock-history"></i>
                    Mendatang
                </h6>
                <span class="badge" id="upcomingBadge">0 events</span>
            </div>
            <div class="upcoming-body" id="upcomingEvents">
                <div class="event-empty">
                    <i class="bi bi-calendar-x"></i>
                    <p>Memuat...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Calendar -->
    <div class="col-lg-8 mb-4">
        <div class="calendar-card">
            <div class="card-body p-3">
                <!-- Legend -->
                <div class="legend-card mb-4">
                    <div class="legend-title">
                        <i class="bi bi-palette"></i>
                        Keterangan Warna
                    </div>
                    <div class="legend-items">
                        @foreach(AcademicCalendar::getColors() as $key => $color)
                        <div class="legend-item">
                            <span class="legend-dot" style="background: {{ AcademicCalendar::getColorHex($key) }};"></span>
                            <span class="legend-label">{{ $color }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>

<!-- Event Detail Modal -->
<div class="modal fade" id="eventModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-event-header">
                <h5 id="eventModalTitle">
                    <i class="bi bi-calendar-event"></i>
                    Detail Event
                </h5>
            </div>
            <div class="modal-body modal-event-body" id="eventModalBody">
            </div>
            <div class="modal-footer justify-content-center border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-2"></i>Tutup
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@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('calendar');
        let allEvents = [];

        const calendar = 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 => {
                        allEvents = data;
                        updateStats(data);
                        successCallback(data);
                    })
                    .catch(error => failureCallback(error));
            },
            eventClick: function(info) {
                showEventDetail(info.event);
            },
            eventDisplay: 'block',
            displayEventTime: false,
            nowIndicator: true,
            dayMaxEvents: 3,
        });

        calendar.render();

        // Load upcoming events
        loadUpcomingEvents();

        function updateStats(events) {
            const now = new Date();
            const startOfWeek = new Date(now);
            startOfWeek.setDate(now.getDate() - now.getDay());
            const endOfWeek = new Date(startOfWeek);
            endOfWeek.setDate(startOfWeek.getDate() + 7);

            const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
            const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);

            const upcoming = events.filter(e => new Date(e.start) > now).length;
            const thisMonth = events.filter(e => {
                const start = new Date(e.start);
                return start >= startOfMonth && start <= endOfMonth;
            }).length;
            const thisWeek = events.filter(e => {
                const start = new Date(e.start);
                return start >= startOfWeek && start <= endOfWeek;
            }).length;

            document.getElementById('totalEvents').textContent = events.length;
            document.getElementById('upcomingCount').textContent = upcoming;
            document.getElementById('thisMonth').textContent = thisMonth;
            document.getElementById('thisWeek').textContent = thisWeek;
            document.getElementById('upcomingBadge').textContent = upcoming + ' events';
        }

        function loadUpcomingEvents() {
            fetch('/calendar/upcoming-list')
                .then(response => response.text())
                .then(html => {
                    document.getElementById('upcomingEvents').innerHTML = html;
                    initUpcomingEventStyles();
                })
                .catch(() => {
                    document.getElementById('upcomingEvents').innerHTML = `
                        <div class="event-empty">
                            <i class="bi bi-calendar-x"></i>
                            <p>Tidak ada upcoming events</p>
                        </div>
                    `;
                });
        }

        function initUpcomingEventStyles() {
            document.querySelectorAll('.event-item').forEach(item => {
                const eventType = item.dataset.eventType;
                const colorHex = item.dataset.color;
                const iconMap = {
                    'semester_start': 'bi-play-circle',
                    'semester_end': 'bi-stop-circle',
                    'registration': 'bi-person-plus',
                    'mid_exam': 'bi-file-earmark-text',
                    'final_exam': 'bi-file-earmark-check',
                    'uts': 'bi-file-text',
                    'uas': 'bi-file-check',
                    'holiday': 'bi-sun',
                    'registration_mhs_baru': 'bi-person-badge',
                    'krs': 'bi-card-checklist',
                    'yudisium': 'bi-mortarboard',
                    'wisuda': 'bi-calendar-event',
                    'other': 'bi-calendar'
                };

                const icon = iconMap[eventType] || 'bi-calendar';
                item.querySelector('.event-icon').style.background = colorHex;
                item.querySelector('.event-icon i').className = 'bi ' + icon;

                const badge = item.querySelector('.event-type-badge');
                if (badge) {
                    badge.style.background = colorHex;
                }
            });
        }

        function showEventDetail(event) {
            const modal = new bootstrap.Modal(document.getElementById('eventModal'));
            const title = document.getElementById('eventModalTitle');
            const body = document.getElementById('eventModalBody');

            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 icons = {
                'semester_start': 'bi-play-circle',
                'semester_end': 'bi-stop-circle',
                'registration': 'bi-person-plus',
                'mid_exam': 'bi-file-earmark-text',
                'final_exam': 'bi-file-earmark-check',
                'uts': 'bi-file-text',
                'uas': 'bi-file-check',
                'holiday': 'bi-sun',
                'registration_mhs_baru': 'bi-person-badge',
                'krs': 'bi-card-checklist',
                'yudisium': 'bi-mortarboard',
                'wisuda': 'bi-calendar-star',
                'other': 'bi-calendar'
            };

            const eventType = event.extendedProps.event_type || 'other';
            const eventTypeLabel = eventTypes[eventType] || 'Lainnya';
            const icon = icons[eventType] || 'bi-calendar';
            const color = event.backgroundColor || '#696cff';

            title.innerHTML = `<i class="bi ${icon}"></i> ${event.title}`;

            let dateRange = formatDate(event.start);
            if (event.end) {
                dateRange += ' - ' + formatDate(event.end);
            }

            let html = `
                <div class="event-detail-item">
                    <div class="event-detail-icon">
                        <i class="bi bi-calendar3"></i>
                    </div>
                    <div class="event-detail-content">
                        <div class="event-detail-label">Tanggal</div>
                        <div class="event-detail-value">${dateRange}</div>
                    </div>
                </div>
                <div class="event-detail-item">
                    <div class="event-detail-icon" style="background: ${color}20; color: ${color};">
                        <i class="bi ${icon}"></i>
                    </div>
                    <div class="event-detail-content">
                        <div class="event-detail-label">Jenis Kegiatan</div>
                        <div class="event-detail-value">
                            <span class="badge" style="background: ${color}; padding: 0.4rem 0.75rem;">
                                ${eventTypeLabel}
                            </span>
                        </div>
                    </div>
                </div>
            `;

            if (event.extendedProps.description) {
                html += `
                    <div class="event-detail-item">
                        <div class="event-detail-icon">
                            <i class="bi bi-text-left"></i>
                        </div>
                        <div class="event-detail-content">
                            <div class="event-detail-label">Deskripsi</div>
                            <div class="event-detail-description">${event.extendedProps.description}</div>
                        </div>
                    </div>
                `;
            }

            body.innerHTML = html;
            modal.show();
        }

        function formatDate(date) {
            const options = { day: 'numeric', month: 'long', year: 'numeric' };
            return new Date(date).toLocaleDateString('id-ID', options);
        }
    });
</script>
@endpush