@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="l-main">

        <div class="u-cow-spot" data-pos="left right"></div>

        {{-- Contact info block --}}
        <div class="u-wrapper">
            <div class="l-contain  o-block">

                <div class="l-double">

                    <div class="l-double__left">
                        <img class="o-duplex__image  u-clip-path" data-id="clip-path-image-1"
                             src="/img/contact/impression.jpg" alt="Impression farmfun">
                    </div>

                    <div class="l-double__right  s-text">

                        @if(session()->has('flashMessages'))
                            @foreach(session('flashMessages')->getMessages() as $flashMessage)
                                @include('site.components.note', [
                                    'modifiers' => $flashMessage['type'],
                                    'noteContent' => $flashMessage['message'],
                                ])
                            @endforeach
                        @endif

                        @if(!isset($send) || !$send)
                            <h1>{{ $page->translation->visual_name }}</h1>
                            {!! $page->translation->description !!}
                        @else
                            <h1>Bedankt voor je contactverzoek</h1>
                            <p>We proberen zo snel mogelijk contact met je op te nemen.</p>
                        @endif

                        <h3 class="o-contact__subheader">{{ config('site.company.name') }}</h3>

                        <div class="o-contact__datagrid">

                            <div data-pos="left">
                                <a href="tel:{{ site_config('phone.call') }}"
                                   class="o-contact__link  o-contact__phone">{{ site_config('phone.display') }}</a>
                                <a href="mailto:{{ site_config('email') }}"
                                   class="o-contact__link  o-contact__mail">{{ site_config('email') }}</a>
                                <p class="u-spacing-mt4">
                                    @lang('company.vat_number') {{ site_config('vat') }}
                                </p>
                            </div>

                            <div data-pos="right">
                                <p>Volg ons hier voor koe-le evenementen en nieuws</p>

                                <ul class="o-contact__social">
                                    @foreach(site_config('social') as $channelName => $channelLink)
                                        <li class="o-contact__channel  {{$channelName}}">
                                            <a class="o-contact__icon" target="_blank"
                                               title="{{ ucfirst($channelName) }}" href="{{$channelLink}}">
                                                <svg width="22" height="22">
                                                    <use href="/img/social/{{ $channelName }}.svg#{{ $channelName }}"></use>
                                                </svg>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                        </div>

                    </div>
                </div>

            </div>
        </div>

        @if(!isset($send) || !$send)



            {{-- Slanted background --}}
            <div class="u-color-primary--500  u-bg-neutral--0  u-overflow-hidden">
                @include('site.components.slant')
            </div>


            {{-- FAQ and form block   --}}
            <div class="o-questions u-mb-neg-slant-height">

                <div class="o-questions__top  u-overflow-hidden">
                    @include('site.components.slant')
                </div>

                <div class="o-questions__main">

                    <div class="o-questions__left">
                        @include('site.components.faq', [
                           'faqTitle' => 'Veelgestelde vragen',
                           'faqQuestions' => $composedQuestionsByCategories->where('code_name', 'most')->first()->questions,
                           'faqToAllButton' => true
                       ])
                    </div>

                    <div class="o-questions__right  s-text--on-dark">
                        @if(!isset($send) || !$send)
                            @include('site.organisms.forms.contact')
                        @endif
                    </div>

                </div>

            </div>
            {{-- End FAQ and form block   --}}

            <div class=" u-color-neutral--100 u-bg-secondary--900 u-overflow-hidden">
                @include('site.components.slant')
            </div>

            {{-- Location block  --}}
            <div class="u-bg-neutral--100 u-mb-neg-slant-height">
                <div class="o-location u-spacing-pb12">

                    <div class="o-location__main  u-spacing-mb2">
                        <div class="o-location__map">
                            @include('site.components.map')
                        </div>
                        <li class="o-location__content  s-text">
                            <h2>Onze locaties</h2>

                            <ul class="o-location__list">

                                @foreach($links->locations->items as $locationItem)

                                    <li class="o-location__item">
                                        <div class="o-location__icon">
                                            <a href="{{ $locationItem->getLocationLink($links) }}">
                                                <img alt="farm icon" src="/img/icon-farm-{{ ($loop->index % 3 ) + 1 }}.svg" />
                                            </a>
                                        </div>
                                        <div class="o-location__info">
                                            <h3><a class="o-location__link" href="{{ $locationItem->getLocationLink($links) }}">{{ $locationItem->translation->name }}</a></h3>
                                            <p><a class="o-location__link" href="{{ $locationItem->getLocationLink($links) }}">{{ $locationItem->street }}</a></p>
                                            <p><a class="o-location__link" href="{{ $locationItem->getLocationLink($links) }}">{{ $locationItem->postal_code }} {{ $locationItem->city }}</a></p>
                                            <div class="o-location__route">
                                                @include('site.components.button', [
                                                    'buttonType' => 'text',
                                                    'buttonIcon' => 'arrowRight',
                                                    'buttonText' => __('site/global.plan_route'),
                                                    'buttonLink' => 'https://www.google.nl/maps/dir//' . urlencode($locationItem->street . ', '. $locationItem->postal_code . ', '. $locationItem->city . ', ' . (($locationItem->country == 'BE') ? 'België': 'Nederland'))
                                                ])
                                            </div>
                                        </div>
                                    </li>

                                @endforeach

                            </ul>

                    </div>
                </div>

            </div>

            {{-- End location block --}}

        @else
            {{-- On the success page we only show the intro and the usp --}}
            @include('site.organisms.uspRow', [ 'modifiers' => 'gray-background' ])
        @endif

    </div>

@endsection