@extends('frontend.layouts.app')
@section('title', $data['faqs']->title)
@php
    $url = URL::current();
@endphp
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
    <link rel="stylesheet" href="{{asset('design/assets/css/faqstyle.css')}}">
@endpush

@if (trim($data['faqs']->meta_description) != null && $data['faqs']->meta_description != 'NULL')
    @section('meta_description', $data['faqs']->meta_description)
    {{-- @section('meta_keywords', $data['product']->meta_keywords) --}}
@endif

@push('schema')
    @component('frontend.layouts.schema')
        {{-- <script type="application/ld+json"> --}}
        {
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": [
                @foreach($data['faqs'] as $key=>$faq)
                    {
                    "@type": "Question",
                    "name": " {{ $faq->question }}",
                    "acceptedAnswer": {
                        "@type": "Answer",
                        "text": "{{ $faq->answer }}"
                        }
                    }
                    @if($key < count($data['faqs'])-1)
                        ,
                    @endif
                @endforeach
            ]
        }
        {{-- </script> --}}
    @endcomponent
@endpush

@section('content')

    <section class="blogHeroSection py-5">
        <div class="container pt-3">
            <div class="row mx-0">
                <div class="col-md-12">
                    <div class="breadcrumbSection">
                        <a href="/">Home</a> / <span>Faq’s</span>
                    </div>
                    <div class="mainTitle">
                        Frequently Asked Questions
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="faqMainSection py-5">
        <div class="container pt-5">
            <div class="row">
                <div class="col-md-12">
                    <div class="faqContainer">
                        <div class="faqInner">
                            <div class="accordion" id="accordionExample">
                                @foreach ($data['faqs'] as $key => $faq)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{ $faq->id }}">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $faq->id }}" aria-expanded="true" aria-controls="collapse{{ $faq->id }}">
                                                {{ $faq->question }}
                                            </button>
                                        </h2>
                                        <div id="collapse{{ $faq->id }}" class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}" aria-labelledby="heading{{ $faq->id }}" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                {!! $faq->answer !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="newsletter-section py-5">
        <div class="container">
            <div class="row" style="row-gap: 1rem;">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <img src="/faqimg/newsletter-main-banner.png" alt="" style="background-size: cover;">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="newsletter-right-section" style="background-image: url('/faqimg/newsletter-bg-banner.png')">
                        <div class="newsletter-long-title">
                            Join our newsletter and get <span>30% discount</span> for your next order.
                        </div>
                        <div class="newsletter-form pt-3">
                            <form action="" class="text-center">
                                <input type="email" name="email" placeholder="Your Email.." id="email">
                                <button class="form-button">Subscribe</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection