@extends('layouts.app')

@section('body_class', 'page-faq')

@section('content')
@php
    $groupIcons = ['Donations' => 'heart', 'Volunteering' => 'users', 'About us' => 'info', 'General' => 'check'];
    $total = $groups->flatten(1)->count();
@endphp

{{-- HERO with search --}}
<section class="ihero fhero">
    <span class="chero__orb chero__orb--a" aria-hidden="true"></span>
    <span class="chero__orb chero__orb--b" aria-hidden="true"></span>
    <svg class="ihero__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-info"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">Help centre</p>
            <h1>Frequently asked <span class="hl">questions</span></h1>
            <p class="ihero__lead">Quick answers about donating, receipts, payments and volunteering.</p>
            <form class="fsearch" role="search" onsubmit="return false">
                <svg class="i fsearch__ico" aria-hidden="true"><use href="#i-search"/></svg>
                <label class="sr-only" for="faq-search">Search questions</label>
                <input class="fsearch__input" id="faq-search" type="search" placeholder="Search a question, e.g. receipt, monthly, refund" autocomplete="off" data-faq-search>
            </form>
        </div>
        <ul class="shero__chips" aria-label="About our FAQs">
            <li><strong>{{ $total }}</strong><span>Answers</span></li>
            <li><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg><span>Safe payments</span></li>
            <li><svg class="i" aria-hidden="true"><use href="#i-download"/></svg><span>Tax receipts</span></li>
        </ul>
    </div>
</section>

<section class="section fpage">
    <div class="container fpage__grid">
        <aside class="fnav">
            <p class="fnav__title">Topics</p>
            <ul class="fnav__list" role="tablist" aria-label="FAQ topics">
                <li><button class="fnav__btn is-active" type="button" data-faq-filter="all"><span class="fnav__ico"><svg class="i" aria-hidden="true"><use href="#i-grid"/></svg></span>All questions<em>{{ $total }}</em></button></li>
                @foreach ($groups as $group => $faqs)
                    <li><button class="fnav__btn" type="button" data-faq-filter="{{ \Illuminate\Support\Str::slug($group) }}"><span class="fnav__ico"><svg class="i" aria-hidden="true"><use href="#i-{{ $groupIcons[$group] ?? 'info' }}"/></svg></span>{{ $group }}<em>{{ $faqs->count() }}</em></button></li>
                @endforeach
            </ul>

            <div class="fnav__help">
                <span class="fnav__help-ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-mail"/></svg></span>
                <strong>Still have a question?</strong>
                <p>Write to us and we will get back to you.</p>
                <a class="btn btn--white btn--sm" href="{{ route('contact') }}">Contact us</a>
            </div>
        </aside>

        <div class="fcontent" data-faq-page>
            @foreach ($groups as $group => $faqs)
                <section class="fgroup" data-faq-section="{{ \Illuminate\Support\Str::slug($group) }}">
                    <h2 class="fgroup__title"><span class="fgroup__ico"><svg class="i" aria-hidden="true"><use href="#i-{{ $groupIcons[$group] ?? 'info' }}"/></svg></span>{{ $group }}<small>{{ $faqs->count() }}</small></h2>
                    <div class="fgroup__list">
                        @foreach ($faqs as $faq)
                            <details class="homefaq__item" data-faq-item data-text="{{ \Illuminate\Support\Str::lower($faq->question.' '.$faq->answer) }}">
                                <summary><span class="homefaq__n" aria-hidden="true">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span><span class="homefaq__q">{{ $faq->question }}</span><span class="homefaq__tog" aria-hidden="true"><svg class="i"><use href="#i-chevron"/></svg></span></summary>
                                <p>{{ $faq->answer }}</p>
                            </details>
                        @endforeach
                    </div>
                </section>
            @endforeach

            <div class="fempty" data-faq-empty hidden>
                <span class="fempty__ico" aria-hidden="true"><svg class="i i--xl"><use href="#i-search"/></svg></span>
                <h2>No answers found</h2>
                <p>Try another word, or write to us and we will help.</p>
                <a class="btn btn--green" href="{{ route('contact') }}">Ask us <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
            </div>
        </div>
    </div>
</section>

<section class="section section--flush fpage__cta">
    <div class="container">
        <div class="itrust reveal">
            <svg class="itrust__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-heart"/></svg>
            <div class="itrust__copy">
                <p class="kicker kicker--light">Ready to help?</p>
                <h2>Make your kindness <span class="hl">count</span></h2>
                <p>Give, volunteer or partner with us. Together we can reach more people.</p>
            </div>
            <div class="itrust__btns">
                <a class="btn btn--white btn--lg" href="{{ route('donate') }}"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Donate now</a>
                <a class="btn btn--glass btn--lg" href="{{ route('volunteer') }}"><svg class="i" aria-hidden="true"><use href="#i-users"/></svg>Volunteer</a>
            </div>
        </div>
    </div>
</section>
@endsection