<?php
$contactBlocks = $page->content->translation->description;
?>

@extends('layouts.master', ['view' => 'contact'])

@section('editable_content')

    <div class="contact-content">
        <div class="grid-row">
            <div class="grid-col col-12">
                @include('layouts.partials.breadcrumb')
            </div>
        </div>

        <div class="grid-row intro">
            <div class="grid-col col-5 pull-right right">
                @if(!empty($contactBlocks['mainText-right']->status))
                    <div class="grid-row full-row">
                        <div class="grid-col col-6">
                            <div class="round-portrait">
                                <figure style="background-image: url('{{$contactBlocks['mainText-right']->images[0]->large_image_url}}');"></figure>
                            </div>
                        </div>
                        <div class="grid-col col-6 pull-right">
                            {{$contactBlocks['mainText-right']->description}}
                        </div>
                    </div>
                @endif
            </div>
            <div class="grid-col col-4 left">
                @if(!empty($contactBlocks['mainText-left']->status))
                    {{$contactBlocks['mainText-left']->description}}
                @endif
            </div>
        </div>

        <div class="grid-row formholder">
            <div class="grid-col col-4 left">
                <div class="textholder">
                    <h4>{{ \Config::get('business.name') }}</h4>
                    {{ \Config::get('business.address') }}<br/>
                    {{ \Config::get('business.zip') }} {{ \Config::get('business.city') }}<br/>
                    <br/>
                    <br/>
                </div>
                <div class="letterholder">
                    <span class="footerletter">T</span><a
                            href="tel:{{ \Config::get('business.phone_call') }}">{{ \Config::get('business.phone_display') }}</a><br/>
                    <span class="footerletter">M</span><a
                            href="tel:{{ \Config::get('business.mobile_call') }}">{{ \Config::get('business.mobile_display') }}</a><br/>
                    <span class="footerletter">E</span><a
                            href="mailto:{{ \Config::get('business.email') }}">{{ \Config::get('business.email') }}</a>
                </div>
            </div>
            <div class="grid-col col-8 right">
                {{-- Form --}}
                @include('forms.contact')
            </div>
            @include('layouts.svg.bigHexagon')
        </div>

        <div class="grid-row full-row mapholder">
            <div class="col-3 pull-left headerholder">
                <h1>Waar kun je ons vinden?</h1>
            </div>
            {{-- Maps --}}
            <div id="map" class="col-7 pull-right"
                 data-googlex="{{ \Config::get('business.googlex') }}"
                 data-googley="{{ \Config::get('business.googley') }}"
            ></div>

        </div>
        <div style="clear: both;"></div>

        {{--<div class="grid-row full-row referenties">--}}
            {{--<div class="grid-col col-12 referencesLink">--}}
                {{--<a href="/referenties">Lees referenties</a>--}}
            {{--</div>--}}
        {{--</div>--}}

        @if(!empty($contactBlocks['uit-je-dak']->status))
            <div class="grid-row full-row uit-je-dak">
                <div class="grid-row">
                <div class="grid-col col-4 textholder">
                    <div class="text">
                        {{$contactBlocks['uit-je-dak']->description}}
                    </div>
                    <a href="{{$contactBlocks['uit-je-dak']->link}}"
                       class="button blue arrow">{{$contactBlocks['uit-je-dak']->link_text}}</a>
                </div>
                <div class="grid-col pull-right imgholder"
                     style="background-image: url('{{$contactBlocks['uit-je-dak']->images[0]->large_image_url}}')"></div>
                </div>
            </div>
        @endif


    </div>

@endsection

@section('extra-js')
    <script type="text/javascript" src="/js/contact.js"></script>
    <script type="text/javascript" src="/js/googleMaps.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNOGjjnAl11fYRY-y1NmpTnnTHzOoSV4o&callback=initMap"
            type="text/javascript"></script>
@endsection