@extends('site.master')

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

@section('content')

    <div class="o-body  t-contact">

        <div class="o-hero">
            <div class="u-bg-wrapper">
                <div class="u-bg-triangle-primary"></div>
                <div class="l-contain">
                    <div class="t-contact__header">
                        <p class="o-hero__title">{{ $page->translation->name }}</p>
                        <h1 class="o-hero__header">@lang('site/contact.heading')</h1>
                    </div>
                </div>
            </div>
        </div>

        <div class="u-bg-wrapper">
            <div class="u-bg-triangle-neutral"></div>
            <div class="o-contact">

                <div class="o-contact__main">
                    <div class="o-contact__body">
                        <h2 class="o-contact__subheading">@lang('site/contact.companyInfo')</h2>

                        <div class="o-contact__row">
                            <p>{{ config('site.company.address') }}</p>
                            <p>{{ config('site.company.postal_code') }} {{ config('site.company.city') }}</p>
                            @if(\App::getLocale() != 'nl')
                                <p>@lang('site/global.netherlands')</p>
                            @endif
                        </div>

                        <div class="o-contact__row">
                            @include('site.components.button', [
                                'buttonText' => __('site/contact.googleMapsLinkLabel'),
                                'buttonLink' => 'https://goo.gl/maps/cRREei2KqBcB26gj9',
                                'type' => 'text',
                                'modifiers' => ['icon'],
                            ])
                        </div>

                        <div class="o-contact__row">
                            <div class="c-data">
                                <a class="c-data__link" data-icon="phone"
                                   title="@lang('site/global.phoneNumber')"
                                   href="tel:{{ config('site.company.phone.call') }}">{{ config('site.company.phone.display') }}</a>
                                <a class="c-data__link" data-icon="mail"
                                   title="@lang('site/global.emailAddress')"
                                   href="mailto:{{ config('site.company.email') }}">{{ config('site.company.email') }}</a>
                            </div>
                        </div>

                        <div class="o-contact__row">
                            <p>{{ config('site.company.mailbox.address') }}</p>
                            <p>{{ config('site.company.mailbox.postal_code') }} {{ config('site.company.mailbox.city') }}</p>
                        </div>

                        <div class="o-contact__row">
                            <p>@lang('company.chamber_of_commerce'): {{ config('site.company.chamber_of_commerce') }}</p>
                            <p>@lang('company.vat_number'): {{ config('site.company.vat') }}</p>
                        </div>
                    </div>

                    <div class="o-contact__form  t-contact__form">
                        @if(isset($send))

                            <div class="o-form">
                                <div class="o-form__container">
                                    <div class="o-form__body">
                                        <h3 class="o-form__title">@lang('site/contact.send.title')</h3>

                                        <div class="u-spacing-pv  u-color-neutral--0">
                                            @lang('site/contact.send.description')
                                        </div>

                                    </div>
                                </div>
                            </div>
                        @else
                            @include('site.organisms.forms.contact')
                        @endif
                    </div>

                    <div class="o-contact__extra">

                        <div class="o-ci  o-ci--is-reversed">
                            <div class="o-ci__content">
                                <div class="o-ci__body">

                                    <h2 class="o-contact__subheading">@lang('site/contact.openingHours.heading')</h2>
                                    <div class="o-contact__timeslot">
                                        <p class="o-contact__timeframe">@lang('site/contact.openingHours.weekly.label')</p>
                                        <p class="o-contact__time">@lang('site/contact.openingHours.weekly.time')</p>
                                    </div>
                                    <div class="o-contact__timeslot">
                                        <p class="o-contact__timeframe">@lang('site/contact.openingHours.friday.label')</p>
                                        <p class="o-contact__time">@lang('site/contact.openingHours.friday.time')</p>
                                    </div>

                                </div>
                            </div>
                            <div class="o-ci__image">
                                <div class="c-hex-shape  c-hex-shape--ornament" data-pos="right">
                                    <img class="c-hex-shape__image" src="/img/contact.png" alt="">
                                </div>
                            </div>
                        </div>

                    </div>


{{--                    <div class="o-contact__map  js-google-map" id="map"--}}
{{--                         data-google-lat="{{ config('site.company.googleMaps.lat') }}"--}}
{{--                         data-google-lng="{{ config('site.company.googleMaps.lng')  }}">--}}
{{--                    </div>--}}


                </div>

            </div>
        </div>

        @include('site.organisms.calloutBar', ['showCalloutBarOrnament' => true])
    </div>

@endsection