@extends('layout.app')

@section('title')
{!! Translation::transText('faq.page-title', 'FAQ') !!}
@endsection

@section('content')
<div class="wrapper" style="background-image: url(/front/dist/img/faq-bg.png)">
    <main>
        @include('parts.header-panel')
        @include('parts.header')

        <div class="breadcrumbs">
            <div class="container">
                <div class="breadcrumbs__inner">
                    <ul class="breadcrumbs__list">
                        <li><a href="/">{!! Translation::trans('breadcrumbs.home', 'Home') !!}</a></li>
                        <li><span>{!! Translation::trans('faq.breadcrumbs.currentTape', 'FAQ') !!}</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <section class="faq">
            <div class="container">
                <div class="faq__inner">
                    <h1>{!! Translation::trans('faq.title', 'Перевірте відповіді на найпоширеніші запитання, якщо вам потрібна додаткова інформація, зв\'яжіться з нами.') !!}</h1>
                    <p>
                        {!! Translation::trans('faq.p', 'FAQ1') !!}
                    </p>
                    <div class="faq__inner-acordion">
                        @foreach($faqs as $faq)
                        <div class="faq__inner-acordion-item">
                            <div class="faq__inner-acordion-item-title">
                                <h5>{{ $faq->title }}</h5>
                            </div>
                            <div class="faq__inner-acordion-item-text">
                                {!! $faq->description !!}
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        <section class="contact-us" id="contact-us" style="background-image: url(/front/dist/img/circular-lines-bg-contact.svg)">
            <div class="container">
                <div class="contact-us__inner">
                    <div class="contact-us__inner-text">
                        <h2>{!! Translation::trans('home.contact-us.title', 'Chcesz skorzystać sie z konsultacji?') !!}</h2>
                        <p>
                            {!! Translation::trans('home.contact-us.description', 'Wypełnij poniższy formularz kontaktowy, a my skontaktujemy się
                            z Tobą tak szybko, jak to możliwe.') !!}
                        </p>
                    </div>

                    <div class="contact-us__inner-form">
                        <form action="">
                            <div class="contact-us__inner-form-item">
                                <label>{!! Translation::trans('home.contact-us.name', 'Imię i Nazwisko') !!}</label>
                                <input type="text" class="global-input" placeholder="{!! Translation::transText('home.contact-us.name.placeholder', 'Wpisz swoje imię i Nazwisko') !!}" />
                            </div>
                            <div class="contact-us__inner-form-item">
                                <label>{!! Translation::trans('home.contact-us.email', 'E-mail') !!}</label>
                                <input type="email" class="global-input" placeholder="{!! Translation::transText('home.contact-us.email.placeholder', 'Wpisz swój adres e-mail') !!}" />
                            </div>
                            <div class="contact-us__inner-form-item">
                                <label>{!! Translation::trans('home.contact-us.phone', 'Telefon') !!}</label>
                                <input type="tel" class="global-input" placeholder="{!! Translation::transText('home.contact-us.phone.placeholder', 'Wpisz swój telefon') !!}" />
                            </div>
                            <div class="checkbox-items">
                                <div class="checkbox-item">
                                    {!! Translation::trans('faq.contact-us.check', 'Potwierdzam, że zapoznałem się i akceptuję ogólne
                                    warunki korzystania ze strony internetowej
                                    epat.pl/polityka-prywatnosci') !!}
                                </div>
                                <div class="checkbox-item">
                                    <input class="checkbox-radio" id="two" type="checkbox" />
                                    <label for="two">{!! Translation::trans('faq.contact-us.check2', 'Potwierdzam,że zapoznałem się z polityką prywatności
                                        strony internetowej epat.pl/polityka-prywatnosci') !!}</label>
                                </div>

                            </div>
                            <button class="golden-btn arrow primary" type="submit">
                                {!! Translation::trans('home.contact-us.submit', 'Przejdź do katalogu') !!}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
</div>
@endsection
@section('javascript')
<script>
    const faqItemTitle = document.querySelectorAll(
        '.faq__inner-acordion-item-title'
    )
    faqItemTitle.forEach((item) => {
        item.onclick = () => {
            const parent = item.parentNode

            if (parent.classList.contains('active')) {
                parent.classList.remove('active')
            } else {
                document
                    .querySelectorAll('.faq__inner-acordion-item')
                    .forEach((child) => {
                        child.classList.remove('active')
                    })
                parent.classList.toggle('active')
            }
        }
    })
</script>
@stop