@extends('frontend.layouts.amp')
@section('title', "FAQ's - " . app_name())
@php
    $url = URL::current();
@endphp
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
@endpush
@section('content')
    <div class="container">
        <div class="row">
            <div class="page-section-title">
                <h2>FREQUENTLY ASKED QUESTIONS</h2>
            </div>
        </div>
        @if($data['faqs'])
            <section>
                <div class="mt--30">
                    <div class="container">
                        <amp-accordion animate expand-single-section>
                            @foreach($data['faqs'] as $faq)
                                <section class="amp-accordion__section" >
                                    <h6 class="amp-accordion__header" style="padding: 5px 10px;border-radius: 2px;font-size:12px;font-weight:800;">
                                        <svg class="svg-icon amp-accordion__header-expand" width="15" height="15" viewBox="0 0 20 20">
                                            <path d="M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10"></path>
                                        </svg>
                                        <svg class="svg-icon amp-accordion__header-collapse" width="15" height="15" viewBox="0 0 20 20">
                                            <path d="M14.776,10c0,0.239-0.195,0.434-0.435,0.434H5.658c-0.239,0-0.434-0.195-0.434-0.434s0.195-0.434,0.434-0.434h8.684C14.581,9.566,14.776,9.762,14.776,10 M18.25,10c0,4.558-3.693,8.25-8.25,8.25c-4.557,0-8.25-3.691-8.25-8.25c0-4.557,3.693-8.25,8.25-8.25C14.557,1.75,18.25,5.443,18.25,10 M17.382,10c0-4.071-3.312-7.381-7.382-7.381C5.929,2.619,2.619,5.93,2.619,10c0,4.07,3.311,7.382,7.381,7.382C14.07,17.383,17.382,14.07,17.382,10"></path>
                                        </svg>
                                        {{ $faq->question }}
                                    </h6>
                                    <p style="padding: 10px 5px;">{{ $faq->answer }}</p>
                                </section>
                            @endforeach
                        </amp-accordion>
                    </div>
                </div>
            </section>
        @else
            <p><strong>Sorry!</strong>, no FAQ's found.</p>
        @endif
    </div><br>
@endsection