@extends('site.master')

@section('content')

    <header class="main">

        {{-- Content --}}
        <div class="contained-layout">

            <div class="intro col-10 centered">

                <h1>{!!__('site/contact.intro.title')!!}</h1>
                {!!__('site/contact.intro.description')!!}

                <div class="c-notification--inline-top">
                    <div class="c-notification__main">
                        <p class="c-notification__text">Nieuw adres per 1 april: Clement van Maasdijkstraat 3 in Budel (geen grap!)</p>
                    </div>
                </div>

            </div>



            <div class="phone-holder col-10 centered">
                <a class="phone" href="tel:0031495599411">Bel +31 (0)495 59 94 11</a>
            </div>

            <div class="flexable-layout">

                {{-- Company details --}}
                <div class="company-details flex-col">

                    {{-- Phone number --}}

                        <div class="data">
                            <strong>Bezoekadres</strong><br />
                            Clement van Maasdijkstraat 3<br />
                            6021 PL Budel, NL<br />
                            <a href="{!! Config::get('site.company.maps') !!}" target="_blank">Open in Google Maps</a><br />
                            <br />
                            <a href="mailto:info@komma.nl">info@komma.nl</a><br />
                            KvK Brabant 73568198<br />
                            BTW NL859581792B01
                        </div>

                </div>

                {{-- Account manangers --}}
                <div class="account-managers-holder flex-col">

                    @include('site.partials.accountManagers')

                </div>
            </div>

            <div class="col-10 centered column-container">

                {{-- Social Media --}}
                <div class="social-media col-5">
                    <a class="sm-icon facebook" href="{!! Config::get('site.social.facebook') !!}" target="_blank"></a>
                    <a class="sm-icon behance" href="{!! Config::get('site.social.behance') !!}" target="_blank"></a>
                    <a class="sm-icon instagram" href="{!! Config::get('site.social.instagram') !!}" target="_blank"></a>
                    <a class="sm-icon linkedin" href="{!! Config::get('site.social.linkedIn') !!}" target="_blank"></a>
                </div>

            </div>

        </div>

        @include('site.partials.headerDrips')
    </header>

    <div class="contained-layout">

        <div class="form-maps-holder col-10 centered column-container">

            {{-- Contact form --}}
            <div class="form-holder col-4">

                <h2>Contactformulier</h2>

                {!! Form::open(['url' => 'contact/process', 'id' => 'contactForm']) !!}

                {{-- Hidden Honeypot Field --}}
{{--                @include('site.partials.form.honey', ['formId' => 'contactForm'])--}}

                {{-- Name --}}
                @include('site.partials.form.text',['key'=>'name'])

                {{-- E-mail --}}
                @include('site.partials.form.text',['key'=>'email'])

                {{-- Phone --}}
                @include('site.partials.form.text',['key'=>'phone'])

                {{-- Message --}}
                @include('site.partials.form.textarea',['key'=>'message'])

                {!! Form::submit('Verzenden') !!}

                {!! Form::close() !!}

            </div>

            {{-- Interactive Maps --}}
            <div class="maps-holder col-5">
                <h2>Vind ons op Google Maps</h2>

                <div class="map-square">
                    <div class="map-mask">
                        <div id="map"></div>
                    </div>
                </div>

            </div>
        </div>


    </div>

@endsection

@section('footer_button')
    @include('site.partials.footerButton',[
            'label' => "Gesprek plannen",
            'href' => "/gesprek-plannen"])
@endsection