@extends('admin.layouts.app')

@section('title', 'Edit FAQ Category')

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.faq-categories.index') }}"
            class="text-slate-400 hover:text-white flex items-center gap-2 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Back to FAQ Categories
        </a>
        <h1 class="text-2xl font-bold text-white mt-4">Edit FAQ Category</h1>
    </div>

    <div class="max-w-4xl mx-auto">
        @if ($errors->any())
            <div class="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl mb-6">
                <ul class="list-disc ml-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.faq-categories.update', $faqCategory) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="glass-card rounded-2xl p-8 space-y-6">
                <!-- Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-slate-300 mb-2">Category Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name', $faqCategory->name) }}"
                        placeholder="e.g., General Information"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all"
                        required>
                </div>

                <!-- Slug -->
                <div>
                    <label for="slug" class="block text-sm font-medium text-slate-300 mb-2">Slug (Optional)</label>
                    <input type="text" name="slug" id="slug" value="{{ old('slug', $faqCategory->slug) }}"
                        placeholder="e.g., general-information"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    <p class="text-[11px] text-slate-500 mt-1">Leave blank to auto-generate from name.</p>
                </div>

                <!-- Sort Order -->
                <div>
                    <label for="sort_order" class="block text-sm font-medium text-slate-300 mb-2">Sort Order</label>
                    <input type="number" name="sort_order" id="sort_order"
                        value="{{ old('sort_order', $faqCategory->sort_order) }}"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                </div>

                <!-- Status -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-4">Status</label>
                    <div class="flex gap-6">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="status" value="active" {{ old('status', $faqCategory->status) == 'active' ? 'checked' : '' }}
                                class="w-4 h-4 bg-slate-900 border-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <span class="text-sm text-slate-300">Active</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="status" value="inactive" {{ old('status', $faqCategory->status) == 'inactive' ? 'checked' : '' }}
                                class="w-4 h-4 bg-slate-900 border-slate-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900">
                            <span class="text-sm text-slate-300">Inactive</span>
                        </label>
                    </div>
                </div>

                <div class="pt-4 flex justify-end gap-3">
                    <a href="{{ route('admin.faq-categories.index') }}"
                        class="px-6 py-4 text-slate-400 hover:text-white transition-colors text-center">Cancel</a>
                    <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-12 py-4 rounded-xl shadow-lg shadow-blue-500/20 transition-all">
                        Update Category
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection