@extends('layouts.dashboard')
@section('title', __('Course FAQs'))
@section('page_title', __('Course FAQs'))

@section('content')
<div class="mb-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
        <h4 class="mb-0 fw-bold">{{ __('FAQs') }} — {{ $course->title }}</h4>
        <p class="text-muted small mb-0">{{ __('Manage frequently asked questions for this course') }}</p>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-semibold py-3">{{ __('Add FAQ') }}</div>
            <div class="card-body">
                <form action="{{ route('instructor.courses.faqs.store', $course) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">{{ __('Question') }}</label>
                        <input type="text" name="question" class="form-control @error('question') is-invalid @enderror" value="{{ old('question') }}" required>
                        @error('question') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Answer') }}</label>
                        <textarea name="answer" rows="4" class="form-control @error('answer') is-invalid @enderror" required>{{ old('answer') }}</textarea>
                        @error('answer') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <button class="btn btn-primary w-100">
                        <i class="bi bi-plus-lg me-1"></i> {{ __('Add FAQ') }}
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-semibold py-3">{{ __('Existing FAQs') }} ({{ $faqs->count() }})</div>
            <div class="card-body">
                @if ($faqs->isEmpty())
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-question-circle d-block mb-2" style="font-size:2rem;"></i>
                        {{ __('No FAQs yet. Add your first one using the form.') }}
                    </div>
                @else
                    <div class="accordion" id="faqAccordion">
                        @foreach ($faqs as $faq)
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $faq->id }}">
                                        {{ $faq->question }}
                                    </button>
                                </h2>
                                <div id="faq{{ $faq->id }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p class="mb-3">{{ $faq->answer }}</p>
                                        <form action="{{ route('instructor.faqs.destroy', $faq) }}" method="POST" data-confirm="{{ __('Delete this FAQ?') }}">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger">
                                                <i class="bi bi-trash me-1"></i> {{ __('Delete') }}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection