{% extends "standardLayout.twig" %}

{% block pageContent %}
    <div class="container content">
        <h1>{{ cmsTitle }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb content">
                <li class="breadcrumb-item"><a href="/">Accueil</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ cmsTitle }}</li>                
            </ol>
        </nav>        
    </div>

    <div class="jumbotron jumbotron-fluid content">
        <div id="ggMap"></div>
    </div>

    <a name="form"></a>
    <div class="container content">
        <h2>Contactez-nous !</h2>
        {{ form_start(form, { 'method': 'POST' }) }}    
        <div class="row align-items-end">
            <div class="col-md-6">
                <div class="form-group{{ (form_errors(form.name) is not empty) ? ' has-error' : '' }}">
                    {{ form_errors(form.name) }}
                    {{ form_widget(form.name, { 'attr': { 'class': 'form-control form-control-lg', 'placeholder': 'Nom *' } }) }}
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group{{ (form_errors(form.company) is not empty) ? ' has-error' : '' }}">
                    {{ form_errors(form.company) }}
                    {{ form_widget(form.company, { 'attr': { 'class': 'form-control form-control-lg', 'placeholder': 'Société' } }) }}
                </div>
            </div>
        </div>
        <div class="row align-items-end">
            <div class="col-md-12">
                <div class="form-group{{ (form_errors(form.address) is not empty) ? ' has-error' : '' }}">
                    {{ form_errors(form.address) }}
                    {{ form_widget(form.address, { 'attr': { 'class': 'form-control form-control-lg', 'placeholder': 'Adresse' } }) }}
                </div>
            </div>
        </div>
        <div class="row align-items-end">
            <div class="col-md-4">
                <div class="form-group{{ (form_errors(form.zipcode) is not empty) ? ' has-error' : '' }}">
                    {{ form_errors(form.zipcode) }}
                    {{ form_widget(form.zipcode, { 'attr': { 'class': 'form-control form-control-lg', 'placeholder': 'Code Postal *' } }) }}
                </div>
            </div>
            <div class="col-md-8">
                <div class="form-group{{ (form_errors(form.city) is not empty) ? ' has-error' : '' }}">
                    {{ form_errors(form.city) }}
                    {{ form_widget(form.city, { 'attr': { 'class': 'form-control form-control-lg', 'placeholder': 'Ville' } }) }}
                </div>
            </div>
        </div>
        <div class="row align-items-end">
            <div class="col-md-8">
                <div class="form-group{{ (form_errors(form.email) is not empty) ? ' has-error' : '' }}">
                    {{ form_errors(form.email) }}
                    {{ form_widget(form.email, { 'attr': { 'class': 'form-control form-control-lg', 'placeholder': 'E-Mail *' } }) }}
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group{{ (form_errors(form.telephone) is not empty) ? ' has-error' : '' }}">
                    {{ form_errors(form.telephone) }}
                    {{ form_widget(form.telephone, { 'attr': { 'class': 'form-control form-control-lg', 'placeholder': 'Téléphone' } }) }}
                </div>
            </div>
        </div>
        <div class="row align-items-end">
            <div class="col-md-12">
                <div class="form-group{{ (form_errors(form.message) is not empty) ? ' has-error' : '' }}">
                    {{ form_errors(form.message) }}
                    {{ form_widget(form.message, { 'attr': { 'class': 'form-control form-control-lg', 'placeholder': 'Votre message *', 'rows': '5' } }) }}
                </div>
            </div>
            <div class="col-md-4 offset-md-8">
                {{ form_widget(form.submit, { 'attr': { 'class': 'btn btn-primary btn-lg btn-block' } }) }}
            </div>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}

{% block pageJavascript %}
    <script>
        function initMap() {
            var chazottier = { lat: 45.697050, lng: 4.680520 };

            var map = new google.maps.Map(document.getElementById('ggMap'), {
                mapTypeId: 'roadmap',
                center: chazottier,
                zoom: 17
            });

            var contentString = 
                '<div>' +
                '<h6>Pépinières Chazottier</h6>' +
                '33, avenue des Alpes<br>' +
                '69510 - Messimy<br><br>' +
                'Tél : +33 (4) 78 45 15 12<br>' +
                'Mob : +33 (6) 12 51 32 55' +
                '</div>';

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

            var marker = new google.maps.Marker({
                position: chazottier,
                icon: '/images/ggmap.png',
                map: map,
                title: 'Pépinières Chazottier'
            });

            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLrG3D9EEtZlRV62EMdoBi9qf6_tI3pEg"></script>
    <script>
        $(document).ready(function() {
            initMap();
        });
    </script>    
{% endblock %}