@extends('layouts.admin')

@section('header')
    Attendance Calendar
@endsection

@section('content')
    <div x-data="{
        isOpen: false,
        mode: 'create',
        formAction: '{{ route('events.store') }}',
        eventData: {
            id: null,
            title: '',
            details: '',
            event_type_id: {{ $otherEventTypeId }},
            date_time: '',
            end_date_time: '',
            location: '',
            is_session_note: 1
        },
        
        mode: 'create', // 'create' or 'edit'
        method: 'POST',

        openCreate(date) {
            this.mode = 'create';
            this.method = 'POST';
            this.formAction = '{{ route('events.store') }}';
            this.eventData.id = null;
            this.eventData.date_time = date + 'T18:00';
            this.eventData.end_date_time = date + 'T18:00';
            this.eventData.title = 'Session Note';
            this.eventData.details = '';
            this.eventData.location = '';
            this.isOpen = true;
        },

        openEdit(event) {
            this.mode = 'edit';
            this.method = 'PUT';
            this.formAction = '/events/' + event.id;
            
            // Format dates
            let dateStr = event.date_time ? event.date_time.slice(0, 16) : '';
            let endDateStr = event.end_date_time ? event.end_date_time.slice(0, 16) : '';

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

        closeModal() {
            this.isOpen = false;
        }
    }">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg border border-gray-200">
            <div class="p-6">
                <!-- Calendar Navigation -->
                <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">
                            {{ $currentDate->format('F Y') }}
                        </h2>
                        <p class="text-sm text-gray-500">Track member check-ins by date</p>
                    </div>
                    
                    <div class="flex items-center space-x-2 bg-gray-100 p-1 rounded-xl shadow-inner">

                        <!-- Month Navigation -->
                        <div class="flex items-center space-x-1 pl-1">
                            <a href="{{ route('sessions.index', ['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('sessions.index', ['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('sessions.index', ['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>

                        <!-- Month Navigation -->
                        <div class="flex items-center space-x-1 pr-2 border-r border-gray-300">
                            <a href="{{ route('sessions.index', ['month' => $month, '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="M11 19l-7-7 7-7m8 14l-7-7 7-7" /></svg>
                            </a>
                            <span class="text-sm font-bold w-12 text-center text-gray-700">{{ $year }}</span>
                            <a href="{{ route('sessions.index', ['month' => $month, '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="M13 5l7 7-7 7M5 5l7 7-7 7" /></svg>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 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-[80px] sm:min-h-[100px]"></div>
                        @endfor

                        <!-- Active days -->
                        @for($day = 1; $day <= $daysInMonth; $day++)
                            @php
                                $dateObj = $currentDate->copy()->day($day);
                                $dateStr = $dateObj->format('Y-m-d');
                                $count = $sessionCounts[$dateStr] ?? 0;
                                $hasNotes = isset($sessionNotes[$dateStr]);
                                $isToday = $dateStr === now()->format('Y-m-d');
                            @endphp
                            <div class="bg-white min-h-[80px] sm:min-h-[100px] p-2 sm:p-3 relative group transition-all hover:z-10 hover:shadow-xl hover:scale-[1.02]">
                                <div class="flex justify-between items-center">
                                    <span class="inline-flex items-center justify-center w-7 h-7 text-sm font-bold rounded-full {{ $isToday ? 'bg-indigo-600 text-white shadow-md' : 'text-gray-600 group-hover:text-indigo-600' }}">
                                        {{ $day }}
                                    </span>
                                    @if($hasNotes)
                                        <button @click="openEdit({{ $sessionNotes[$dateStr]->first() }})" class="flex items-center gap-1 px-2 py-1 bg-indigo-50 border border-indigo-100 rounded text-xs text-indigo-600 font-medium shadow-sm hover:bg-indigo-100 transition-colors" title="Edit Session Notes">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                            </svg>
                                            <span>Notes</span>
                                        </button>
                                    @endif
                                </div>

                                @if($count > 0)
                                    <div class="mt-2 sm:mt-4">
                                        <a href="{{ route('sessions.show', $dateStr) }}" 
                                           class="flex flex-col items-center justify-center py-2 px-1 sm:px-2 rounded-xl bg-indigo-50 border border-indigo-100 text-indigo-700 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition-all shadow-sm active:scale-95 group/btn">
                                            <span class="text-xl sm:text-2xl font-black font-display leading-none mb-0.5">{{ $count }}</span>
                                            <span class="text-[9px] sm:text-[10px] font-bold uppercase tracking-tight opacity-75 group-hover/btn:opacity-100">Stud<span class="hidden sm:inline">ents</span></span>
                                        </a>
                                    </div>
                                @elseif(!$hasNotes)
                                    <div class="absolute inset-0 flex items-center justify-center pt-6 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <button @click="openCreate('{{ $dateStr }}')" class="flex items-center gap-1 px-2 py-1 bg-gray-100/80 hover:bg-indigo-50 border border-gray-200 rounded text-xs text-gray-500 hover:text-indigo-600 font-medium shadow-sm transition-colors">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                            </svg>
                                            Add notes
                                        </button>
                                    </div>
                                @endif
                            </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-[80px] sm:min-h-[100px]"></div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Session Notes 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>
                        <input type="hidden" name="event_type_id" x-model="eventData.event_type_id">
                        <input type="hidden" name="date_time" x-model="eventData.date_time">
                        <input type="hidden" name="end_date_time" x-model="eventData.end_date_time">
                        <input type="hidden" name="location" x-model="eventData.location">
                        <input type="hidden" name="is_session_note" x-model="eventData.is_session_note">

                        <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' ? 'Add session notes' : 'Edit session notes'"></span>
                                    </h3>
                                    <div class="mt-4 space-y-4">
                                        <!-- Session Note Title (Hidden) -->
                                        <input type="hidden" name="title" x-model="eventData.title" />

                                        <!-- Details -->
                                        <div>
                                            <x-input-label for="details" :value="__('Overview')" />
                                            <textarea id="details" name="details" rows="6" 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 flex flex-col sm:flex-row items-center gap-3">
                            <div class="flex flex-row-reverse gap-2 w-full sm:w-auto sm:ml-auto sm:order-last">
                                <x-primary-button type="submit" class="w-full sm:w-auto">
                                    <span x-text="mode === 'create' ? 'Add Notes' : 'Update Notes'"></span>
                                </x-primary-button>
                                <button type="button" class="w-full sm:w-auto 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:text-sm" @click="closeModal">
                                    Cancel
                                </button>
                            </div>
                            <button type="button" x-show="mode === 'edit'" @click="if(confirm('Are you sure you want to delete these notes?')) { document.getElementById('delete-event-form').action = '/events/' + eventData.id; document.getElementById('delete-event-form').submit(); }" class="text-xs text-red-600 hover:text-red-800 font-medium underline sm:order-first">
                                Delete Notes
                            </button>
                        </div>
                    </form>
                    <form id="delete-event-form" method="POST" class="hidden">
                        @csrf
                        @method('DELETE')
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection