@extends('layouts.app')
@section('title', 'Class Management')
@section('page-title', 'Class Management')

@section('content')
<div class="space-y-6">

    {{-- Success/Error Messages --}}
    @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
    @if(session('error'))
    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-exclamation-circle mr-1"></i> {{ session('error') }}
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- Left: Create Class Form --}}
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-plus-circle text-primary-600 mr-2"></i> Add New Class
                </h3>
                <form method="POST" action="{{ route('admin.classes.store') }}" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Class Name <span class="text-red-500">*</span></label>
                        <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g., Grade 1, Class 10"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm @error('name') border-red-500 @enderror">
                        @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Section</label>
                        <input type="text" name="section" value="{{ old('section') }}" placeholder="e.g., A, B, C"
                               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">Class Teacher</label>
                        <select name="class_teacher_id" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                            <option value="">None</option>
                            @foreach($teachers as $teacher)
                                <option value="{{ $teacher->id }}" {{ old('class_teacher_id') == $teacher->id ? 'selected' : '' }}>
                                    {{ $teacher->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Room No.</label>
                            <input type="text" name="room_number" value="{{ old('room_number') }}" placeholder="e.g., 101"
                                   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">Capacity</label>
                            <input type="number" name="capacity" value="{{ old('capacity') }}" placeholder="40" min="1"
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        </div>
                    </div>
                    <button type="submit" class="w-full bg-primary-600 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-primary-700 transition">
                        <i class="fas fa-save mr-1"></i> Create Class
                    </button>
                </form>
            </div>
        </div>

        {{-- Right: Classes List --}}
        <div class="lg:col-span-2 space-y-4">
            @if($academicYear)
                <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-2 rounded-xl text-sm">
                    <i class="fas fa-calendar mr-1"></i> Academic Year: <strong>{{ $academicYear->name ?? $academicYear->start_date . ' - ' . $academicYear->end_date }}</strong>
                </div>
            @endif

            @forelse($classes as $class)
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5" x-data="{ editing: false, assigningSubjects: false }">
                {{-- Class Header --}}
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-primary-100 flex items-center justify-center">
                            <i class="fas fa-chalkboard text-primary-600"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">{{ $class->full_name }}</h4>
                            <p class="text-xs text-gray-500">
                                {{ $class->students_count }} student{{ $class->students_count !== 1 ? 's' : '' }}
                                @if($class->classTeacher) &bull; Teacher: {{ $class->classTeacher->name }} @endif
                                @if($class->room_number) &bull; Room: {{ $class->room_number }} @endif
                                @if($class->capacity) &bull; Capacity: {{ $class->capacity }} @endif
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button @click="assigningSubjects = !assigningSubjects; editing = false"
                                class="text-xs bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg hover:bg-blue-100 transition">
                            <i class="fas fa-book mr-1"></i> Subjects
                        </button>
                        <button @click="editing = !editing; assigningSubjects = false"
                                class="text-xs bg-yellow-50 text-yellow-700 px-3 py-1.5 rounded-lg hover:bg-yellow-100 transition">
                            <i class="fas fa-edit mr-1"></i> Edit
                        </button>
                        @if($class->students_count === 0)
                        <form method="POST" action="{{ route('admin.classes.destroy', $class) }}" class="inline"
                              onsubmit="return confirm('Delete this class?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-xs bg-red-50 text-red-700 px-3 py-1.5 rounded-lg hover:bg-red-100 transition">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                        @endif
                    </div>
                </div>

                {{-- Assigned Subjects Display --}}
                @if($class->subjects->isNotEmpty())
                <div class="mt-3 flex flex-wrap gap-2">
                    @foreach($class->subjects as $subject)
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
                            {{ $subject->name }}
                            @if($subject->pivot->teacher_id)
                                <span class="text-gray-400 ml-1">
                                    ({{ $teachers->firstWhere('id', $subject->pivot->teacher_id)?->name ?? '?' }})
                                </span>
                            @endif
                        </span>
                    @endforeach
                </div>
                @endif

                {{-- Edit Form (collapsible) --}}
                <div x-show="editing" x-cloak class="mt-4 pt-4 border-t border-gray-100">
                    <form method="POST" action="{{ route('admin.classes.update', $class) }}" class="space-y-3">
                        @csrf @method('PUT')
                        <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">Name</label>
                                <input type="text" name="name" value="{{ $class->name }}" required
                                       class="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">Section</label>
                                <input type="text" name="section" value="{{ $class->section }}"
                                       class="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">Class Teacher</label>
                                <select name="class_teacher_id" class="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm">
                                    <option value="">None</option>
                                    @foreach($teachers as $teacher)
                                        <option value="{{ $teacher->id }}" {{ $class->class_teacher_id == $teacher->id ? 'selected' : '' }}>{{ $teacher->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">Room</label>
                                <input type="text" name="room_number" value="{{ $class->room_number }}"
                                       class="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">Capacity</label>
                                <input type="number" name="capacity" value="{{ $class->capacity }}" min="1"
                                       class="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm">
                            </div>
                        </div>
                        <div class="flex justify-end gap-2">
                            <button type="button" @click="editing = false" class="px-3 py-1.5 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200">Cancel</button>
                            <button type="submit" class="px-3 py-1.5 text-xs text-white bg-primary-600 rounded-lg hover:bg-primary-700">Save Changes</button>
                        </div>
                    </form>
                </div>

                {{-- Assign Subjects Form (collapsible) --}}
                <div x-show="assigningSubjects" x-cloak class="mt-4 pt-4 border-t border-gray-100">
                    <form method="POST" action="{{ route('admin.classes.assign-subjects', $class) }}" class="space-y-3">
                        @csrf
                        <p class="text-sm font-medium text-gray-700 mb-2">Assign Subjects & Teachers</p>
                        <div class="space-y-2 max-h-64 overflow-y-auto">
                            @foreach($subjects as $idx => $subject)
                            @php
                                $assigned = $class->subjects->firstWhere('id', $subject->id);
                                $assignedTeacherId = $assigned?->pivot?->teacher_id;
                            @endphp
                            <div class="flex items-center gap-3 bg-gray-50 rounded-lg px-3 py-2">
                                <input type="hidden" name="subjects[{{ $idx }}][subject_id]" value="{{ $subject->id }}">
                                <label class="flex items-center gap-2 min-w-[150px]">
                                    <span class="text-sm font-medium text-gray-700">{{ $subject->name }}</span>
                                    <span class="text-xs text-gray-400">({{ $subject->code }})</span>
                                </label>
                                <select name="subjects[{{ $idx }}][teacher_id]" class="flex-1 border border-gray-300 rounded px-2 py-1 text-xs">
                                    <option value="">— Teacher —</option>
                                    @foreach($teachers as $teacher)
                                        <option value="{{ $teacher->id }}" {{ $assignedTeacherId == $teacher->id ? 'selected' : '' }}>
                                            {{ $teacher->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @endforeach
                        </div>
                        <div class="flex justify-end gap-2">
                            <button type="button" @click="assigningSubjects = false" class="px-3 py-1.5 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200">Cancel</button>
                            <button type="submit" class="px-3 py-1.5 text-xs text-white bg-blue-600 rounded-lg hover:bg-blue-700">Save Subject Assignments</button>
                        </div>
                    </form>
                </div>
            </div>
            @empty
            <div class="bg-white rounded-xl shadow-sm p-12 border border-gray-100 text-center text-gray-500">
                <i class="fas fa-school text-4xl mb-3"></i>
                <p>No classes created yet. Use the form to add your first class.</p>
            </div>
            @endforelse
        </div>
    </div>
</div>
@endsection