@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto space-y-6">
    <div>
        <h2 class="text-3xl font-black text-slate-800 tracking-tight">Create Subject Main Category</h2>
        <p class="text-slate-500 mt-1">Add a new category for organizing subjects</p>
    </div>

    <div class="glass-panel overflow-hidden rounded-2xl bg-white border border-slate-200 shadow-lg shadow-slate-200/50 p-6">
        <form action="{{ route('admin.subject_main_categories.store') }}" method="POST">
            @csrf
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Category Name *</label>
                    <input type="text" name="name" value="{{ old('name') }}" required 
                        class="w-full px-4 py-2 rounded-lg border @error('name') border-red-500 @else border-slate-300 @enderror focus:ring-2 focus:ring-indigo-500">
                    @error('name')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Description</label>
                    <textarea name="description" rows="4" 
                        class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500">{{ old('description') }}</textarea>
                    @error('description')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex gap-3 pt-4">
                    <button type="submit" class="btn-primary flex-1">
                        <span class="material-icons-round text-sm mr-2">save</span>
                        Create Category
                    </button>
                    <a href="{{ route('admin.subject_main_categories.index') }}" class="btn-secondary flex-1 text-center">
                        Cancel
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection