@extends('frontend.master.master')

@section('content')
    <!-- FAQ Header Section with Pattern Background -->
    <section class="faq-header">
        <div class="container">
            <h1 class="faq-title">{{ $nama_menu }}</h1>
            <p class="faq-subtitle">Kami siap membantu menjawab pertanyaan Anda kapan saja.</p>
        </div>
    </section>

    <!-- Search Bar Section -->
    <section class="faq-search-section">
        <div class="container">
            <div class="faq-search-wrapper">
                <form action="" method="GET" class="faq-search-form">
                    <div class="faq-search-input-wrapper">
                        <i class="bi bi-search"></i>
                        <input type="text" name="search" class="faq-search-input" 
                               placeholder="Cari yang anda ingin pertanyakan" 
                               value="{{ request('search') }}">
                    </div>
                    <button type="submit" class="faq-search-btn">Cari</button>
                </form>
            </div>
        </div>
    </section>

    <!-- FAQ Content Section with Pattern Body Background -->
    <section class="faq-content-section">
        <div class="container">
            <div class="faq-card-wrapper">
                @forelse ($datas as $index => $item)
                    <div class="faq-accordion-item" data-aos="fade-up" data-aos-delay="{{ ($index + 1) * 50 }}">
                        <div class="faq-accordion-header" onclick="toggleFaqItem(this)">
                            <h3 class="faq-question">
                                {{ $item->text1 ?? 'Tidak Ada Konten' }}
                                @if(isset($isPreview) && $isPreview && isset($item->status))
                                    @if($item->status == 'preview')
                                        <span class="badge bg-info text-white ms-2" style="font-size: 0.65rem;">
                                            <i class="fas fa-eye me-1"></i>
                                            Preview Draft
                                        </span>
                                    @else
                                        <span class="badge {{ $item->status == 'post' ? 'bg-success' : 'bg-warning text-dark' }} ms-2" style="font-size: 0.65rem;">
                                            <i class="fas {{ $item->status == 'post' ? 'fa-check-circle' : 'fa-edit' }} me-1"></i>
                                            {{ $item->status == 'post' ? 'Published' : 'Draft' }}
                                        </span>
                                    @endif
                                @endif
                            </h3>
                            <i class="bi bi-chevron-down faq-toggle-icon"></i>
                        </div>
                        <div class="faq-accordion-body">
                            <p>{{ $item->text2 ?? 'Tidak Ada Konten' }}</p>
                        </div>
                    </div>
                @empty
                    <div class="faq-empty">
                        <i class="bi bi-question-circle"></i>
                        <p>Tidak ada FAQ yang ditemukan.</p>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            @if($datas->hasPages())
                <div class="faq-pagination">
                    <nav class="pagination-nav">
                        {{-- Previous Page Link --}}
                        @if ($datas->onFirstPage())
                            <span class="pagination-link prev disabled">Sebelumnya</span>
                        @else
                            <a href="{{ $datas->previousPageUrl() }}" class="pagination-link prev">Sebelumnya</a>
                        @endif

                        {{-- Pagination Numbers --}}
                        <div class="pagination-numbers">
                            @foreach ($datas->getUrlRange(1, $datas->lastPage()) as $page => $pageUrl)
                                @if ($page == $datas->currentPage())
                                    <span class="pagination-link active">{{ $page }}</span>
                                @else
                                    <a href="{{ $pageUrl }}" class="pagination-link">{{ $page }}</a>
                                @endif
                            @endforeach
                        </div>

                        {{-- Next Page Link --}}
                        @if ($datas->hasMorePages())
                            <a href="{{ $datas->nextPageUrl() }}" class="pagination-link next">Berikutnya</a>
                        @else
                            <span class="pagination-link next disabled">Berikutnya</span>
                        @endif
                    </nav>
                </div>
            @endif
        </div>
    </section>

    <script>
        function toggleFaqItem(element) {
            const item = element.closest('.faq-accordion-item');
            const isActive = item.classList.contains('active');
            
            // Close all items
            document.querySelectorAll('.faq-accordion-item').forEach(function(el) {
                el.classList.remove('active');
            });
            
            // If it wasn't active, open it
            if (!isActive) {
                item.classList.add('active');
            }
        }
    </script>
@endsection