@extends('layouts.admin_main')

@section('content')
<div class="container">
    <h1>{{ $faqSection->title ?: 'FAQ Section Title' }}</h1>
    <p>{{ $faqSection->description ?: 'FAQ Section Description' }}</p>

    @if(session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    <form action="{{ route('faqs.store') }}" method="POST">
        @csrf
        <div class="mb-3">
            <label for="title" class="form-label">Section Title</label>
            <input type="text" name="title" id="title" class="form-control" value="{{ $faqSection->title }}" required>
        </div>

        <div class="mb-3">
            <label for="description" class="form-label">Section Description</label>
            <textarea name="description" id="description" class="form-control" required>{{ $faqSection->description }}</textarea>
        </div>

        <h2>FAQs</h2>
        <div id="faq-repeater">
            @foreach ($faqs as $index => $faq)
                <div class="faq-item mb-3">
                    <input type="text" name="faqs[{{ $index }}][question]" value="{{ $faq->question }}" placeholder="Question" class="form-control mb-1" required>
                    <textarea name="faqs[{{ $index }}][answer]" placeholder="Answer" class="form-control" required>{{ $faq->answer }}</textarea>
                </div>
            @endforeach
            @if ($faqs->isEmpty())
                <!-- If no FAQs exist, show a default empty input field -->
                <div class="faq-item mb-3">
                    <input type="text" name="faqs[0][question]" placeholder="Question" class="form-control mb-1" required>
                    <textarea name="faqs[0][answer]" placeholder="Answer" class="form-control" required></textarea>
                </div>
            @endif
        </div>
        <button type="button" id="add-faq" class="btn btn-primary">Add Another FAQ</button>
        <button type="submit" class="btn btn-success mt-3">Save FAQs</button>
    </form>
</div>

<script>
    document.getElementById('add-faq').addEventListener('click', function() {
        const faqRepeater = document.getElementById('faq-repeater');
        const faqCount = faqRepeater.children.length;
        const newFaq = document.createElement('div');
        newFaq.classList.add('faq-item', 'mb-3');
        newFaq.innerHTML = `
            <input type="text" name="faqs[${faqCount}][question]" placeholder="Question" class="form-control mb-1" required>
            <textarea name="faqs[${faqCount}][answer]" placeholder="Answer" class="form-control" required></textarea>
        `;
        faqRepeater.appendChild(newFaq);
    });
</script>
@endsection