@extends('layouts.app')
@section('title', 'Academic Calendar')
@section('page-title', 'Academic Calendar')

@section('content')
@php
    $isAdmin = auth()->user()->role === 'admin';
    $currentMonth = \Carbon\Carbon::parse($month . '-01');
@endphp

<div class="space-y-6">

    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
    </div>
    @endif

    {{-- Header with navigation --}}
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('academic-calendar.index', ['month' => $currentMonth->copy()->subMonth()->format('Y-m')]) }}"
               class="px-3 py-2 bg-white rounded-lg shadow-sm ring-1 ring-gray-200 hover:bg-gray-50 text-gray-600">
                <i class="fas fa-chevron-left"></i>
            </a>
            <h2 class="text-xl font-bold text-gray-800">{{ $currentMonth->format('F Y') }}</h2>
            <a href="{{ route('academic-calendar.index', ['month' => $currentMonth->copy()->addMonth()->format('Y-m')]) }}"
               class="px-3 py-2 bg-white rounded-lg shadow-sm ring-1 ring-gray-200 hover:bg-gray-50 text-gray-600">
                <i class="fas fa-chevron-right"></i>
            </a>
            <a href="{{ route('academic-calendar.index') }}"
               class="px-3 py-2 text-sm text-primary-700 hover:underline ml-2">Today</a>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('academic-calendar.index', ['month' => $month, 'view' => 'calendar']) }}"
               class="px-3 py-2 text-sm rounded-lg {{ $view === 'calendar' ? 'bg-primary-700 text-white' : 'bg-white ring-1 ring-gray-200 text-gray-600' }}">
                <i class="fas fa-calendar mr-1"></i> Calendar
            </a>
            <a href="{{ route('academic-calendar.index', ['month' => $month, 'view' => 'list']) }}"
               class="px-3 py-2 text-sm rounded-lg {{ $view === 'list' ? 'bg-primary-700 text-white' : 'bg-white ring-1 ring-gray-200 text-gray-600' }}">
                <i class="fas fa-list mr-1"></i> List
            </a>
            @if($isAdmin)
            <button onclick="document.getElementById('addEventModal').classList.remove('hidden')"
                    class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium">
                <i class="fas fa-plus mr-1"></i> Add Event
            </button>
            @endif
        </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        {{-- Main Calendar / List --}}
        <div class="lg:col-span-2 space-y-6">

            @if($view === 'calendar')
            {{-- Calendar Grid --}}
            <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
                <div class="grid grid-cols-7">
                    @foreach(['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] as $day)
                    <div class="text-center text-xs font-semibold text-gray-500 py-3 bg-gray-50 border-b border-gray-100">{{ $day }}</div>
                    @endforeach
                </div>

                @php
                    $firstDay = $currentMonth->copy()->startOfMonth();
                    $lastDay = $currentMonth->copy()->endOfMonth();
                    $startPadding = $firstDay->dayOfWeek;
                    $totalCells = $startPadding + $lastDay->day;
                    $totalRows = ceil($totalCells / 7);
                @endphp

                <div class="grid grid-cols-7">
                    @for($i = 0; $i < $startPadding; $i++)
                    <div class="min-h-[90px] border-b border-r border-gray-50 bg-gray-50/30"></div>
                    @endfor

                    @for($day = 1; $day <= $lastDay->day; $day++)
                    @php
                        $dateStr = $currentMonth->format('Y-m') . '-' . str_pad($day, 2, '0', STR_PAD_LEFT);
                        $dateObj = \Carbon\Carbon::parse($dateStr);
                        $isToday = $dateObj->isToday();
                        $isSunday = $dateObj->isSunday();

                        $dayEvents = $events->filter(function($e) use ($dateObj) {
                            $end = $e->end_date ?? $e->start_date;
                            return $dateObj->between($e->start_date, $end);
                        });

                        $hasHoliday = $dayEvents->where('is_holiday', true)->isNotEmpty();
                    @endphp
                    <div class="min-h-[90px] border-b border-r border-gray-50 p-1 {{ $isToday ? 'bg-primary-50/50' : ($hasHoliday || $isSunday ? 'bg-red-50/30' : '') }}">
                        <div class="flex items-center justify-between px-1">
                            <span class="text-xs font-semibold {{ $isToday ? 'bg-primary-700 text-white w-6 h-6 rounded-full flex items-center justify-center' : ($isSunday || $hasHoliday ? 'text-red-500' : 'text-gray-700') }}">
                                {{ $day }}
                            </span>
                        </div>
                        <div class="space-y-0.5 mt-1">
                            @foreach($dayEvents->take(3) as $event)
                            <div class="text-[10px] leading-tight px-1 py-0.5 rounded truncate font-medium"
                                 style="background-color: {{ $event->color }}20; color: {{ $event->color }};"
                                 title="{{ $event->title }}{{ $event->description ? ': '.$event->description : '' }}">
                                {{ $event->title }}
                            </div>
                            @endforeach
                            @if($dayEvents->count() > 3)
                            <div class="text-[9px] text-gray-400 px-1">+{{ $dayEvents->count() - 3 }} more</div>
                            @endif
                        </div>
                    </div>
                    @endfor

                    @php $remainder = ($startPadding + $lastDay->day) % 7; @endphp
                    @if($remainder > 0)
                    @for($i = 0; $i < (7 - $remainder); $i++)
                    <div class="min-h-[90px] border-b border-r border-gray-50 bg-gray-50/30"></div>
                    @endfor
                    @endif
                </div>
            </div>

            @else
            {{-- List View --}}
            <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                    <h3 class="font-semibold text-gray-800"><i class="fas fa-list-alt mr-2 text-gray-400"></i> All Events — {{ $academicYear->name }}</h3>
                </div>
                @php $grouped = $events->groupBy(fn($e) => $e->start_date->format('F Y')); @endphp
                @forelse($grouped as $monthGroup => $monthEvents)
                <div class="border-b border-gray-100 last:border-0">
                    <div class="px-6 py-2 bg-gray-50 text-xs font-semibold text-gray-600 uppercase">{{ $monthGroup }}</div>
                    @foreach($monthEvents as $event)
                    <div class="px-6 py-3 flex items-start gap-3 hover:bg-gray-50 border-b border-gray-50 last:border-0">
                        <div class="w-3 h-3 rounded-full mt-1 flex-shrink-0" style="background-color: {{ $event->color }}"></div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="font-medium text-sm text-gray-800">{{ $event->title }}</span>
                                @if($event->is_holiday)
                                <span class="text-[10px] px-1.5 py-0.5 bg-red-100 text-red-600 rounded font-semibold">HOLIDAY</span>
                                @endif
                                <span class="text-[10px] px-1.5 py-0.5 bg-gray-100 text-gray-500 rounded capitalize">{{ str_replace('_', ' ', $event->type) }}</span>
                            </div>
                            @if($event->description)
                            <p class="text-xs text-gray-500 mt-0.5">{{ $event->description }}</p>
                            @endif
                            <p class="text-xs text-gray-400 mt-1">
                                <i class="far fa-calendar-alt mr-1"></i>{{ $event->duration }}
                            </p>
                        </div>
                        @if($isAdmin)
                        <form method="POST" action="{{ route('academic-calendar.destroy', $event) }}" onsubmit="return confirm('Delete this event?')">
                            @csrf @method('DELETE')
                            <button class="text-gray-300 hover:text-red-500 text-xs"><i class="fas fa-trash"></i></button>
                        </form>
                        @endif
                    </div>
                    @endforeach
                </div>
                @empty
                <div class="p-12 text-center text-gray-400">
                    <i class="fas fa-calendar-times text-3xl mb-2 block"></i>
                    No events for this academic year.
                </div>
                @endforelse
            </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">
            {{-- Quick Stats --}}
            <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-5">
                <h3 class="font-semibold text-gray-800 text-sm mb-3">
                    <i class="fas fa-info-circle mr-1 text-gray-400"></i> Year Overview
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-red-50 rounded-lg p-3 text-center">
                        <p class="text-xl font-bold text-red-600">{{ $holidays }}</p>
                        <p class="text-[10px] text-red-500 uppercase font-medium">Holidays</p>
                    </div>
                    <div class="bg-yellow-50 rounded-lg p-3 text-center">
                        <p class="text-xl font-bold text-yellow-600">{{ $terms->where('type', 'exam')->count() }}</p>
                        <p class="text-[10px] text-yellow-500 uppercase font-medium">Exams</p>
                    </div>
                    <div class="bg-green-50 rounded-lg p-3 text-center">
                        <p class="text-xl font-bold text-green-600">{{ $terms->where('type', 'sports')->count() }}</p>
                        <p class="text-[10px] text-green-500 uppercase font-medium">Sports</p>
                    </div>
                    <div class="bg-pink-50 rounded-lg p-3 text-center">
                        <p class="text-xl font-bold text-pink-600">{{ $terms->whereIn('type', ['celebration','cultural'])->count() }}</p>
                        <p class="text-[10px] text-pink-500 uppercase font-medium">Cultural</p>
                    </div>
                </div>
            </div>

            {{-- Upcoming Events --}}
            <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
                <div class="px-5 py-3 border-b border-gray-100 bg-gray-50/50">
                    <h3 class="font-semibold text-gray-800 text-sm"><i class="fas fa-clock mr-1 text-gray-400"></i> Upcoming</h3>
                </div>
                @forelse($upcoming as $event)
                <div class="px-5 py-3 border-b border-gray-50 last:border-0">
                    <div class="flex items-start gap-2">
                        <div class="w-2 h-2 rounded-full mt-1.5 flex-shrink-0" style="background-color: {{ $event->color }}"></div>
                        <div>
                            <p class="text-sm font-medium text-gray-800">{{ $event->title }}</p>
                            <p class="text-xs text-gray-400 mt-0.5">{{ $event->start_date->format('D, d M Y') }}</p>
                            @if($event->is_holiday)
                            <span class="text-[9px] px-1 py-0.5 bg-red-100 text-red-600 rounded font-semibold mt-1 inline-block">HOLIDAY</span>
                            @endif
                        </div>
                    </div>
                </div>
                @empty
                <div class="p-5 text-center text-gray-400 text-sm">No upcoming events</div>
                @endforelse
            </div>

            {{-- Legend --}}
            <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-5">
                <h3 class="font-semibold text-gray-800 text-sm mb-3"><i class="fas fa-palette mr-1 text-gray-400"></i> Event Types</h3>
                <div class="space-y-2">
                    @foreach([
                        ['Holiday / Vacation', '#EF4444'],
                        ['Examinations', '#F59E0B'],
                        ['Term Start / End', '#8B5CF6'],
                        ['Celebrations', '#EC4899'],
                        ['Sports / Camp', '#10B981'],
                        ['Competition', '#06B6D4'],
                        ['Workshop / Meeting', '#6366F1'],
                        ['General Event', '#3B82F6'],
                    ] as [$label, $color])
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-sm flex-shrink-0" style="background-color: {{ $color }}"></div>
                        <span class="text-xs text-gray-600">{{ $label }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Add Event Modal (Admin only) --}}
@if($isAdmin)
<div id="addEventModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="text-lg font-bold text-gray-800">Add Calendar Event</h3>
            <button onclick="document.getElementById('addEventModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('academic-calendar.store') }}" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Event Title *</label>
                <input type="text" name="title" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" placeholder="e.g. Republic Day Celebration">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <textarea name="description" rows="2" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" placeholder="Brief description..."></textarea>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Start Date *</label>
                    <input type="date" name="start_date" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
                    <input type="date" name="end_date" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Type *</label>
                    <select name="type" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        <option value="holiday">Holiday</option>
                        <option value="vacation">Vacation</option>
                        <option value="exam">Exam</option>
                        <option value="term_start">Term Start</option>
                        <option value="term_end">Term End</option>
                        <option value="celebration">Celebration</option>
                        <option value="cultural">Cultural Event</option>
                        <option value="sports">Sports</option>
                        <option value="camp">Camp</option>
                        <option value="competition">Competition</option>
                        <option value="meeting">Meeting</option>
                        <option value="workshop">Workshop</option>
                        <option value="event" selected>General Event</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Audience</label>
                    <select name="audience" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        <option value="all">Everyone</option>
                        <option value="students">Students Only</option>
                        <option value="teachers">Teachers Only</option>
                        <option value="parents">Parents Only</option>
                    </select>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_holiday" value="1" class="rounded text-red-500">
                    <span class="text-sm text-gray-700">Mark as Holiday (school closed)</span>
                </label>
            </div>
            <div class="pt-3 border-t border-gray-100 flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('addEventModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Cancel</button>
                <button type="submit" class="px-5 py-2 bg-primary-700 text-white rounded-lg hover:bg-primary-800 text-sm font-medium">
                    <i class="fas fa-plus mr-1"></i> Add Event
                </button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection