@extends('layouts.app')

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

@php
$userRole = Auth::check() ? Auth::user()->role : 'admin';
@endphp

@section('content')
<div class="row mb-4">
    <div class="col-md-8">
        <h5 class="mb-0"><i class="bi bi-calendar-month me-2"></i>Kalender Akademik</h5>
        <small class="text-muted">Preview penuh untuk semua event akademik</small>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ route('admin.academic-calendar.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>Kembali
        </a>
    </div>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body p-3">
        <div id="calendar"></div>
    </div>
</div>

<!-- Event Detail Modal -->
<div class="modal fade" id="eventModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="eventModalTitle">
                    <i class="bi bi-calendar-event me-2"></i>Detail Event
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="eventModalBody">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                @if($userRole === 'admin')
                <a href="#" id="eventModalEdit" class="btn btn-primary">
                    <i class="bi bi-pencil me-2"></i>Edit Event
                </a>
                @endif
            </div>
        </div>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css">
<style>
    .fc {
        font-family: 'DM Sans', sans-serif;
    }
    .fc .fc-toolbar-title {
        font-size: 1.25rem;
        font-weight: 600;
    }
    .fc .fc-button {
        background-color: var(--primary);
        border-color: var(--primary);
    }
    .fc .fc-button:hover {
        background-color: #5a5fe0;
        border-color: #5a5fe0;
    }
    .fc .fc-button-active {
        background-color: #5a5fe0 !important;
    }
    .fc .fc-daygrid-day-number {
        font-size: 0.875rem;
    }
    .fc .fc-col-header-cell-cushion {
        font-weight: 600;
        color: var(--gray-700);
    }
    .fc-event {
        border-radius: 4px;
        padding: 2px 4px;
        font-size: 0.75rem;
        cursor: pointer;
    }
    .fc-event-title {
        font-weight: 500;
    }
</style>
@endpush

@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');

        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,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,
            nowIndicator: true,
            dayMaxEvents: 3,
            eventContent: function(arg) {
                return { html: '<div class="fw-medium">' + arg.event.title + '</div>' };
            }
        });

        calendar.render();

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

            title.innerHTML = '<i class="bi bi-calendar-event me-2"></i>' + event.title;
            body.innerHTML = `
                <table class="table table-sm mb-0">
                    <tr>
                        <td class="fw-medium" style="width: 120px;">Tanggal</td>
                        <td>${formatDate(event.start)} ${event.end ? ' - ' + formatDate(event.end) : ''}</td>
                    </tr>
                    <tr>
                        <td class="fw-medium">Tipe</td>
                        <td><span class="badge bg-primary">${event.extendedProps.event_type || 'Lainnya'}</span></td>
                    </tr>
                    ${event.extendedProps.description ? `
                    <tr>
                        <td class="fw-medium">Deskripsi</td>
                        <td>${event.extendedProps.description}</td>
                    </tr>
                    ` : ''}
                </table>
            `;

            @if($userRole === 'admin')
            editLink.href = '/admin/academic-calendar/' + event.id + '/edit';
            editLink.style.display = 'inline-block';
            @else
            editLink.style.display = 'none';
            @endif

            modal.show();
        }

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