@extends('frontend.layouts.app')

@php
    use App\Helpers\Helper;
@endphp

@section('title', 'FAQs')

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('pages.faq'),
        'subHeading' => Helper::contentText('pages.faq_description'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('route.faq'),
            'route' => route('faqs'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    @php $isEn = app()->getLocale() == 'en'; @endphp

    <section class="container-page section-y">
        <x-section-heading align="center" :eyebrow="Helper::contentText('pages.faq')"
            :title="Helper::content('pages.faq_help_heading')"
            :description="Helper::contentText('pages.faq_description')" />

        @if ($faqCategories->isEmpty())
            <p class="text-center text-gray-600 py-10">
                {{ $isEn ? 'No FAQs available yet.' : 'अहिलेसम्म कुनै प्रश्न उपलब्ध छैन।' }}
            </p>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-12 grid-gap items-start">

                {{-- Categories: pills on small screens, sticky list on desktop --}}
                <aside class="lg:col-span-4 xl:col-span-3 lg:sticky lg:top-28">
                    <p class="hidden lg:block text-xs font-bold tracking-wider uppercase text-gray-500 mb-3">
                        {{ $isEn ? 'Categories' : 'श्रेणीहरू' }}
                    </p>

                    <div role="tablist" aria-label="{{ $isEn ? 'FAQ categories' : 'FAQ श्रेणीहरू' }}" id="faq-categories"
                        class="flex lg:flex-col gap-2 overflow-x-auto lg:overflow-visible pb-2 lg:pb-0 -mx-4 px-4 lg:mx-0 lg:px-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                        @foreach ($faqCategories as $faqCategory)
                            <button type="button" role="tab" id="faq-tab-{{ $faqCategory->id }}"
                                data-id="{{ $faqCategory->id }}" aria-selected="false" aria-controls="faq-panel"
                                class="faq-category shrink-0 lg:shrink text-left flex items-center gap-3 px-4 py-3 rounded-xl border border-gray-200 bg-white text-gray-800 font-semibold text-sm md:text-base hover:border-primary hover:text-primary whitespace-nowrap lg:whitespace-normal">
                                <i class="fa-regular fa-circle-question text-primary/70 hidden lg:inline"
                                    aria-hidden="true"></i>
                                <span class="line-clamp-2">
                                    {{ $isEn ? $faqCategory->name_en : $faqCategory->name_np ?? $faqCategory->name_en }}
                                </span>
                            </button>
                        @endforeach
                    </div>
                </aside>

                {{-- Questions --}}
                <div class="lg:col-span-8 xl:col-span-9 min-w-0">
                    <div class="relative mb-5">
                        <label for="faq-search"
                            class="sr-only">{{ $isEn ? 'Search questions' : 'प्रश्न खोज्नुहोस्' }}</label>
                        <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
                            aria-hidden="true"></i>
                        <input id="faq-search" type="search"
                            placeholder="{{ $isEn ? 'Search questions in this category' : 'यस श्रेणीमा प्रश्न खोज्नुहोस्' }}"
                            class="w-full pl-11 pr-4 py-3 rounded-xl border border-gray-300 bg-white text-sm md:text-base focus:border-primary focus:ring-1 focus:ring-primary">
                    </div>

                    <div id="faq-panel" role="tabpanel" aria-live="polite" class="faq-content min-h-[12rem]">
                        {{-- loaded via AJAX --}}
                        <div class="space-y-3" aria-hidden="true">
                            @for ($i = 0; $i < 4; $i++)
                                <div class="h-16 rounded-xl bg-gray-100 animate-pulse"></div>
                            @endfor
                        </div>
                    </div>

                    <p id="faq-empty" class="hidden text-center text-gray-600 py-10">
                        {{ $isEn ? 'No questions match your search.' : 'तपाईंको खोजसँग मेल खाने प्रश्न भेटिएन।' }}
                    </p>
                </div>
            </div>
        @endif
    </section>

    {{-- Contact Details --}}
    @include('frontend.partials.contact-detail')
@endsection

@push('styles')
    <style>
        .faq-category[aria-selected="true"] {
            background: var(--brand-primary);
            border-color: var(--brand-primary);
            color: #fff;
        }

        .faq-category[aria-selected="true"] i {
            color: var(--brand-accent);
        }

        /* Accordion */
        .faq-item summary {
            list-style: none;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item[open] {
            border-color: var(--brand-primary);
            box-shadow: 0 8px 20px -8px rgba(4, 67, 53, 0.25);
        }

        .faq-item .faq-icon {
            transition: transform 0.25s ease;
        }

        .faq-item[open] .faq-icon {
            transform: rotate(45deg);
        }

        .faq-answer p {
            margin-bottom: 0.75rem;
        }

        .faq-answer ul {
            list-style: disc;
            padding-left: 1.25rem;
            margin-bottom: 0.75rem;
        }

        .faq-answer ol {
            list-style: decimal;
            padding-left: 1.25rem;
            margin-bottom: 0.75rem;
        }

        .faq-answer a {
            color: var(--brand-primary);
            text-decoration: underline;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            const $tabs = $('.faq-category');
            if (!$tabs.length) return;

            function selectTab($tab) {
                $tabs.attr({
                    'aria-selected': 'false',
                    tabindex: '-1'
                });
                $tab.attr({
                    'aria-selected': 'true',
                    tabindex: '0'
                });
                $('#faq-panel').attr('aria-labelledby', $tab.attr('id'));
                $('#faq-search').val('');
                getFaq($tab.data('id'));
            }

            // AJAX loader for FAQs
            function getFaq(id) {
                let faqUrl = "{{ route('get-faq', ':id') }}".replace(":id", id);
                $.ajax({
                    type: "GET",
                    url: faqUrl,
                    success: function(response) {
                        $('.faq-content').html(response);
                        $('#faq-empty').addClass('hidden');
                    },
                    error: function() {
                        $('.faq-content').html(
                            '<p class="text-center text-red-600 py-10">Failed to load FAQs. Please try again.</p>'
                        );
                    }
                });
            }

            $tabs.on('click', function() {
                selectTab($(this));
            });

            // Arrow-key navigation between categories
            $('#faq-categories').on('keydown', '.faq-category', function(e) {
                const keys = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'];
                if (!keys.includes(e.key)) return;
                e.preventDefault();
                const i = $tabs.index(this);
                const next = (e.key === 'ArrowDown' || e.key === 'ArrowRight') ?
                    (i + 1) % $tabs.length : (i - 1 + $tabs.length) % $tabs.length;
                const $n = $tabs.eq(next);
                $n.trigger('focus');
                selectTab($n);
            });

            // Search within the loaded category
            $('#faq-search').on('input', function() {
                const q = $(this).val().trim().toLowerCase();
                let shown = 0;
                $('.faq-item').each(function() {
                    const match = !q || $(this).text().toLowerCase().includes(q);
                    $(this).toggleClass('hidden', !match);
                    if (match) shown++;
                });
                $('#faq-empty').toggleClass('hidden', shown > 0 || $('.faq-item').length === 0);
            });

            selectTab($tabs.first());
        });
    </script>
@endpush