@extends('frontend.layouts.master')
@section('title')
{{ $page->title ?? 'Frequently Asked Questions' }} - Bangladesh Unbound
@endsection

@section('meta_title', $page->meta_title ?? 'Frequently Asked Questions - Bangladesh Unbound')
@section('meta_description', $page->meta_description ?? 'Frequently Asked Questions - Bangladesh Unbound')
@section('meta_keywords', $page->meta_keyword ?? 'Frequently Asked Questions - Bangladesh Unbound')

@section('content')
<section class="py-5 text-white tours-hero bg-success">
    <div class="container">
        <h1 class="mb-3 text-center display-4 fw-bold">Frequently Asked Questions</h1>
        <p class="text-center lead mb-0">Find answers to common questions about our services</p>
    </div>
</section>
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <div class="container">
        <div class="text-white d-flex align-items-center">
            <i class="bi bi-house-door me-2"></i>
            <a href="{{ route('home.home') }}" class="text-white text-decoration-none me-2">Home</a>
            <span class="me-2">•</span>
            <span>{{ $page->title ?? 'Frequently Asked Questions' }}</span>
        </div>
    </div>
</nav>

<section class="py-5 tours-content">
    <div class="container">
        <!-- Search Section -->
        <div class="row mb-5">
            <div class="col-lg-8 mx-auto">
                <div class="search-box">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" id="faqSearch" class="form-control border-start-0"
                            placeholder="Search questions or keywords...">
                        <button class="btn btn-outline-secondary" type="button" id="clearSearch" style="display: none;">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="faq-masonry" id="faqGroupsContainer">
            @forelse($faqGroups as $group)
            <div class="faq-group-item">
                <div class="card faq-group-card h-100 border-0 shadow-sm">
                    <div class="card-header bg-light border-bottom-0 py-3">
                        <h3 class="h5 mb-0 group-name d-flex align-items-center">
                            <i class="bi bi-question-circle me-2"></i>
                            {{ $group->name }}
                        </h3>
                    </div>
                    <div class="card-body">
                        @if($group->description)
                        <p class="text-muted mb-3 description">{!! limit_text($group->description, 200) !!}</p>
                        @endif

                        <div class="accordion faq-accordion" id="faqAccordion{{ $group->id }}">
                            @forelse($group->faqs as $index => $faq)
                            <div class="accordion-item border-0 mb-2">
                                <h4 class="accordion-header faq-questions-header"
                                    id="heading{{ $group->id }}{{ $index }}">
                                    <button class="accordion-button collapsed rounded border" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#collapse{{ $group->id }}{{ $index }}"
                                        aria-expanded="false" aria-controls="collapse{{ $group->id }}{{ $index }}">
                                        <span class="faq-questions">{{ $faq->question }}</span>
                                    </button>
                                </h4>
                                <div id="collapse{{ $group->id }}{{ $index }}" class="accordion-collapse collapse"
                                    aria-labelledby="heading{{ $group->id }}{{ $index }}"
                                    data-bs-parent="#faqAccordion{{ $group->id }}">
                                    <div class="accordion-body bg-light rounded-bottom">
                                        <p class="mb-0 faq-answer">{!! $faq->answer !!}</p>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="text-center py-3">
                                <i class="bi bi-info-circle text-muted display-6"></i>
                                <p class="text-muted mt-2 mb-0">No questions available in this category</p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center py-5 w-100">
                <i class="bi bi-question-octagon display-1 text-muted"></i>
                <h3 class="mt-3 text-muted">No FAQ Groups Available</h3>
                <p class="text-muted">We're working on adding frequently asked questions. Please check back later.</p>
            </div>
            @endforelse
        </div>

        <!-- No Results Message (Hidden by Default) -->
        <div id="noResults" class="text-center py-5" style="display: none;">
            <i class="bi bi-search display-1 text-muted"></i>
            <h3 class="mt-3 text-muted">No Results Found</h3>
            <p class="text-muted">We couldn't find any questions matching your search. Try different keywords.</p>
        </div>
    </div>
</section>
@endsection

<style>
    .faq-group-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 12px;
        overflow: hidden;
    }

    .faq-group-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }

    .accordion-button {
        background: white;
        border: 1px solid #e9ecef;
        font-size: 0.95rem;
        padding: 1rem 1.25rem;
    }

    .accordion-button:not(.collapsed) {
        background: #f8f9fa;
        border-color: #dee2e6;
        color: #0d6efd;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
        border-color: #86b7fe;
    }

    .accordion-body {
        border: 1px solid #e9ecef;
        border-top: none;
        border-radius: 0 0 8px 8px;
    }

    .search-box {
        position: relative;
    }

    .search-box .input-group-text {
        border-radius: 8px 0 0 8px;
    }

    .search-box .form-control {
        border-radius: 0 8px 8px 0;
    }

    .faq-group-item {
        animation: fadeInUp 0.5s ease;
    }

    .description {
        font-size: 0.9rem !important;
    }

    .group-name {
        color: rgb(12 128 64) !important;
    }

    .accordion-button:not(.collapsed) {
        background-color: #e8e8e8 !important;
        box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
        border-radius: 7px 7px 0 0 !important;
    }

    .accordion-button:focus {
        box-shadow: none !important;
        border-color: none !important;
        border-radius: 7px 7px 0 0 !important;
    }

    .faq-questions-header {
        color: #555 !important;
        font-size: 1.1rem !important;
    }

    .faq-answer {
        color: #555 !important;
        font-size: 1rem !important;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .faq-group-card {
            margin-bottom: 1.5rem;
        }

        .accordion-button {
            padding: 0.75rem 1rem;
            font-size: 0.9rem;
        }
    }

    .faq-masonry {
        column-count: 2;
        column-gap: 1rem;
    }

    .faq-group-item {
        break-inside: avoid;
        margin-bottom: 1.3rem;
    }

    @media (min-width: 768px) {
        .faq-masonry {
            column-count: 2;
        }
    }

    @media (min-width: 1200px) {
        .faq-masonry {
            column-count: 2;
        }
    }

    .faq-group-card {
        display: inline-block;
        width: 100%;
    }
</style>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('faqSearch');
    const clearSearch = document.getElementById('clearSearch');
    const faqGroupsContainer = document.getElementById('faqGroupsContainer');
    const noResults = document.getElementById('noResults');
    const faqGroups = document.querySelectorAll('.faq-group-item');

    // Search functionality
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase().trim();

        // Show/hide clear button
        clearSearch.style.display = searchTerm ? 'block' : 'none';

        let visibleGroups = 0;

        faqGroups.forEach(group => {
            const questions = group.querySelectorAll('.accordion-button');
            let groupHasMatch = false;

            questions.forEach(question => {
                const questionText = question.textContent.toLowerCase();
                const parentAccordion = question.closest('.accordion-item');

                if (questionText.includes(searchTerm)) {
                    parentAccordion.style.display = '';
                    groupHasMatch = true;

                    // Highlight matching text
                    if (searchTerm) {
                        const regex = new RegExp(`(${searchTerm})`, 'gi');
                        question.innerHTML = question.textContent.replace(regex, '<mark class="bg-warning">$1</mark>');
                    } else {
                        // Remove highlighting
                        question.innerHTML = question.textContent;
                    }
                } else {
                    parentAccordion.style.display = 'none';
                }
            });

            // Show/hide entire group based on matches
            if (groupHasMatch || !searchTerm) {
                group.style.display = '';
                visibleGroups++;
            } else {
                group.style.display = 'none';
            }
        });

        // Show no results message if no groups are visible
        if (visibleGroups === 0 && searchTerm) {
            noResults.style.display = 'block';
            faqGroupsContainer.style.display = 'none';
        } else {
            noResults.style.display = 'none';
            faqGroupsContainer.style.display = '';
        }
    });

    // Clear search functionality
    clearSearch.addEventListener('click', function() {
        searchInput.value = '';
        clearSearch.style.display = 'none';
        searchInput.dispatchEvent(new Event('input'));

        // Remove all highlighting
        document.querySelectorAll('.accordion-button mark').forEach(mark => {
            mark.outerHTML = mark.textContent;
        });
    });

    // Auto-expand accordion when searching
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase().trim();
        if (searchTerm) {
            // Expand all accordions when searching to show results
            document.querySelectorAll('.accordion-collapse').forEach(collapse => {
                if (collapse.previousElementSibling.querySelector('.accordion-button:not(.collapsed)')) {
                    // Already expanded, do nothing
                } else {
                    const bsCollapse = new bootstrap.Collapse(collapse, {
                        toggle: false
                    });
                    bsCollapse.show();
                }
            });
        }
    });
});
</script>
@endpush