@extends('frontend.layouts.app')
@section('title', __('faqs.faqs') . ' ' . __('faqs.title_suffix'))
@section('meta', __('faqs.meta_description'))

@section('content')
    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">{{ __('faqs.faqs') }}</h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route(name: 'homepage') }}" class="text-white font-bold">{{ __('faqs.home') }}</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <p class="text-white font-bold hover:cursor-pointer">{{ __('faqs.faqs') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->

    <!-- content -->
    <section class="min-h-[60vh] flex flex-col">
        <div class="max-w-7xl mx-auto text-center pt-10 mb-12 px-4 sm:px-6 lg:px-8">
            <div>
                <!-- Subtitle -->
                <p
                    class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                    {{ __('faqs.need_answers') }} </p>

                <!-- Main Title -->
                <h2
                    class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                    <span class="relative inline-block text-[#5da174]">
                        <svg viewBox="0 0 52 24" fill="currentColor"
                            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                            <defs>
                                <pattern id="get-in-touch-pattern" x="0" y="0" width=".135" height=".30">
                                    <circle cx="1" cy="1" r=".7"></circle>
                                </pattern>
                            </defs>
                            <rect fill="url(#get-in-touch-pattern)" width="52" height="24"></rect>
                        </svg>
                        <span class="relative text-2xl lg:text-3xl font-extrabold text-primary"> {{ __('faqs.faqs') }}
                        </span>
                    </span>
                </h2>
            </div>

            <!-- Description -->
            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto text-gray-700">
                {{ __('faqs.faqs_description') }}
            </p>

            <!-- FAQ List -->
            <div class="flex flex-col gap-4 sm:gap-6 lg:gap-8 my-10">

                @foreach ($faqs as $faq)
                    <div x-data="{ open: false }"
                        class="bg-white shadow-lg rounded-2xl overflow-hidden transition-transform duration-300 hover:shadow-xl hover:-translate-y-1 border-l-2 border-primary">

                        <!-- FAQ Question -->
                        <button @click="open = !open"
                            class="w-full flex justify-between items-center px-6 py-4 text-left text-lg sm:text-xl font-semibold text-gray-900 border-b border-gray-200 hover:bg-gray-50 transition-colors duration-200">
                            <span>{!! app()->getLocale() == 'np' ? $faq->question_np : $faq->question_en !!}</span>

                            <svg :class="{ 'rotate-180': open }"
                                class="w-12 h-12 sm:w-6 sm:h-6 transition-transform duration-300 transform text-gray-500"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>

                        <!-- FAQ Answer -->
                        <div x-show="open" x-transition class="px-6 py-4 text-gray-700 text-base sm:text-lg bg-gray-50">
                            {!! app()->getLocale() == 'np' ? $faq->answer_np : $faq->answer_en !!}
                        </div>
                    </div>
                @endforeach

            </div>
        </div>


    </section>
@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>

    <script>
        function toggleDescription() {
            const shortDesc = document.getElementById('short-description');
            const fullDesc = document.getElementById('full-description');
            const readMoreBtn = document.getElementById('read-more-btn');

            if (shortDesc.classList.contains('hidden')) {
                shortDesc.classList.remove('hidden');
                fullDesc.classList.add('hidden');
                readMoreBtn.textContent = "{{ __('faqs.read_more') }}";
            } else {
                shortDesc.classList.add('hidden');
                fullDesc.classList.remove('hidden');
                readMoreBtn.textContent = "{{ __('faqs.read_less') }}";
            }
        }
    </script>
@endpush