{% extends "Global/layout.html.twig" %}

{% form_theme form 'Global/jquery.collection.html.twig' %}

{% set pagetitle = 'Add a new venue' | trans %}

{% if venue.id %}{% set pagetitle = 'Update the venue' | trans %}{% endif %}

{% block title %}{{pagetitle}}{% endblock %}

{% block content %}

    {% if is_granted('ROLE_ADMINISTRATOR') %}
        {% set navigation = [{ "dashboard_index": ('Dashboard' | trans),  "dashboard_administrator_venue": ('Manage venues' | trans), "current":(pagetitle) }] %}
    {% elseif is_granted('ROLE_ORGANIZER') %}
        {% set navigation = [{ "dashboard_index": ('Dashboard' | trans),  "dashboard_organizer_venue": ('my venues' | trans), "current":(pagetitle) }] %}
    {% endif %}
    {% include "Global/navigation.html.twig" with navigation %}

    <section class="section-content padding-y bg-white">
        <div class="{{ envFileAccessor.getSetting("app_layout") }}">
            <div class="row">
                <aside class="col-lg-3 pt-3 pt-lg-0">
                    {% include "Dashboard/sidebar.html.twig" %}
                </aside>
                <div class="col-lg-9 mt-4 mt-lg-0">
                    <div class="card box">
                        <div class="card-body">
                            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
                            {{ form_errors(form) }}
                            {{ form_row(form.translations) }}
                            {{ form_row(form.type) }}
                            {{ form_row(form.amenities) }}
                            {{ form_row(form.seatedGuests) }}
                            {{ form_row(form.standingGuests) }}
                            {{ form_row(form.quoteForm) }}
                            {{ form_row(form.contactEmail) }}

                            <div class="row">
                                <div class="col-lg-6">
                                    {{ form_row(form.street) }}
                                    {{ form_row(form.street2) }}
                                    {{ form_row(form.city) }}
                                    {{ form_row(form.postalCode) }}
                                    {{ form_row(form.state) }}
                                    {{ form_row(form.country) }}
                                    {{ form_row(form.showMap) }}
                                </div>
                                <div class="col-lg-6">
                                    <div class="sticky-top sticky-sidebar pt-0">
                                        <iframe width="100%" height="300" class="venue-map" src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                                    </div>
                                </div>
                            </div>

                            {{ form_row(form.images) }}
                            {{ form_row(form.save) }}
                            {{ form_end(form) }}

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

        </div>
    </section>

{% endblock %}

{% block javascripts %}

    {% if envFileAccessor.getSetting('GOOGLE_MAPS_API_KEY') != "" %}
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&key={{ envFileAccessor.getSetting('GOOGLE_MAPS_API_KEY') }}"></script>
    {% endif %}
    <script>

        $(document).ready(function () {

            $('.venue-map').hide();
            function getVenueAddress() {
                var address = '';
                if ($('#venue_form_street').val())
                    address = address + ' ' + $('#venue_form_street').val();
                if ($('#venue_form_street2').val())
                    address = address + ' ' + $('#venue_form_street2').val();
                if ($('#venue_form_city').val())
                    address = address + ' ' + $('#venue_form_city').val();
                if ($('#venue_form_postalCode').val())
                    address = address + ' ' + $('#venue_form_postalCode').val();
                if ($('#venue_form_state').val())
                    address = address + ' ' + $('#venue_form_state').val();
                if ($('#venue_form_country').val())
                    address = address + ' ' + $('#venue_form_country option:selected').text();
                return address;
            }

            $('#venue_form_street, #venue_form_street2, #venue_form_city, #venue_form_postalCode, #venue_form_state').blur(function () {
                if (getVenueAddress() != "") {
                    $('.venue-map').attr('src', 'https://maps.google.com/maps?q=' + getVenueAddress() + '&t=&z=13&ie=UTF8&iwloc=&output=embed');
                    $('.venue-map').show();
                }
            });
            $('#venue_form_country').on("select2-blur", function (e) {
                if (getVenueAddress() != "") {
                    $('.venue-map').attr('src', 'https://maps.google.com/maps?q=' + getVenueAddress() + '&t=&z=13&ie=UTF8&iwloc=&output=embed');
                    $('.venue-map').show();
                }
            });

        {% if venue.id %}
                $('#venue_form_country').trigger('blur');
        {% endif %}

        {% if envFileAccessor.getSetting('GOOGLE_MAPS_API_KEY') != "" %}
                $('#venue_form_save').click(function (e) {
                    if (getVenueAddress() != "") {
                        e.preventDefault();
                        var geocoder = new google.maps.Geocoder();
                        geocoder.geocode({'address': getVenueAddress()}, function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                $('#venue_form_lat').val(results[0].geometry.location.lat());
                                $('#venue_form_lng').val(results[0].geometry.location.lng());
                            }
                            $('form[name="venue_form"]').submit();
                        });
                    }
                });
        {% endif %}

            });

    </script>


{% endblock %}