@extends('layouts.master')

@section('meta')
    @parent
    <link rel="preload" href="/img/check.png" as="image">
@endsection


@section('editable_content')

    @include('layouts.partials.brochureRow')

    @include('layouts.partials.mainText')

    <section class="location">
        <div class="grid-row">

            {{-- Contact Information --}}
            <div class="info grid-col">
                <div class="placeholder">
                    <div class="contact-info">
                        <figure>
                            <a href="/">
                                <img alt="logo" src="/img/logo_blue.svg"/>
                            </a>
                        </figure>

                        <h5>@lang('translations.projectAddress')</h5>
                        <p>
                            Oud Nieuwlandseweg<br/>Ouddorp
                            @if(\App::getLocale() == 'nl')
                                <br/><br/>(ter hoogte van de Vrijheidsweg<br/>en de Westerweg te Ouddorp)
                            @endif
                        </p>
                        <h5>@lang('translations.footerAddress')</h5>

                        <p>
                            {{ \Config::get('business.address') }}<br/>
                            {{ \Config::get('business.address_optional') }}<br/>
                            {{ \Config::get('business.zip') }} {{ \Config::get('business.city') }}

                        </p>

                        <a class="phone" href="tel:{{Config::get('business.phone_call')}}">
                            <div class="icon">
                                <span>T</span>
                            </div>
                            {{Config::get('business.phone_display')}}
                        </a>

                        <a class="mail" href="mailto:{{ \Config::get('business.email') }}">
                            <div class="icon">
                                <span>E</span>
                            </div>
                            {{ \Config::get('business.email') }}
                        </a>
                    </div>
                </div>
            </div>

            <div class="waves">
                <div class="wave">@include('svg.wave')</div>
                <div class="wave">@include('svg.wave')</div>
                <div class="wave">@include('svg.wave')</div>
            </div>

            {{-- Map --}}
            <div class="map grid-col">
                <picture>
                    <source media="(max-width: 525px)"
                            srcset="/img/backgrounds/map@0,5x.jpg">
                    <source media="(max-width: 800px)"
                            srcset="/img/backgrounds/map@0,75x.jpg">
                    <img src="/img/backgrounds/map.jpg"
                         alt="map">
                </picture>
            </div>
        </div>
    </section>

    <section class="post-content grid-row">
        <div class="invitation">
            <div class="dynamic-block content-block" data-size-type="50" data-image-location="left">
                <div class="content">
                    <p>@lang('translations.contactOpenDay.message')</p>
                    <p>@lang('translations.contactOpenDay.conversation')</p>
                </div>

                <figure class="image">
                    <div class="image-placeholder">
                        <span class="large" style="background-image: url('/img/backgrounds/houses-image.jpg');"></span>
                        <span class="medium" style="background-image: url('/img/backgrounds/houses-image@0,5x.jpg');"></span>
                        <span class="small" style="background-image: url('/img/backgrounds/houses-image@0,25x.jpg');"></span>
                    </div>
                </figure>
            </div>
        </div>
    </section>

    {{-- Form --}}

    <section class="contact-form" id="scrollToBlock">
        <div class="grid-row">
            <div class="side-image"><span class="image-placeholder"></span></div>

            <div class="grid-col form-placeholder">
                <h2>@lang('translations.contactForm')</h2>

                @if( ! $page->send )
                    @include('forms.contact')
                @else
                    <div class="content" id="success-message">
                        <p>
                            @lang('translations.contactFormThanks')
                        </p>
                    </div>
                @endif
            </div>
        </div>
    </section>



@endsection

@section('extra-js')
    <script defer src="/js/form.js?v=3"></script>

    @if( ! $page->send )
        <script defer src="/js/contactForm.js?v=3"></script>
    @else
        <script>
            $(function () {

                var body = $('html,body');

                body.animate({
                    scrollTop: $('#success-message').offset().top - 220
                }, 800);

                body.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function () {
                    body.stop();
                });

            });
        </script>
    @endif

@endsection