{% extends '@nucleus/partials/particle.html.twig' %}

{% set attr_extra = '' %}
{% if particle.extra %}
    {% for attributes in particle.extra %}
        {% for key, value in attributes %}
            {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
        {% endfor %}
    {% endfor %}
{% endif %}

{% set indentifier = random() %}

{% block particle %}
    <div class="g-touch-toggle">
        <a href="#g-touch" data-uk-modal="{center:true}">
            {%- if particle.toggleicon -%}
                <span class="{{ particle.toggleicon|e }}"></span>
            {%- endif -%}

            {%- if particle.toggletext -%}
                {{- particle.toggletext|e -}}
            {%- endif -%}
        </a>
    </div>

    <div id="g-touch" class="uk-modal">
        <div class="uk-modal-dialog" style="width: {{ particle.width|e }};">
            <a class="uk-modal-close uk-close"></a>
            <div class="g-touch-contacts">
                <div class="g-grid">
                    {% for item in particle.items %}
                        {% set attr_extra_item = '' %}
                        {% for extra in item.extra %}
                            {% set attr_extra_item = attr_extra_item ~ ' ' ~ extra|keys|first|e ~ '="' ~ extra|values|first|e('html_attr') ~ '"' %}
                        {% endfor %}
                        <div class="g-block{% if item.class %} {{ item.class|e }}{% endif %}" {% if item.extra %}{{ attr_extra_item|raw }}{% endif %}>
                            <div class="g-touch-item">
                                {% if item.link %}
                                    <a target="{{ item.target|default('_parent')|e }}" href="{{ item.link|e }}">
                                {% endif %}
                                {% if item.icon %}
                                    <span class="g-touch-item-icon {{ item.icon|e }}"></span>
                                {% endif %}
                                {% if item.value %}
                                    <span class="g-touch-item-value">{{ item.value|e }}</span>
                                {% endif %}
                                {% if item.link %}
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div class="g-googlemap{% if particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %} >
                <div id="g-map-{{ indentifier|e }}" style="width: {{ particle.width|e }}; height: {{ particle.height|e }};">
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js{% if particle.apikey %}?key={{ particle.apikey|e|trim }}{% endif %}"></script>
    <script type="text/javascript">
        function initialize{{ indentifier|e }}() {

            var latlng = new google.maps.LatLng({{ particle.latitude|e }},{{ particle.longitude|e }});

            {% if particle.dragging|default('enabled') == 'enabled' %}
                var isDraggable = 1;
            {% elseif particle.dragging|default('enabled') == 'disabledmobile' %}
                {% do gantry.load('jquery') %}
                var isDraggable = jQuery(document).width() > 767 ? true : 0;
            {% else %}
                var isDraggable = 0;
            {% endif %}

            var myOptions =
            {
                zoom: {{ particle.zoom|e }},
                center: latlng,
                mapTypeId: google.maps.MapTypeId.{{ particle.maptype|default('ROADMAP')|e }},

                {% if particle.snazzymaps %}
                    styles: {{ particle.snazzymaps|raw }},
                {% endif %}
                    
                scrollwheel: {{ particle.scrollwheel|default(0)|e }},
                draggable: isDraggable
            };

            var map = new google.maps.Map(document.getElementById("g-map-{{ indentifier|e }}"), myOptions);

            {% if particle.defaultmarker|default('show') == 'show' %}
                var myMarker = new google.maps.Marker(
                {
                    position: latlng,
                    map: map,
                });

                var contentString = '{{ particle.markertext|e('js') }}';

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

                {% if particle.markertext %}
                    myMarker.addListener('click', function() {
                        infowindow.open(map, myMarker);
                    });

                    {% if particle.markerstate|default(1) %}
                        infowindow.open(map, myMarker);
                    {% endif %}
                {% endif %}
            {% endif %}

            {% for marker in particle.markers %}
                {% set marker_id = random() %}

                var myMarker{{ marker_id|e }} = new google.maps.Marker(
                {
                    position: {lat: {{ marker.latitude|e }}, lng: {{ marker.longitude|e }}},
                    map: map,
                });

                var contentString{{ marker_id|e }} = '{{ marker.markertext|e('js') }}';

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

                {% if marker.markertext %}
                myMarker{{ marker_id|e }}.addListener('click', function() {
                    infowindow{{ marker_id|e }}.open(map, myMarker{{ marker_id|e }});
                });

                    {% if marker.markerstate|default(1) %}
                        infowindow{{ marker_id|e }}.open(map, myMarker{{ marker_id|e }});
                    {% endif %}
                {% endif %}

            {% endfor %}

            // Resize stuff...
            var currCenter = map.getCenter();

            // Fix for reloading the map in a modal
            jQuery('.uk-modal').on({
                'show.uk.modal': function(){
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(currCenter);  
                }
            });

        }
        google.maps.event.addDomListener(window, 'load', initialize{{ indentifier|e }});

    </script>
{% endblock %}