@extends('frontend.layouts.app')

@section('title')
    Faq - {{ config('app.name') }}
@endsection

@section('content')
    <!-- Start breadcrumb section -->
    <section class="hero__slider--section">
        <div class="slider__thumbnail--style5 position-relative">
            <img class="slider__thumbnail--img__style5  banner-height" src="assets/img/faq/call-center.png" alt="slider-img">
            <div class="hero__content--style5 text-center banner-text-center">
                <h2 class="hero__content--style5__title h1 faq">Frequently Asked Question</h2>
            </div>
        </div>
    </section>

    <!-- End breadcrumb section -->

    <!-- faq page section start -->
    <section class="faq__section section--padding bg-dark-green">

        <div class="container faq-section">
            <div class="row row-cols-1">
                <div class="col">
                    <div class="breadcrumb__content text-center">
                        <h1 class="breadcrumb__content--title">FAQ</h1>
                        <ul class="breadcrumb__content--menu d-flex justify-content-center">
                            <li class="breadcrumb__content--menu__items"><a href="{{ route('frontend.index') }}">Home</a>
                            </li>
                            <li class="breadcrumb__content--menu__items"><span>FAQ</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>



        <div class="container faq-section2">
            <div class="faq__section--inner">
                <div class="face__step one" id="accordionExample">

                    <div class="row">
                        @if ($data)
                            @foreach ($data as $section)
                                <div class="col-lg-6">
                                    <h2 class="face__step--title h3 mb-30 ">{{ $section['name'] }}</h2>
                                    @foreach ($section['details'] as $details)
                                        <div class="accordion__container">
                                            <div class="accordion__items">
                                                <h3 class="accordion__items--title">
                                                    <button
                                                        class="faq__accordion--btn accordion__items--button  bg-dark-green">
                                                        {{ $details->title }}
                                                        <svg class="menu__arrowdown--icon accordion__items--button__icon"
                                                            xmlns="http://www.w3.org/2000/svg" width="12" height="7.41"
                                                            viewBox="0 0 12 7.41">
                                                            <path d="M16.59,8.59,12,13.17,7.41,8.59,6,10l6,6,6-6Z"
                                                                transform="translate(-6 -8.59)" fill="currentColor"
                                                                opacity="0.7">
                                                            </path>
                                                        </svg>
                                                    </button>
                                                </h3>
                                                <div class="accordion__items--body">
                                                    <p class="accordion__items--body__desc">
                                                        {{ $details->detail }}

                                                    </p>
                                                </div>
                                            </div>

                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- faq page section end -->


    <!-- End shipping section -->
@endsection