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

                    <figure class="logo">
                        <a href="/">
                            <img alt="logo" src="/img/cranendocnk_actief_logo.svg">
                        </a>
                    </figure>

                    <p>
                        <strong>{{ \Config::get('business.name') }}</strong><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>

                    <p class="social-media">
                        <strong>{{ KommaLang::get('socials') }}</strong>

                        @foreach(['facebook','instagram','linkedin','youtube','twitter','vimeo'] as $item)
                            @if(\Config::get('business.'.$item) != null)
                                <a class="{{$item}}" target="_blank"
                                   href="{{  \Config::get('business.'.$item) }}">
                                    <span class="icon"></span>
                                    <span class="text">@lang('translations.'.$item)</span>
                                </a>
                            @endif
                        @endforeach
                    </p>


                    {{--<h3>@lang('translations.openingHours')</h3>--}}

                    {{--<ul class="opening-hours">--}}
                        {{--@for($i=1; $i<=7;$i++)--}}
                            {{--<li @if(\Carbon\Carbon::now()->dayOfWeek == ($i)) class="active" @endif>--}}
                                {{--<span class="day">@lang('calender.days.'.$i)</span>--}}
                                {{--<span class="hour">--}}
                                    {{--@if(Config::get('business.opening_hour_'.$i) != null)--}}
                                        {{--{{ Config::get('business.opening_hour_'.$i) }}--}}
                                    {{--@else--}}
                                        {{--@lang('translations.closed')--}}
                                    {{--@endif--}}
                                {{--</span>--}}
                            {{--</li>--}}
                        {{--@endfor--}}
                    {{--</ul>--}}

                </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?v=2"></script>
    <script>
        //Define form
        var contactForm = new Form('contactForm', ['name', 'email','city', '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" type="text/javascript"></script>--}}

@endsection