@extends('layouts.master')

@section('editable_content')

    <div class="color-wrapper">

        @include('layouts.partials.navigation', ['shadow' => true])

        <div class="contact-content">

            <div class="background"></div>

            <div class="grid-row">

                <div class="contact-info grid-col">

                    {{  $page->content->left->description }}

                    <p>
                        {{ \Config::get('business.name') }}<br/>
                        {{ \Config::get('business.address') }}<br/>
                        {{ \Config::get('business.zip') }} {{ \Config::get('business.city') }}<br/>
                        {{ \Config::get('business.country') }}<br/>
                        <br/>
                        <a href="tel:{{ \Config::get('business.phone_call') }}">{{ \Config::get('business.phone_display') }}</a><br/>
                        <a href="mailto:{{ \Config::get('business.email') }}">{{ \Config::get('business.email') }}</a>
                    </p>

                </div>

                {{-- Form --}}
                @include('forms.contact')

            </div>

        </div>

    </div>



    {{-- Maps --}}
    <div id="map"
         data-googlex="{{ \Config::get('business.googlex') }}"
         data-googley="{{ \Config::get('business.googley') }}"
    ></div>


@endsection

@section('extra-js')
    <script src="/js/form.js"></script>
    <script>
        //Define form
        var contactForm = new Form('contactForm',  ['firstname', 'lastname', 'email', 'formMessage']);

        // Submit button
        document.querySelector('#contactForm .submit').addEventListener('click', function () {

            contactForm.validate();
            if (contactForm.valid) contactForm.send();

        });
    </script>

    <script type="text/javascript" src="/js/googleMaps.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDM-L-3UjGB9SrHQVBm6LvNEbwQTbY_X-A" type="text/javascript"></script>

@endsection