@extends('frontend.layouts.app')
@section('title', $data['faqs']->title)
@php
    $url = URL::current();
@endphp
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
@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')
    @include('includes.partials.bread-crumbs')
    <div class="frequently-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="frequently-content">
                        <div class="frequently-desc">
                            <h1 style="line-height: 2.3rem;">Below are frequently asked questions, you may find the answer
                                for yourself</h1>
                        </div>
                    </div>
                    <!-- Begin Frequently Accordin -->
                    <div class="frequently-accordion" id="faqs_question">
                        <div id="accordion">
                            @if ($data['faqs'])
                                @foreach ($data['faqs'] as $key => $faq)
                                    <div class="card {{ $key == 0 ? 'actives' : '' }}">
                                        <div class="card-header" id="heading-{{ $faq->id }}">
                                            <h5 class="mb-0">
                                                <a style="font-weight: 500;" href="javascript:void(0)"
                                                    class="{{ $key == 0 ? '' : 'collapsed' }}" data-bs-toggle="collapse"
                                                    data-bs-target="#collapse-{{ $faq->id }}"
                                                    aria-expanded="{{ $key == 0 ? 'true' : 'false' }}"
                                                    aria-controls="collapse-{{ $faq->id }}">
                                                    {{ $faq->question }}
                                                </a>
                                            </h5>
                                        </div>
                                        <div id="collapse-{{ $faq->id }}"
                                            class="collapse {{ $key == 0 ? 'show' : '' }}"
                                            aria-labelledby="heading-{{ $faq->id }}" data-bs-parent="#accordion">
                                            <div class="card-body question-answare">
                                                {!! $faq->answer !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <p>
                                    Sorry No FAQ Found
                                </p>
                            @endif
                        </div>
                    </div>
                    <!-- Frequently Accordin End Here -->
                </div>
            </div>
        </div>
    </div>

@endsection