@extends('layouts.app', [
    'name' => 'contact',
    'title' => 'Contact'
])

@section('content')
<section id="contact-section">

    <div class="contact-info">
        <div class="row no-margin">
            <div class="col s12">
                <h3 class="page-title">Contact</h3>
            </div>
        </div>

        <div class="row no-margin">
           <div class="col s12">
                {!! Form::open([
                    'class' => 'contact-form',
                    'route' => 'contact.post',
                    'method' => 'post',
                    'data-message' => $errors->any() ? $errors->first() : Session::get('message'),
                    'data-type' => $errors->any() ? 'error' : 'success']) !!}

                <div class="row no-margin">
                    <div class="input-field col s12">
                        {!! Form::email('email', null, ['required', 'class' => 'squared', 'placeholder' => __('contact.form.email_placeholder')]) !!}
                        {!! Form::label('email', __('contact.form.email')) !!}
                    </div>

                    <div class="input-field col s12">
                        {!! Form::textarea('message', null, ['required', 'class' => 'materialize-textarea squared', 'placeholder' => __('contact.form.message_placeholder'), 'cols' => 3]) !!}
                        {!! Form::label('message', __('contact.form.message')) !!}
                    </div>

                    <div class="input-field col s12">
                        <button type="submit" class="btn btn-custom btn-fill waves-effect waves-light">
                            @lang('contact.form.send')
                        </button>
                    </div>
                </div>
                {!! Form::close() !!}
           </div>
        </div>

        {{-- <div class="row no-margin hide-on-med-and-down">
            <div class="col s12">
                <h3 class="line-title thin "><span>@lang('contact.social_networks')</span></h3>
            </div>

            <div class="contact-socials">
                <div class="col s6">
                    <a target="_blank" href="#" title="@lang('contact.facebook_page')" class="btn-floating btn-custom waves-effect waves-light">
                        <i class="fa fa-facebook"></i>
                    </a>
                </div>

                <div class="col s6">
                    <a target="_blank" href="#" title="@lang('contact.instagram_page')" class="btn-floating waves-effect waves-light">
                        <i class="fa fa-instagram"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="contact-socials absolute hide-on-large-only">
            <a target="_blank" href="#" title="Notre page facebook" class="btn-floating waves-effect waves-light">
                <i class="fa fa-facebook"></i>
            </a>

            <a target="_blank" href="#" title="Notre page instagram" class="btn-floating waves-effect waves-light">
                <i class="fa fa-instagram"></i>
            </a>
        </div> --}}
    </div>

    <div class="contact-map">
        <div id="map_canvas" class="mapping"></div>
    </div>

</section>
@endsection

@push('scripts')
<script type="text/javascript">
$(document).ready(function () {

    $(window).resize(function () {
        if ($(window).width() > 992)
            return;

        $('.contact-map').css('height', $(window).height() - $('.contact-info').outerHeight());
    });

    $(window).resize();

    var message = $('.contact-form').attr('data-message');
    var type = $('.contact-form').attr('data-type');

    if (message) {
        Materialize.toast(message, 20000, type + '-toast');
    }
});

var windowOpen = false;

function initMap() {
    var agency = {lat: 48.8443017, lng: 2.3507592};

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 15,
        center: agency
    });

    var marker = new google.maps.Marker({
        position: agency,
        animation: google.maps.Animation.DROP,
        title: 'Sophie Jacqmin'
    });

    var contentString = '<div class="iw-container">' +
        '<h6 class="iw-title">Sophie Jacqmin</h6>' +
        '<div class="iw-address">' +
        '<span>11 rue de Navarre</span>' +
        '<span>75005 Paris</span>' +
        '</div>' +
        '<div class="iw-contact">' +
        '<a href="tel:+33951641413"><i class="material-icons">phone</i><span>+33 6 85 05 36 06</span></a>' +
        '<a href="mailto:contact\@sophiejacqmin.com"><i class="material-icons">mail</i><span>contact\@sophiejacqmin.com</span></a>' +
        '<a class="route" target="_blank" href="https://www.google.fr/maps/dir/\'\'/Sophie+Jacqmin,+11+Rue+de+Navarre,+75005+Paris/@48.8369523,2.348019,13z/data=!3m1!4b1!4m10!4m9!1m1!4e1!1m5!1m1!1s0x47e66de3468d0d91:0xbf3ec1645a6bcfd3!2m2!1d2.3530587!2d48.8442331!3e3">' +
        '<i class="material-icons">directions</i><span>Itinéraire</span></a>' +
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(infowindow, 'domready', function() {
        var iwCloseBtn = $('.gm-style-iw').next();
        iwCloseBtn.css('display', 'none');
    });

    marker.addListener('click', () => {

        if (windowOpen) {
            windowOpen = false;
            infowindow.close(map, marker);
            marker.setAnimation(google.maps.Animation.BOUNCE);
            return;
        }

        marker.setAnimation(null);
        infowindow.open(map, marker);
        windowOpen = true;
    });

    setTimeout(() => {
        marker.setMap(map);
        setTimeout(() => {
            windowOpen = true;
            infowindow.open(map, marker);
        }, 500);
    }, 1000);
}

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCsUYNSw6Dfq9NR3COUgjaR7H4VzIpwToE"></script>
@endpush