@extends('layouts.admin')

@section('title', isset($faq) ? 'Edit FAQ' : 'Add New FAQ')

@section('admin-content')
    <!-- Page Header -->
    <div class="page-header">
        <div>
            <h3 class="page-title">{{ isset($faq) ? 'Edit FAQ' : 'Add New FAQ' }}</h3>
            <p class="text-muted mb-0">
                <a href="{{ route('admin.help-faqs.index') }}" class="text-decoration-none">
                    <i class="bi bi-arrow-left me-1"></i>Back to FAQs
                </a>
            </p>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <form action="{{ isset($faq) ? route('admin.help-faqs.update', $faq) : route('admin.help-faqs.store') }}" method="POST">
        @csrf
        @if(isset($faq))
            @method('PUT')
        @endif

        <div class="row">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0 fw-bold">FAQ Content</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="mb-4">
                            <label for="question" class="form-label fw-bold">Question <span class="text-danger">*</span></label>
                            <input type="text" 
                                   name="question" 
                                   id="question" 
                                   class="form-control form-control-lg @error('question') is-invalid @enderror" 
                                   value="{{ old('question', $faq->question ?? '') }}"
                                   placeholder="Enter the frequently asked question..."
                                   required>
                            @error('question')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="answer" class="form-label fw-bold">Answer <span class="text-danger">*</span></label>
                            <textarea name="answer" 
                                      id="answer" 
                                      class="form-control @error('answer') is-invalid @enderror" 
                                      rows="8"
                                      placeholder="Enter the answer to this question..."
                                      required>{{ old('answer', $faq->answer ?? '') }}</textarea>
                            @error('answer')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">You can use basic HTML for formatting.</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0 fw-bold">Settings</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="mb-4">
                            <label for="category" class="form-label fw-bold">Category <span class="text-danger">*</span></label>
                            <select name="category" id="category" class="form-select @error('category') is-invalid @enderror" required>
                                @foreach($categories as $key => $label)
                                    <option value="{{ $key }}" {{ old('category', $faq->category ?? 'general') == $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="sort_order" class="form-label fw-bold">Sort Order</label>
                            <input type="number" 
                                   name="sort_order" 
                                   id="sort_order" 
                                   class="form-control @error('sort_order') is-invalid @enderror" 
                                   value="{{ old('sort_order', $faq->sort_order ?? 0) }}"
                                   min="0">
                            @error('sort_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Lower numbers appear first.</small>
                        </div>

                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="is_active" 
                                       name="is_active"
                                       value="1"
                                       {{ old('is_active', $faq->is_active ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold" for="is_active">Active</label>
                            </div>
                            <small class="text-muted">Only active FAQs are shown on the Help page.</small>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <button type="submit" class="btn btn-primary-gradient w-100 mb-2">
                            <i class="bi bi-save me-2"></i>{{ isset($faq) ? 'Update FAQ' : 'Create FAQ' }}
                        </button>
                        <a href="{{ route('admin.help-faqs.index') }}" class="btn btn-outline-secondary w-100">
                            <i class="bi bi-x-lg me-2"></i>Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection