@extends('layouts.admin')

@section('content')
<div class="mb-6 flex items-center justify-between">
    <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Syllabus Builder</p>
        <h1 class="mt-2 text-3xl font-semibold text-white">Add Topic</h1>
    </div>
    <a href="{{ route('admin.topics.index') }}" class="admin-action-btn bg-slate-700 text-white">Back</a>
</div>

@if ($errors->any())
    <div class="mb-6 rounded-2xl border border-rose-400/30 bg-rose-500/10 p-4 text-rose-100">
        <ul class="list-disc list-inside text-sm">
            @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.topics.store') }}"
      class="space-y-6 rounded-2xl border border-white/10 bg-slate-900/60 p-6 backdrop-blur">
    @csrf

    <div class="grid gap-5 md:grid-cols-2">
        <div>
            <label class="block text-sm font-semibold text-slate-100">Exam Type *</label>
            <input type="text" name="exam_type" value="{{ old('exam_type') }}"
                   list="examTypeList" required placeholder="RAS"
                   class="mt-2 w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
            <datalist id="examTypeList">
                @foreach($examTypes as $t) <option value="{{ $t }}"> @endforeach
            </datalist>
        </div>

        <div>
            <label class="block text-sm font-semibold text-slate-100">Subject *</label>
            <input type="text" name="subject" value="{{ old('subject') }}"
                   list="subjectList" required placeholder="History"
                   class="mt-2 w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
            <datalist id="subjectList">
                @foreach($subjects as $s) <option value="{{ $s }}"> @endforeach
            </datalist>
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-semibold text-slate-100">Topic Name *</label>
            <input type="text" name="name" value="{{ old('name') }}" required
                   placeholder="Medieval History"
                   class="mt-2 w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-semibold text-slate-100">Description</label>
            <textarea name="description" rows="3"
                      class="mt-2 w-full p-3 rounded-lg bg-slate-800 border border-white/10 text-white">{{ old('description') }}</textarea>
        </div>

        <div>
            <label class="inline-flex items-center gap-2 text-sm font-semibold text-slate-100">
                <input type="checkbox" name="status" value="1" checked
                       class="rounded border-white/20 bg-slate-800">
                Active
            </label>
        </div>
    </div>

    <div class="flex gap-3">
        <button type="submit" class="admin-action-btn bg-green-600 text-white">Save</button>
        <a href="{{ route('admin.topics.index') }}" class="admin-action-btn bg-slate-700 text-white">Cancel</a>
    </div>
</form>
@endsection