@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">

                    <h1>{{$page->translation->name}}</h1>

                    <p>
                        <strong>{{ \Config::get('business.name') }}</strong><span>Van Deurzen Heftrucks B.V.</span><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', ['name', 'company', 'email', 'phone', 'city', 'formMessage']);

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

            // contactForm.validate();
            contactForm.valid = true;
            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=AIzaSyAlHxsgqQ9VqOa0GrKvqdspEB8fd5o76dY" type="text/javascript"></script>

@endsection