@extends('layouts.app')

@section('title', 'Holiday Parking - What We Offer')

@section('content')

    @include('partials.header', ['title' => __('pages.faq.title')])

    <section class="text-fontBase font-poppins">
        {{-- Flex Container --}}
        <div class="w-full flex items-center mx-auto py-12">
            {{-- Flex container --}}
            <div
                class="container flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-3 py-4 px-4 md:px-0 mx-auto">
                {{-- Left --}}
                {{-- Accordian Start --}}
                <div class="flex-initial flex-col space-y-4 w-full md:w-2/3">
                    <div class="flex flex-col">
                        {{-- Accordian --}}
                        <div class="flex flex-col space-y-2">
                            <div class="container lg:mx-auto px-4">
                                <div class="w-full mx-auto space-y-4">
                                    @foreach($faqs as $faq)
                                        {{-- Question {{ $loop->iteration }} --}}
                                        <div class="w-full border-2 border-brandGreen rounded-xl px-4 md:p-0">
                                            <div id="mainHeading"
                                                 class="flex justify-between items-center w-full md:px-6 py-1">
                                                <div>
                                                    <p class="flex justify-center items-center font-semibold text-sm text-fontBase">
                                                        {{ $faq['question'] }}
                                                    </p>
                                                </div>
                                                <button
                                                    aria-label="toggler"
                                                    class="focus:outline-none focus:ring-0"
                                                    data-menu
                                                >
                                                    <img
                                                        class="transform"
                                                        src="{{ asset('assets/icons/ic_chevron_up.svg') }}"
                                                        alt="toggler"
                                                    >
                                                </button>
                                            </div>
                                            <div id="menu" class="hidden py-4 px-4 w-full">
                                                <p class="text-sm text-fontBase font-light">
                                                    {{ $faq['answer'] }}
                                                </p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Right --}}
                <div class="flex-initial w-full md:w-1/3">
                    <img
                        src="{{ asset('assets/bg/bg_img_faq.svg') }}"
                        alt="FAQ"
                        class="w-auto"
                    />
                </div>
            </div>
        </div>
    </section>
@endsection