@extends('admin.master')

@section('content')
<div class="mx-auto max-w-4xl">
    <div class="bg-white border border-gray-300 rounded-md p-4 sm:p-5">
        <div class="mb-5">
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Create FAQ Item</h2>
            <p class="mt-1 text-sm text-gray-600">Add FAQ item under a section</p>
        </div>

        <form action="{{ route('admin.faq-items.store') }}" method="POST">
            @csrf

            <div class="grid grid-cols-1 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Section <span class="text-red-500">*</span></label>
                    <select name="faq_section_id" class="w-full border border-gray-300 rounded px-4 py-2">
                        <option value="">Select Section</option>
                        @foreach($sections as $section)
                            <option value="{{ $section->id }}" {{ old('faq_section_id') == $section->id ? 'selected' : '' }}>
                                {{ $section->title }}
                            </option>
                        @endforeach
                    </select>
                    @error('faq_section_id')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Question <span class="text-red-500">*</span></label>
                    <input type="text"
                           name="question"
                           value="{{ old('question') }}"
                           class="w-full border border-gray-300 rounded px-4 py-2"
                           placeholder="Enter question">
                    @error('question')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Answer</label>
                    <textarea name="answer"
                              rows="5"
                              class="w-full border border-gray-300 rounded px-4 py-2"
                              placeholder="Enter answer">{{ old('answer') }}</textarea>
                    @error('answer')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Display Order</label>
                    <input type="number"
                           name="display_order"
                           value="{{ old('display_order', 0) }}"
                           class="w-full border border-gray-300 rounded px-4 py-2"
                           placeholder="Enter display order">
                    @error('display_order')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox"
                           name="is_active"
                           id="is_active"
                           value="1"
                           {{ old('is_active', 1) ? 'checked' : '' }}
                           class="h-4 w-4">
                    <label for="is_active" class="text-sm font-medium text-gray-700">Active</label>
                </div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <button type="submit" class="bg-black text-white px-5 py-2 rounded">Save</button>
                <a href="{{ route('admin.faq-sections.index') }}" class="bg-gray-200 text-gray-800 px-5 py-2 rounded text-center">Back</a>
            </div>
        </form>
    </div>
</div>
@endsection