<x-app-layout>

    <div class="py-6">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            {{-- Flash Messages --}}
            @if(session('error'))
                <div class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative" role="alert">
                    <span class="block sm:inline">{{ session('error') }}</span>
                </div>
            @endif

            {{-- Form Card --}}
            <div class="bg-theme-card theme-card rounded-lg shadow-sm">
                <form method="POST" action="{{ route('mentorship.sessions.update', $session) }}" id="sessionForm">
                    @csrf
                    @method('PUT')

                    {{-- Assignment Info (Read-only) --}}
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                        <h3 class="text-lg font-semibold text-theme-body mb-4">
                            <i class="fas fa-link mr-2 text-green-600"></i>Assignment
                        </h3>
                        <div class="flex items-center gap-4">
                            <div class="flex -space-x-2">
                                <img src="{{ $session->assignment->mentor->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode($session->assignment->mentor->name) . '&background=059669&color=fff&size=40' }}" 
                                     alt="{{ $session->assignment->mentor->name }}" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                                <img src="{{ $session->assignment->mentee->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode($session->assignment->mentee->name) . '&background=0d9488&color=fff&size=40' }}" 
                                     alt="{{ $session->assignment->mentee->name }}" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                            </div>
                            <div>
                                <p class="font-medium text-theme-body">{{ $session->assignment->mentor->name }} & {{ $session->assignment->mentee->name }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $session->assignment->programme->title }}</p>
                            </div>
                        </div>
                    </div>

                    {{-- Session Details --}}
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-theme-body mb-4">
                            <i class="fas fa-info-circle mr-2 text-green-600"></i>Session Details
                        </h3>
                        <div class="space-y-6">
                            {{-- Title --}}
                            <div>
                                <label for="title" class="block text-sm font-medium text-theme-body mb-1">
                                    Session Title <span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="title" id="title" value="{{ old('title', $session->title) }}" required
                                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500 @error('title') border-red-500 @enderror">
                                @error('title')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Description --}}
                            <div>
                                <label for="description" class="block text-sm font-medium text-theme-body mb-1">
                                    Description
                                </label>
                                <textarea name="description" id="description" rows="3"
                                          class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500 @error('description') border-red-500 @enderror">{{ old('description', $session->description) }}</textarea>
                                @error('description')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Session Type --}}
                            <div>
                                <label class="block text-sm font-medium text-theme-body mb-2">
                                    Session Type <span class="text-red-500">*</span>
                                </label>
                                <div class="flex gap-4">
                                    <label class="flex items-center p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50 dark:hover:bg-gray-700 {{ old('type', $session->type) == 'online' ? 'border-green-500 bg-green-50 dark:bg-green-900/20' : 'border-gray-300 dark:border-gray-600' }}">
                                        <input type="radio" name="type" value="online" {{ old('type', $session->type) == 'online' ? 'checked' : '' }} 
                                               class="w-4 h-4 text-green-600 focus:ring-green-500" onchange="toggleSessionType()">
                                        <span class="ml-3">
                                            <i class="fas fa-video text-blue-500 mr-2"></i>
                                            <span class="text-theme-body">Online Meeting</span>
                                        </span>
                                    </label>
                                    <label class="flex items-center p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50 dark:hover:bg-gray-700 {{ old('type', $session->type) == 'in_person' ? 'border-green-500 bg-green-50 dark:bg-green-900/20' : 'border-gray-300 dark:border-gray-600' }}">
                                        <input type="radio" name="type" value="in_person" {{ old('type', $session->type) == 'in_person' ? 'checked' : '' }} 
                                               class="w-4 h-4 text-green-600 focus:ring-green-500" onchange="toggleSessionType()">
                                        <span class="ml-3">
                                            <i class="fas fa-building text-purple-500 mr-2"></i>
                                            <span class="text-theme-body">In Person</span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Schedule --}}
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-theme-body mb-4">
                            <i class="fas fa-clock mr-2 text-green-600"></i>Schedule
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            {{-- Date --}}
                            <div>
                                <label for="date" class="block text-sm font-medium text-theme-body mb-1">
                                    Date <span class="text-red-500">*</span>
                                </label>
                                <input type="date" name="date" id="date" value="{{ old('date', $session->start_time?->format('Y-m-d')) }}" required
                                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500 @error('date') border-red-500 @enderror">
                                @error('date')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Start Time --}}
                            <div>
                                <label for="start_time" class="block text-sm font-medium text-theme-body mb-1">
                                    Start Time <span class="text-red-500">*</span>
                                </label>
                                <input type="time" name="start_time" id="start_time" value="{{ old('start_time', $session->start_time?->format('H:i')) }}" required
                                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500 @error('start_time') border-red-500 @enderror">
                                @error('start_time')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- End Time --}}
                            <div>
                                <label for="end_time" class="block text-sm font-medium text-theme-body mb-1">
                                    End Time <span class="text-red-500">*</span>
                                </label>
                                <input type="time" name="end_time" id="end_time" value="{{ old('end_time', $session->end_time?->format('H:i')) }}" required
                                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500 @error('end_time') border-red-500 @enderror">
                                @error('end_time')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Location --}}
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-theme-body mb-4">
                            <i class="fas fa-map-marker-alt mr-2 text-green-600"></i>Location
                        </h3>
                        
                        {{-- Online Meeting --}}
                        <div id="online-fields">
                            <label for="meeting_link" class="block text-sm font-medium text-theme-body mb-1">
                                Meeting Link
                            </label>
                            <div class="flex gap-2">
                                <input type="url" name="meeting_link" id="meeting_link" value="{{ old('meeting_link', $session->meeting_link) }}"
                                       class="flex-1 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500 @error('meeting_link') border-red-500 @enderror">
                                <button type="button" id="generate-link" class="px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 transition">
                                    <i class="fas fa-magic mr-1"></i>Generate
                                </button>
                            </div>
                            @error('meeting_link')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- In Person --}}
                        <div id="in-person-fields" class="hidden">
                            <label for="venue" class="block text-sm font-medium text-theme-body mb-1">
                                Venue
                            </label>
                            <input type="text" name="venue" id="venue" value="{{ old('venue', $session->venue) }}"
                                   class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500 @error('venue') border-red-500 @enderror">
                            @error('venue')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror

                            <div class="mt-3">
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Quick select:</p>
                                <div class="flex flex-wrap gap-2">
                                    <button type="button" class="venue-quick px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition" data-venue="Conference Room A">Conference Room A</button>
                                    <button type="button" class="venue-quick px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition" data-venue="Meeting Room B">Meeting Room B</button>
                                    <button type="button" class="venue-quick px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition" data-venue="Training Center">Training Center</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Session Notes (for completed sessions) --}}
                    @if($session->status === 'completed')
                        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                            <h3 class="text-lg font-semibold text-theme-body mb-4">
                                <i class="fas fa-sticky-note mr-2 text-green-600"></i>Session Notes
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <label for="notes" class="block text-sm font-medium text-theme-body mb-1">
                                        Notes
                                    </label>
                                    <textarea name="notes" id="notes" rows="4"
                                              class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500">{{ old('notes', $session->notes) }}</textarea>
                                </div>
                                <div>
                                    <label for="summary" class="block text-sm font-medium text-theme-body mb-1">
                                        Summary
                                    </label>
                                    <textarea name="summary" id="summary" rows="4"
                                              class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-green-500 focus:ring-green-500">{{ old('summary', $session->summary) }}</textarea>
                                </div>
                            </div>
                        </div>

                        {{-- Attendance --}}
                        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                            <h3 class="text-lg font-semibold text-theme-body mb-4">
                                <i class="fas fa-user-check mr-2 text-green-600"></i>Attendance
                            </h3>
                            <div class="space-y-4">
                                <div class="flex items-center gap-3">
                                    <input type="checkbox" name="mentor_attended" id="mentor_attended" value="1" {{ old('mentor_attended', $session->mentor_attended) ? 'checked' : '' }}
                                           class="w-4 h-4 text-green-600 rounded border-gray-300 focus:ring-green-500">
                                    <label for="mentor_attended" class="text-theme-body">{{ $session->assignment->mentor->name }} (Mentor) attended</label>
                                </div>
                                <div class="flex items-center gap-3">
                                    <input type="checkbox" name="mentee_attended" id="mentee_attended" value="1" {{ old('mentee_attended', $session->mentee_attended) ? 'checked' : '' }}
                                           class="w-4 h-4 text-green-600 rounded border-gray-300 focus:ring-green-500">
                                    <label for="mentee_attended" class="text-theme-body">{{ $session->assignment->mentee->name }} (Mentee) attended</label>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- Form Actions --}}
                    <div class="p-6 flex items-center justify-end gap-3">
                        <a href="{{ route('mentorship.sessions.show', $session) }}" 
                           class="px-6 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition">
                            Cancel
                        </a>
                        <button type="submit" class="theme-btn-primary inline-flex items-center px-6 py-2 rounded-lg">
                            <i class="fas fa-save mr-2"></i>Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        // Toggle session type fields
        function toggleSessionType() {
            const type = document.querySelector('input[name="type"]:checked').value;
            const onlineFields = document.getElementById('online-fields');
            const inPersonFields = document.getElementById('in-person-fields');

            if (type === 'online') {
                onlineFields.classList.remove('hidden');
                inPersonFields.classList.add('hidden');
            } else {
                onlineFields.classList.add('hidden');
                inPersonFields.classList.remove('hidden');
            }
        }

        // Generate meeting link
        document.getElementById('generate-link').addEventListener('click', function() {
            const randomId = Math.random().toString(36).substring(2, 15);
            document.getElementById('meeting_link').value = `https://meet.jit.si/mentorship-${randomId}`;
        });

        // Venue quick select
        document.querySelectorAll('.venue-quick').forEach(btn => {
            btn.addEventListener('click', function() {
                document.getElementById('venue').value = this.dataset.venue;
            });
        });

        // Initialize
        toggleSessionType();
    </script>
    @endpush
</x-app-layout>
