@extends('layouts.master')


@section('editable_content')

    <div class="after-menu">

        <header id="top">
            <span class="overlay animation-part">
        </span>

            <div class="grid-row">
                <section class="content grid-col col-6">
                    <span class="content-overlay animation-part"></span>

                    <div class="logo-wrapper">

                        <a class="logo" href="/">
                            <img class="icon" alt="logo" src="/img/logo-beeldmerk.svg">
                            <img class="full-logo" alt="logo" src="/img/logo.svg">
                        </a>

                        <div class="logo-text">
                            <a href="/">
                                <img alt="logo text" src="/img/logo-text.svg"/>
                            </a>
                        </div>

                        <div class="breadcrumb-placeholder">
                            @include('layouts.partials.breadcrumb')
                        </div>

                    </div>

                    <h1>@lang('translations.contactTitle')</h1>
                    <div class="text">
                        <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>
                    </div>

                    <a class="button scroll-to internalLink" href="#contactForm" style="background-color: #f05032;">@lang('translations.contactForm')</a>

                    <h3 style="margin-top: 40px; position: relative;">Bekijk ook</h3>

                    <a class="button" href="/vacatures">@lang('translations.vacancies')</a><br/>
                    <a class="button" href="/familie">@lang('translations.family')</a>
                </section>
            </div>

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

        </header>

        @include('layouts.partials.contact.contactPersons')


        <div class="contact-page-info grid-row">

            <section class="info grid-col">

                <div class="opening-hours">
                    <h3>@lang('translations.opening-hours')</h3>

                    <ul>
                        @foreach(['monday', 'tuesday', 'wednesday', 'thursday', 'friday'] as $key => $day)
                            <li @if(\Carbon\Carbon::now()->dayOfWeek == ($key+1)) class="active" @endif >
                                <span>@lang('calender.days.'.($key+1))</span>
                                <b>{{\Config::get('business.hours_'.$day)}}@if($day === 'friday')*@endif</b>
                            </li>
                        @endforeach
                        <li class="note" >* 1x per maand  (bel even van tevoren)</li>
                    </ul>
                </div>

                <div class="financial-records">
                    <h3>@lang('translations.financial-records')</h3>
                    <div class="placeholder">
                        <p>
                            <span>@lang('translations.accountNr'):</span>
                            <b>{{Config::get('business.account_number')}}</b>
                        </p>
                        <p>
                            <span>@lang('translations.bic'):</span> <b>{{Config::get('business.bic')}}</b>
                        </p>
                        <p>
                            <span>@lang('translations.kvk'):</span> <b>{{Config::get('business.kvk')}}</b>
                        </p>
                    </div>
                </div>

                <div class="personal">

                    <h3>{{$page->content->translation->description['personal']->typeName}}</h3>

                    {{$page->content->translation->description['personal']->description}}

                </div>

            </section>

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

        </div>

        <div class="contact-disclaimer">
            <div class="grid-row">

                <div class="text grid-col">
                    {{$page->content->translation->description['optional_info']->description}}
                </div>


                <div class="year-document grid-col">
                    <p>@lang('translations.downloadRecentYearDocument')</p>
                    <a target="_blank" class="download"
                       href="{{$page->document->file->path}}">@lang('translations.download')<span></span></a>

                </div>
            </div>
        </div>

        @include('layouts.partials.becomeMemberOrFriend')

    </div>

@endsection

@section('extra-js')
    <script type="text/javascript" src="/js/form.js"></script>
    <script>

        //Define form
        var contactForm = new Form('contactForm', ['name', 'phone', 'email', 'formMessage']);

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

            contactForm.validate();
            console.log(contactForm.valid);
            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>--}}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFK-J3TKx8th_zFKHWQYwlBXIZJhJClRY" type="text/javascript"></script>
@endsection