@extends('layouts.admin')

@section('header')
    <div class="flex items-center justify-between w-full">
        <span>Events Calendar</span>
        <div class="bg-gray-100 p-1 rounded-lg flex items-center">
            <a href="{{ route('events.index', ['view' => 'calendar', 'month' => $month, 'year' => $year]) }}" 
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-all {{ $view === 'calendar' ? 'bg-white shadow text-indigo-600' : 'text-gray-600 hover:text-gray-900' }}">
                Calendar
            </a>
            <a href="{{ route('events.index', ['view' => 'list', 'year' => $year]) }}" 
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-all {{ $view === 'list' ? 'bg-white shadow text-indigo-600' : 'text-gray-600 hover:text-gray-900' }}">
                List
            </a>
        </div>
    </div>
@endsection

@section('content')
    <div x-data="{
        isOpen: false,
        mode: 'create', // 'create' or 'edit'
        formAction: '',
        method: 'POST',
        eventData: {
            id: null,
            title: '',
            event_type_id: '',
            date_time: '',
            end_date_time: '',
            location: '',
            details: ''
        },
        deleteAction: '',
        
        openCreate(date = null) {
            this.mode = 'create';
            this.method = 'POST';
            this.formAction = '{{ route('events.store') }}';
            
            let defaultDate = date;
            if (!defaultDate) {
                let now = new Date();
                // Adjust for timezone offset
                now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
                defaultDate = now.toISOString().slice(0, 10);
            }

            this.eventData = {
                id: null,
                title: '',
                event_type_id: '',
                date_time: defaultDate + 'T18:00', // Default time
                end_date_time: defaultDate + 'T18:00', // Default to same as start
                location: '',
                details: ''
            };
            this.isOpen = true;
        },

        openEdit(event) {
            this.mode = 'edit';
            this.method = 'PUT'; // Laravel spoofing handled in form
            this.formAction = '/events/' + event.id;
            this.deleteAction = '/events/' + event.id;
            
            // Format date for datetime-local input
            // Simply slice the ISO string to keep the exact time stored in DB (YYYY-MM-DDTHH:MM)
            let dateStr = event.date_time ? event.date_time.slice(0, 16) : '';

            // Format end date if exists
            let endDateStr = '';
            if (event.end_date_time) {
                endDateStr = event.end_date_time.slice(0, 16);
            }

            this.eventData = {
                id: event.id,
                title: event.title,
                event_type_id: event.event_type_id,
                date_time: dateStr,
                end_date_time: endDateStr,
                location: event.location,
                details: event.details
            };
            this.isOpen = true;
        },

        updateEndDate() {
            // When start date changes, update end date to match
            if (this.eventData.date_time) {
                this.eventData.end_date_time = this.eventData.date_time;
            }
        },

        closeModal() {
            this.isOpen = false;
        }
    }">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg border border-gray-200">
            <div class="p-6">
                <!-- Header with Toggle -->
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900 font-display">
                            @if($view === 'list')
                                {{ $year }} Events
                            @else
                                {{ $currentDate->format('F Y') }}
                            @endif
                        </h2>
                        <p class="text-sm text-gray-500">Manage club events</p>
                    </div>
                    
                    <div class="flex items-center gap-4">
                        
                        @if($view === 'list')
                            <!-- Add Event Button (List View) -->
                            <button @click="openCreate()" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Add Event
                            </button>
                        @endif

                        <a href="{{ route('events.index', ['view' => 'print', 'year' => $year]) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 {{ $view === 'list' ? 'ml-2' : '' }}">
                            <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                            </svg>
                            Print Calendar
                        </a>

                        <!-- Navigation -->
                        <div class="flex items-center space-x-2 bg-gray-100 p-1 rounded-xl shadow-inner">
                            @if($view === 'list')
                                <!-- Year Navigation -->
                                <a href="{{ route('events.index', ['view' => 'list', 'year' => $year - 1]) }}" 
                                   class="p-2 hover:bg-white hover:shadow-sm rounded-lg transition-all text-gray-600 hover:text-indigo-600">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
                                </a>
                                <span class="text-sm font-bold w-12 text-center text-gray-700">{{ $year }}</span>
                                <a href="{{ route('events.index', ['view' => 'list', 'year' => $year + 1]) }}" 
                                   class="p-2 hover:bg-white hover:shadow-sm rounded-lg transition-all text-gray-600 hover:text-indigo-600">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                                </a>
                            @else
                                <!-- Month Navigation -->
                                <div class="flex items-center space-x-1 pl-1">
                                    <a href="{{ route('events.index', ['view' => 'calendar', 'month' => $prevMonth->month, 'year' => $prevMonth->year]) }}" 
                                       class="p-2 hover:bg-white hover:shadow-sm rounded-lg transition-all text-gray-600 hover:text-indigo-600">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
                                    </a>
                                    <a href="{{ route('events.index', ['view' => 'calendar', 'month' => now()->month, 'year' => now()->year]) }}" 
                                       class="px-3 py-2 bg-white shadow-sm rounded-lg text-xs font-bold text-indigo-600 hover:bg-indigo-50 transition-colors uppercase tracking-wider">
                                        Today
                                    </a>
                                    <a href="{{ route('events.index', ['view' => 'calendar', 'month' => $nextMonth->month, 'year' => $nextMonth->year]) }}" 
                                       class="p-2 hover:bg-white hover:shadow-sm rounded-lg transition-all text-gray-600 hover:text-indigo-600">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                @if($view === 'list')
                    <!-- List View -->
                    <div class="space-y-8">
                        @forelse($eventsByDate as $monthName => $events)
                            <div>
                                <h3 class="text-lg font-bold text-gray-900 border-b border-gray-200 pb-2 mb-4">{{ $monthName }}</h3>
                                <div class="space-y-3">
                                    @foreach($events as $event)
                                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-100 hover:border-indigo-200 hover:bg-white hover:shadow-sm transition-all group">
                                            <div class="flex items-start gap-4">
                                                <div class="flex flex-col items-center justify-center w-16 h-16 bg-white rounded-lg border border-gray-200 shadow-sm shrink-0 gap-0.5">
                                                    <span class="text-[10px] font-bold text-indigo-600 uppercase leading-none">{{ $event->date_time->format('D') }}</span>
                                                    <span class="text-xl font-bold text-gray-900 leading-none">{{ $event->date_time->format('d') }}</span>
                                                    <span class="text-[10px] font-bold text-gray-500 uppercase leading-none">{{ $event->date_time->format('M') }}</span>
                                                </div>
                                                <div>
                                                    <h4 class="text-base font-bold text-gray-900 group-hover:text-indigo-600 transition-colors mb-1">
                                                        <button @click="openEdit({{ $event }})" class="hover:underline text-left">
                                                            {{ $event->title }}
                                                        </button>
                                                    </h4>
                                                    <div class="flex flex-col gap-1 mt-0">
                                                        @if($event->details)
                                                            <p class="text-sm text-gray-600 mb-1">{!! nl2br(e($event->details)) !!}</p>
                                                        @endif
                                                        <div class="flex items-center gap-2 text-sm text-gray-500">
                                                            <span class="px-2 py-0.5 rounded text-xs font-medium border
                                                                {{ match($event->eventType->name) {
                                                                        'Course' => 'bg-blue-50 text-blue-700 border-blue-200',
                                                                        'Grading' => 'bg-purple-50 text-purple-700 border-purple-200',
                                                                        'Competition' => 'bg-red-50 text-red-700 border-red-200',
                                                                        'Visiting Instructor' => 'bg-amber-50 text-amber-700 border-amber-200',
                                                                        'Social' => 'bg-green-50 text-green-700 border-green-200',
                                                                        default => 'bg-gray-50 text-gray-700 border-gray-200'
                                                                } }}">
                                                                {{ $event->eventType->name }}
                                                            </span>
                                                            <span class="flex items-center gap-1 font-medium text-indigo-600">
                                                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                                </svg>
                                                                {{ $event->date_time->format('H:i') }}
                                                                @if($event->end_date_time)
                                                                    - {{ $event->end_date_time->format('H:i') }}
                                                                @endif
                                                            </span>
                                                            @if($event->location)
                                                                <span class="flex items-center gap-1">
                                                                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                                                    </svg>
                                                                    {{ $event->location }}
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="flex items-center">
                                                <button @click="openEdit({{ $event }})" class="p-2 text-gray-400 hover:text-indigo-600 transition-colors">
                                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-12">
                                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                                    <svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                    </svg>
                                </div>
                                <h3 class="text-lg font-medium text-gray-900">No events found</h3>
                                <p class="text-gray-500 mt-1">There are no events scheduled for {{ $year }}.</p>
                                <button @click="openCreate()" class="mt-4 inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                    Create First Event
                                </button>
                            </div>
                        @endforelse
                    </div>
                @else
                    <!-- Calendar Grid -->
                    <div class="border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
                        <!-- Days of Week Header -->
                        <div class="grid grid-cols-7 bg-gray-50 border-b border-gray-200">
                            @foreach(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as $dayName)
                                <div class="py-3 text-center text-xs font-bold text-gray-500 uppercase tracking-widest border-r last:border-r-0 border-gray-200">
                                    <span class="hidden sm:inline">{{ $dayName }}</span>
                                    <span class="sm:hidden">{{ substr($dayName, 0, 1) }}</span>
                                </div>
                            @endforeach
                        </div>

                        <!-- Calendar Days -->
                        <div class="grid grid-cols-7 bg-gray-100 gap-px">
                            <!-- Leading empty days -->
                            @for($i = 0; $i < $firstDayOfMonth; $i++)
                                <div class="bg-gray-50/50 min-h-[100px] sm:min-h-[120px]"></div>
                            @endfor

                            <!-- Active days -->
                            @for($day = 1; $day <= $daysInMonth; $day++)
                                @php
                                    $dateObj = $currentDate->copy()->day($day);
                                    $dateStr = $dateObj->format('Y-m-d');
                                    $dayEvents = $eventsByDate[$dateStr] ?? collect();
                                    $isToday = $dateStr === now()->format('Y-m-d');
                                @endphp
                                <div class="bg-white min-h-[100px] sm:min-h-[120px] p-1 sm:p-2 relative group transition-all hover:bg-gray-50">
                                    <div class="flex justify-between items-start mb-1">
                                        <span class="inline-flex items-center justify-center w-6 h-6 text-sm font-bold rounded-full {{ $isToday ? 'bg-indigo-600 text-white shadow-md' : 'text-gray-600' }}">
                                            {{ $day }}
                                        </span>
                                        <button @click="openCreate('{{ $dateStr }}')" 
                                           class="text-gray-400 hover:text-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity" title="Add Event">
                                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                            </svg>
                                        </button>
                                    </div>

                                    <div class="space-y-1 overflow-y-auto max-h-[80px] no-scrollbar">
                                        @foreach($dayEvents as $event)
                                            <button @click="openEdit({{ $event }})" 
                                               class="w-full text-left px-2 py-1.5 rounded bg-gray-50 border border-gray-200 hover:bg-white hover:border-gray-300 hover:shadow-sm transition-all mb-1 group">
                                                <div class="text-[10px] font-bold uppercase tracking-wider mb-0.5 truncate
                                                   {{ match($event->eventType->name) {
                                                        'Course' => 'text-blue-600',
                                                        'Grading' => 'text-purple-600',
                                                        'Competition' => 'text-red-600',
                                                        'Visiting Instructor' => 'text-amber-600',
                                                        'Social' => 'text-green-600',
                                                        default => 'text-gray-500'
                                                   } }}">
                                                    {{ $event->eventType->name }}
                                                </div>
                                                <div class="text-xs font-medium text-gray-700 truncate group-hover:text-gray-900">
                                                    {{ $event->date_time->format('H:i') }} {{ $event->title }}
                                                </div>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            @endfor

                            <!-- Trailing empty days to fill the row -->
                            @php
                                $totalCells = $firstDayOfMonth + $daysInMonth;
                                $remainingCells = ceil($totalCells / 7) * 7 - $totalCells;
                            @endphp
                            @for($i = 0; $i < $remainingCells; $i++)
                                <div class="bg-gray-50/50 min-h-[100px] sm:min-h-[120px]"></div>
                            @endfor
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Event Modal -->
        <div x-show="isOpen" 
             style="display: none;"
             class="fixed inset-0 z-50 overflow-y-auto" 
             aria-labelledby="modal-title" 
             role="dialog" 
             aria-modal="true">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div x-show="isOpen" 
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     x-transition:leave="ease-in duration-200"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0"
                     class="fixed inset-0 bg-gray-500 bg-opacity-50 transition-opacity" 
                     @click="closeModal"
                     aria-hidden="true"></div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div x-show="isOpen" 
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave="ease-in duration-200"
                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
                    
                    <form :action="formAction" method="POST">
                        @csrf
                        <template x-if="mode === 'edit'">
                            <input type="hidden" name="_method" value="PUT">
                        </template>

                        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                            <div class="sm:flex sm:items-start">
                                <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                        <span x-text="mode === 'create' ? 'Create Event' : 'Edit Event'"></span>
                                    </h3>
                                    <div class="mt-4 space-y-4">
                                        <!-- Title -->
                                        <div>
                                            <x-input-label for="title" :value="__('Event Title')" />
                                            <x-text-input id="title" class="block mt-1 w-full" type="text" name="title" x-model="eventData.title" required />
                                        </div>

                                        <!-- Event Type -->
                                        <div>
                                            <x-input-label for="event_type_id" :value="__('Event Type')" />
                                            <select id="event_type_id" name="event_type_id" x-model="eventData.event_type_id" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                                <option value="">Select Type...</option>
                                                @foreach($eventTypes as $type)
                                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <!-- Date & Time -->
                                        <div>
                                            <x-input-label for="date_time" :value="__('Start Date & Time')" />
                                            <x-text-input id="date_time" class="block mt-1 w-full" type="datetime-local" name="date_time" x-model="eventData.date_time" @input="updateEndDate()" required />
                                        </div>

                                        <!-- End Date & Time -->
                                        <div>
                                            <x-input-label for="end_date_time" :value="__('End Date & Time (Optional)')" />
                                            <x-text-input id="end_date_time" class="block mt-1 w-full" type="datetime-local" name="end_date_time" x-model="eventData.end_date_time" x-bind:min="eventData.date_time" />
                                        </div>

                                        <!-- Location -->
                                        <div>
                                            <x-input-label for="location" :value="__('Location')" />
                                            <x-text-input id="location" class="block mt-1 w-full" type="text" name="location" x-model="eventData.location" placeholder="e.g. Main Hall" />
                                        </div>

                                        <!-- Details -->
                                        <div>
                                            <x-input-label for="details" :value="__('Details')" />
                                            <textarea id="details" name="details" rows="3" x-model="eventData.details" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse justify-between">
                            <div class="flex flex-row-reverse gap-2">
                                <x-primary-button type="submit" class="w-full sm:w-auto">
                                    <span x-text="mode === 'create' ? 'Create' : 'Update'"></span>
                                </x-primary-button>
                                <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" @click="closeModal">
                                    Cancel
                                </button>
                            </div>
                    </form>
                            
                            <!-- Delete Button (Edit Mode Only) -->
                            <div x-show="mode === 'edit'">
                                <form :action="deleteAction" method="POST" onsubmit="return confirm('Are you sure you want to delete this event?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:w-auto sm:text-sm">
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    
                </div>
            </div>
        </div>
    </div>
@endsection