<x-app-layout>
    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">

            <div class="bg-white shadow-sm sm:rounded-lg overflow-hidden">
                <div class="p-6 text-gray-900">

                    <h1 class="text-2xl font-bold mb-6">Add New Course</h1>

                    {{-- Error Messages --}}
                    @if ($errors->any())
                        <div class="bg-red-100 text-red-800 p-4 rounded mb-6">
                            <ul class="list-disc pl-5">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.courses.store') }}" method="POST" class="space-y-6">
                        @csrf

                        {{-- Subject --}}
                        <div>
                            <label for="subject_id" class="block text-sm font-medium text-gray-700 mb-1">
                                Subject
                            </label>
                            <select id="subject_id" name="subject_id"
                                class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-200 focus:border-blue-300"
                                required>
                                <option value="">-- Choose a subject --</option>
                                @foreach ($subjects as $subject)
                                    <option value="{{ $subject->id }}"
                                        {{ old('subject_id') == $subject->id ? 'selected' : '' }}>
                                        {{ $subject->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Level --}}
                        <div>
                            <label for="level_id" class="block text-sm font-medium text-gray-700 mb-1">
                                Level
                            </label>
                            <select id="level_id" name="level_id"
                                class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-200 focus:border-blue-300"
                                required>
                                <option value="">-- Choose a level --</option>
                                @foreach ($levels as $level)
                                    <option value="{{ $level->id }}"
                                        {{ old('level_id') == $level->id ? 'selected' : '' }}>
                                        {{ $level->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Lead Teacher --}}
                        <div>
                            <label for="lead_teacher" class="block text-sm font-medium text-gray-700 mb-1">
                                Lead Teacher
                            </label>
                            <input id="lead_teacher" type="text" name="lead_teacher"
                                class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-200 focus:border-blue-300"
                                value="{{ old('lead_teacher') }}" required>
                        </div>

                        {{-- Description --}}
                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                                Description
                            </label>
                            <textarea id="description" name="description"
                                class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-200 focus:border-blue-300"
                                rows="4">{{ old('description') }}</textarea>
                        </div>

                        {{-- Save Button --}}
                        <div>
                            <button type="submit"
                                class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700
                                       font-medium text-sm shadow-sm transition">
                                Save Course
                            </button>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>
</x-app-layout>
