@extends('layout')

@section('title', 'Tambah Kategori')

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

    {{-- Page Title --}}
    <h2 class="mb-2 text-3xl font-bold text-center text-gray-900">Tambah Kategori Penelitian</h2>
    <p class="mb-8 text-center text-gray-600">Lengkapi informasi kategori penelitian Anda</p>

    {{-- Form --}}
    <form id="wizardForm" method="POST" action="{{ route('research_categories.store') }}" class="space-y-8">
        @csrf

        <div class="space-y-6 step">
            <div>
                <label class="block mb-2 font-medium text-gray-700">
                    Nama Kategori <span class="text-red-500">*</span>
                </label>
                <input type="text" name="category_name" value="{{ old('category_name') }}"
                    class="w-full px-4 py-3 border rounded-lg @error('category_name') border-red-500 @enderror" required>
                @error('category_name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block mb-2 font-medium text-gray-700">
                    Deskripsi <span class="text-red-500">*</span>
                </label>
                <textarea name="description" rows="4"
                    class="w-full px-4 py-3 border rounded-lg @error('description') border-red-500 @enderror" required>{{ old('description') }}</textarea>
                @error('description')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- Form Actions --}}
        <div class="flex items-center justify-between pt-6 border-t border-gray-200">
            <a href="{{ route('research_categories.index') }}"
                class="px-6 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                Batal
            </a>

            <div class="space-x-2">
                <button type="submit" class="px-6 py-2 text-sm font-medium text-white rounded-lg bg-primary-600 hover:bg-primary-700">
                    Simpan Kategori
                </button>
            </div>
        </div>
    </form>
</div>
@endsection