@extends('site.master')

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

@section('hero-body')
    @include('site.components.heroHeading', [
               'heroHeadingTitle' => ( !empty($page->translation->visual_name) ? $page->translation->visual_name : $page->translation->name),
           ])
@endsection

@section('content')

    {{ $page->languageImages() }}

    @include('site.components.hero', ['modifiers' => ['tight', 'light-bg']])

    <div class="c-body  o-blocks">
        <div class="l-split  o-block  o-contact   @if(isset($send) && $send) l-split--invert-on-mobile @endif">
            <div class="l-split__column">
                <div class="o-contact__information">
                    <p>@lang('site/contact.text')</p>


                    <div class="c-brick">
                        <h5>@lang('site/contact.statusTitle')</h5>
                        <div class="u-margin-top-16 o-contact__buttons">

                            @include('site.components.buttonLink', [
                              'modifiers' => ['filled'],
                              'buttonText' => __('site/contact.contact_support.title') ,
                              'buttonLink' => __('site/contact.contact_support.link') ,
                              'preventBlank' => true
                            ])

                            @include('site.components.buttonLink', [
                              'modifiers' => ['icon-external'],
                              'buttonText' => __('site/contact.supportButtonLabel'),
                              'buttonLink' => __('site/global.supportLink'),
                              'iconOverrule' => 'external'
                           ])
                        </div>

                        <a class="c-status u-margin-top-16" href="https://status.rentman.io/" target="_blank">
                            <span class="c-status__indicator" data-status="none"></span>
                            <p class="c-status__label">@lang('site/contact.status')</p>
                        </a>
                        <br>
                        <h6>@lang('site/contact.openingTimes')</h6><br>
                        <p>@lang('site/contact.openingTime')</p><br>
                        @if(\App::getLocale() != 'de')
                            <p>@lang('site/contact.openingTimeNA')</p>
                        @endif
                    </div>
                </div>

                <div class="o-contact__business">
                    <h5>{{ config('site.company.fullName') }}</h5>
                    <div class="o-contact__offices">
                        <div class="o-contact__office">
                            <h6 class="o-contact__office-heading">{{ mb_strtolower(__('site/contact.headOffice')) }}</h6>
                            <p>
                                {{ config('site.offices.main.address') }}<br/>
                                {{ config('site.offices.main.zip') }} {{ config('site.offices.main.city') }}<br/>
                                @if(\App::getLocale() != 'nl')
                                    @lang('site/global.netherlands')
                                @else
                                    &nbsp;
                                @endif
                            </p>
                            <p>
                                <a class="c-ninja-link" href="mailto:{{ __('site/global.email') }}">@lang('site/global.email')</a></br>
                                <a class="c-ninja-link" href="tel:{{ __('site/global.phone.call') }}">@lang('site/global.phone.display')</a>
                            </p>
                        </div>
                        <div class="o-contact__office">
                            <h6 class="o-contact__office-heading">{{ mb_strtolower(__('site/contact.canadaAndUsa')) }}</h6>
                            <p>
                                {{ config('site.offices.canada.address') }}, {{ config('site.offices.canada.city') }}<br>
                                {{ config('site.offices.canada.zip') }} <br>
                                @lang('site/global.canada')
                            </p>
                            @if(\App::getLocale() == 'en')
                                <p>
                                    <a class="c-ninja-link" href="tel:{{__('site/global.canadaPhone.call')}}">{{ __('site/global.canadaPhone.display') }}</a>
                                </p>
                            @endif
                        </div>
                    </div>
                    <dl class="o-contact__commercial">
                        <dt>@lang('site/contact.chamber_of_commerce'):</dt><dd>{{ \App::getLocale() == 'de' ? config('site.company.ustIdNr') : config('site.company.kvk') }}</dd>
                        <dt>@lang('site/contact.vat_number'):</dt><dd>{{ config('site.company.vat') }}</dd>
                        <dt>@lang('site/contact.bank_number'):</dt><dd>{{ config('site.company.bank') }}</dd>
                    </dl>
                </div>

            </div>
            <div class="l-split__column   @if(isset($send) && $send) l-split__column--flex-start @endif">

                @if(isset($send) && $send)

                    <header class="c-form__header">
                        <h2 class="c-form__title">@lang('site/contact.thanks')</h2>
                        <p class="c-form__subtitle">@lang('site/contact.thanksMessage')</p>
                    </header>

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

        </div>

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

        <div class="l-grid  o-block-bg">
            @include('site.components.dataSecurity')
        </div>
    </div>

    <script src="https://zjjr5syq7hf3.statuspage.io/embed/script.js"></script>

@endsection