@extends('layouts.admin')

@section('title', 'Create FAQ')
@section('page-title', 'Create New FAQ')

@section('content')

<div class="mb-4">
    <a href="{{ route('admin.faqs.index') }}" class="text-blue-600 hover:text-blue-800">
        <i class="fas fa-arrow-left mr-2"></i> Back to FAQs
    </a>
</div>

<div class="bg-white rounded-lg shadow-sm p-6">
    <form action="{{ route('admin.faqs.store') }}" method="POST">
        @csrf

        <!-- Question English -->
        <div>
            <label for="question_en" class="block text-sm font-medium text-gray-700 mb-2">
                Question (English) <span class="text-red-500">*</span>
            </label>
            <input type="text" name="question_en" id="question_en" value="{{ old('question_en') }}"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('question_en') border-red-500 @enderror"
                required>
            @error('question_en')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <!-- Question Bengali -->
        <div class="mt-6">
            <label for="question_bn" class="block text-sm font-medium text-gray-700 mb-2">Question (Bengali)</label>
            <input type="text" name="question_bn" id="question_bn" value="{{ old('question_bn') }}"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('question_bn') border-red-500 @enderror">
            @error('question_bn')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <!-- Answer English -->
        <div class="mt-6">
            <label for="answer_en" class="block text-sm font-medium text-gray-700 mb-2">
                Answer (English) <span class="text-red-500">*</span>
            </label>
            <textarea name="answer_en" id="answer_en" rows="5"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('answer_en') border-red-500 @enderror"
                required>{{ old('answer_en') }}</textarea>
            @error('answer_en')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <!-- Answer Bengali -->
        <div class="mt-6">
            <label for="answer_bn" class="block text-sm font-medium text-gray-700 mb-2">Answer (Bengali)</label>
            <textarea name="answer_bn" id="answer_bn" rows="5"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('answer_bn') border-red-500 @enderror">{{ old('answer_bn') }}</textarea>
            @error('answer_bn')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
            <!-- Category -->
            <div>
                <label for="category" class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                <select name="category" id="category"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('category') border-red-500 @enderror">
                    <option value="">Select Category</option>
                    <option value="general" {{ old('category')=='general' ? 'selected' : '' }}>General</option>
                    <option value="visa" {{ old('category')=='visa' ? 'selected' : '' }}>Visa</option>
                    <option value="admission" {{ old('category')=='admission' ? 'selected' : '' }}>Admission</option>
                    <option value="language" {{ old('category')=='language' ? 'selected' : '' }}>Language</option>
                    <option value="scholarship" {{ old('category')=='scholarship' ? 'selected' : '' }}>Scholarship
                    </option>
                </select>
                @error('category')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                @enderror
            </div>

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

        <!-- Active Checkbox -->
        <div class="mt-6">
            <label class="flex items-center">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                    class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                <span class="ml-2 text-sm text-gray-700">Active</span>
            </label>
        </div>

        <!-- Submit Buttons -->
        <div class="mt-8 flex justify-end space-x-3">
            <a href="{{ route('admin.faqs.index') }}"
                class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                Cancel
            </a>
            <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                <i class="fas fa-save mr-2"></i> Create FAQ
            </button>
        </div>
    </form>
</div>

@endsection