@extends('layouts.admin')

@section('title', 'Add FAQ')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.faqs') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to FAQs
        </a>
        <h1 class="page-title">Add FAQ</h1>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.faqs.store') }}">
            @csrf

            <div class="form-section">
                <h3 class="form-section-title">Question & Answer</h3>
                <div class="form-group">
                    <label for="question" class="form-label">Question</label>
                    <input type="text" id="question" name="question" class="form-input @error('question') is-invalid @enderror" value="{{ old('question') }}" placeholder="e.g. How do I open an account?">
                    @error('question')<span class="form-error">{{ $message }}</span>@enderror
                </div>
                <div class="form-group">
                    <label for="answer" class="form-label">Answer</label>
                    <textarea id="answer" name="answer" class="form-input @error('answer') is-invalid @enderror" rows="6" placeholder="e.g. You can open an account in minutes from the registration page...">{{ old('answer') }}</textarea>
                    @error('answer')<span class="form-error">{{ $message }}</span>@enderror
                </div>
            </div>

            <div class="form-section" style="margin-top:1.5rem;">
                <h3 class="form-section-title">Display</h3>
                <div class="form-grid form-grid-2">
                    <div class="form-group">
                        <label for="sort_order" class="form-label">Sort Order</label>
                        <input type="number" id="sort_order" name="sort_order" class="form-input" value="{{ old('sort_order', 0) }}" min="0">
                        <span class="form-help">Lower numbers appear first.</span>
                    </div>
                    <div class="form-group">
                        <label class="form-label">&nbsp;</label>
                        <label class="form-check">
                            <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                            <span>Visible on website</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="form-actions" style="margin-top:2rem;">
                <button type="submit" class="btn btn-primary">Create FAQ</button>
            </div>
        </form>
    </div>
</div>
@endsection