{# title string #}
{# form \Symfony\Component\Form\FormView #}

{% form_theme form with "@Core/frontend/form/bootstrap_3_layout.html.twig" %}

{% extends ':default:subpage.html.twig' %}

{% block sidebar %}
    {{ parent() }}
    {{ sidebar_promoted_companies(3) }}
    {% include '@Catalog/frontend/blocks/sidebar_top_companies.html.twig' %}
    {{ sidebar_promoted_classifieds() }}
    {% include ':blocks:we_recommend.html.twig' %}
{% endblock %}

{% block subpage_content %}
    <div class="classified_form">
        {% block classified_form_help %}
            <p class="classified_form__info">
                <i class="fa fa-info"></i>
                <span>
                    {{- 'Wypełnij formularz w celu dodania ogłoszenia. Pola oznaczone (' -}}
                    <span class="color_other">*</span>
                    {{- ') są wymagane.' -}}
                </span>
            </p>
        {% endblock %}

        {{ parent() }}
        {{ form_start(form) }}
        {{ form_errors(form) }}

        <h2 class="heading_h2">
            {{- 'Podstawowe informacje:' -}}
        </h2>
        {{ form_row(form.name) }}
        {% block classified_form_row2 %}
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(form.price) }}
                </div>
                <div class="col-md-18">
                    {{ form_row(form.category) }}
                </div>
            </div>
        {% endblock %}

        {{ form_row(form.negotiable) }}
        {{ form_row(form.content) }}
        {% if form.display_period|default(false) %}
            <h2 class="heading_h2">
                {{- 'Ogłoszenie ważne przez' -}}
                <span class="color_other">*</span>{{ ':' -}}
            </h2>
            <div class="form-inline">
                {{ form_row(form.display_period) }}
            </div>
        {% endif %}
        <h2 class="heading_h2">
            {{- 'Zdjęcia do ogłoszenia:' -}}
        </h2>
        {{ form_errors(form.images) }}
        <div
            id="images-fields-list"
            class="collection block-grid-md-2"
            data-prototype="{{ form_widget(form.images.vars.prototype)|e }}"
        >
            {% for imageField in form.images %}
                <div class="collection__item">
                    {{ form_errors(imageField) }}
                    {{ form_widget(imageField) }}
                    <button
                        type="button"
                        class="collection__remove"
                    >
                        <i class="fa fa-times"></i> Usuń
                    </button>
                </div>
            {% endfor %}
        </div>

        <div class="text-right">
            <a
                href="#"
                class="btn btn--light2 btn--small btn--nott"
                id="add-another-image"
            >
                <i class="fa fa-plus"></i> {{ 'Dodaj nowe zdjęcie' -}}
            </a>
        </div>

        <h2 class="heading_h2">
            {{- 'Lokalizacja:' -}}
        </h2>
        <div class="row">
            <div class="col-md-12">
                {{ form_row(form.voivodeship) }}
            </div>
            <div class="col-md-12">
                {{ form_row(form.city) }}
            </div>
        </div>
        <h2 class="heading_h2">
            {{- 'Kontakt:' -}}
        </h2>
        <div class="row">
            <div class="col-md-12">
                {{ form_row(form.email) }}
            </div>
            <div class="col-md-12">
                {{ form_row(form.phone) }}
            </div>
        </div>
        {% if app.user is null %}
            <div class="form-group form-checkbox-group">
                <div class="checkbox">
                    <label for="register_form-accept_rules" class="required">
                        <input
                            id="register_form-accept_rules"
                            type="checkbox"
                            name="accept_rules"
                        />
                        <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                        {{- 'Akceptuję regulamin serwisu' -}}
                    </label>
                </div>
            </div>
        {% endif %}

        {% if form.captcha.vars|default(false) != false %}
            {{ form_row(form.captcha) }}
        {% endif %}

        {% block classified_form_submit %}
            {{ form_row(form.submit, { icon: 'plus' }) }}
        {% endblock %}

        {{ form_end(form) }}
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        var imagesCount = '{{ form.images|length }}';
        var maxImages   = {{ app.user ? 10 : 1 }};

        $(document).ready(function() {
            var $addImageButton = $('#add-another-image');

            function showOrHideAddImageButton() {
                if(imagesCount >= maxImages) {
                    $addImageButton.hide();
                } else {
                    $addImageButton.show();
                }
            }

            $addImageButton.click(function(e) {
                e.preventDefault();

                if(imagesCount >= maxImages) {
                    return;
                }

                var emailList = $('#images-fields-list');

                // grab the prototype template
                var newWidget = emailList.attr('data-prototype');
                newWidget     = newWidget.replace(/__name__/g, imagesCount);
                imagesCount++;

                // create a new list element and add it to the list
                var newLi = $('<div class="collection__item"></div>').html(newWidget);
                newLi.appendTo(emailList);

                showOrHideAddImageButton();
            });

            $(document).on('click', '.collection__remove', function() {
                $(this).closest('.collection__item').remove();
                imagesCount--;

                showOrHideAddImageButton();
            })
        })
    </script>
{% endblock %}