{% extends "dashboard/base.html" %}
{% load i18n static widget_tweaks  %}
{% block content-header %}
    <h1>{% trans "Create Listing" %} </h1>
{% endblock %}
{% block extra_css %}
    <style>
        .empty-form {
            display: none
        }

        .box-body .row {
            margin-bottom: 15px;
        }

        .plus-row {
            padding-top: 30px;
        }
    </style>
    <link href="{% static 'admin/js/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css' %}" rel="stylesheet" type="text/css"/>
    <link href="{% static 'admin/js/plugins/bootstrap-modal/css/bootstrap-modal.css' %}" rel="stylesheet" type="text/css"/>
{% endblock %}
{% block extra_metadata %}
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="{% static 'admin/js/listing-map.js' %}" type="text/javascript"></script>
{% endblock %}
{% block extra_js %}
    <script src="{% static 'admin/js/plugins/bootstrap-modal/js/bootstrap-modalmanager.js' %}" type="text/javascript"></script>
    <script src="{% static 'admin/js/plugins/bootstrap-modal/js/bootstrap-modal.js' %}" type="text/javascript"></script>
    <script src="{% static 'admin/js/django-superformset.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var formsetOptions = {
                prefix: 'images',
                containerSel: 'form',
                rowSel: '.inline',
                formTemplate: '.images-inline .inline',
                addTrigger: '<a href="#" class="add-row" title="add">{% trans 'add new' %}</a>'
            };
            $('.formlistImages').superformset(formsetOptions);
            $('.formlistAttributes').superformset($.extend(formsetOptions, {
                prefix: 'attributelisting_set',
                formTemplate: '.attributes-inline .inline'
            }));

            var $modal = $('#ajax-modal');

            $('.add-modal').on('click', function (e) {

                e.preventDefault();

                var url = $(this).attr("href");

                // create the backdrop and wait for next modal to be triggered
                $('body').modalmanager('loading');

                setTimeout(function () {
                    $modal.load(url + ' #create-form', '', function () {
                        $modal.modal();
                    });
                }, 1000);
            });
        });
    </script>
{% endblock %}
{% block content %}
    <form role="form" action="" method="post" enctype="multipart/form-data">
        <div class="row">

            {% csrf_token %}
            <div class="col-md-6">
                <!-- general form elements disabled -->
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">{% trans "Listing Information" %}</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="form-group {% if form.title.errors %}has-error{% endif %}">
                            {{ form.title.errors }}
                            {{ form.title.label_tag }}
                            {% render_field form.title class+="form-control"  %}
                        </div>
                        <div class="form-group {% if form.description.errors %}has-error{% endif %}">
                            {{ form.description.errors }}
                            {{ form.description.label_tag }} {% render_field form.description class+="form-control" %}
                        </div>
                        <div class="form-group {% if form.price.errors %}has-error{% endif %}">
                            {{ form.price.errors }}
                            {{ form.price.label_tag }} {% render_field form.price class+="form-control" %}
                        </div>
                        <div class="row">
                            <div class="col-xs-6 {% if form.location.errors %}has-error{% endif %}">
                                {{ form.location.errors }}
                                {{ form.location.label_tag }} {% render_field form.location class+="form-control" %}
                            </div>
                            <div class="col-xs-1 plus-row">
                                <a href="{% url 'add-sector' %}" class="add-modal">
                                    <i class="fa fa-fw fa-plus"></i>
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 {% if form.type.errors %}has-error{% endif %}">
                                {{ form.type.errors }}
                                {{ form.type.label_tag }} {% render_field form.type class+="form-control"  %}
                            </div>
                            <div class="col-xs-1 plus-row">
                                <a href="{% url 'add-sector' %}"><i class="fa fa-fw fa-plus"></i></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 {% if form.offer.errors %}has-error{% endif %}">
                                {{ form.offer.errors }}
                                {{ form.offer.label_tag }} {% render_field form.offer class+="form-control"  %}
                            </div>
                            <div class="col-xs-1 plus-row">
                                <a href="{% url 'add-sector' %}"><i class="fa fa-fw fa-plus"></i></a>
                            </div>
                        </div>
                        <div class="form-group {% if form.active.errors %}has-error{% endif %}">
                            {{ form.active.errors }}
                            {{ form.active.label_tag }} {% render_field form.active class+="form-control"  %}
                        </div>
                        <div class="form-group {% if form.featured.errors %}has-error{% endif %}">
                            {{ form.featured.errors }}
                            {{ form.featured.label_tag }} {% render_field form.featured class+="form-control"  %}
                        </div>
                        <div class="form-group {% if form.baths.errors %}has-error{% endif %}">
                            {{ form.baths.errors }}
                            {{ form.baths.label_tag }} {% render_field form.baths class+="form-control"  %}
                        </div>
                        <div class="form-group {% if form.beds.errors %}has-error{% endif %}">
                            {{ form.beds.errors }}
                            {{ form.beds.label_tag }} {% render_field form.beds class+="form-control"  %}
                        </div>
                        <div class="form-group {% if form.size.errors %}has-error{% endif %}">
                            {{ form.size.errors }}
                            {{ form.size.label_tag }} {% render_field form.size class+="form-control"  %}
                        </div>
                        <div class="form-group {% if form.coords.errors %}has-error{% endif %}">
                            {{ form.coords.errors }}
                            {{ form.coords.label_tag }} {% render_field form.coords class+="form-control"  %}
                        </div>
                        <div class="row">
                            <div id="map-canvas" class="col-xs-12" style="height: 300px;"></div>
                        </div>
                        <div class="row">
                            <div class="col-xs-7 {% if form.agent.errors %}has-error{% endif %}">
                                {{ form.agent.errors }}
                                {{ form.agent.label_tag }} {% render_field form.agent class+="form-control"  %}
                            </div>
                            <div class="col-xs-1 plus-row">
                                <a href="{% url 'add-agent' %}"><i class="fa fa-fw fa-plus"></i></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-7 {% if form.contact.errors %}has-error{% endif %}">
                                {{ form.contact.errors }}
                                {{ form.contact.label_tag }} {% render_field form.contact class+="form-control"  %}
                            </div>
                            <div class="col-xs-1 plus-row">
                                <a href="{% url 'add-contact' %}"><i class="fa fa-fw fa-plus"></i></a>
                            </div>
                        </div>
                        <div class="form-group {% if form.notes.errors %}has-error{% endif %}">
                            {{ form.notes.errors }}
                            {{ form.notes.label_tag }} {% render_field form.notes class+="form-control"  %}
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <div class="col-md-6">
                <!-- general form elements disabled -->
                <div class="box box-warning">
                    <div class="box-header">
                        <h3 class="box-title">{% trans "Listing Images" %}</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <fieldset class="formlistImages">
                        {{ listing_images_form.management_form }}
                        {{ listing_images_form.non_form_errors }}

                        {% for form in listing_images_form %}
                            {{ form.id }}
                            <div class="inline">
                                <div class="row {{ listing_images_form.prefix }}">
                                    <div class="col-xs-3 {% if form.name.errors %}has-error{% endif %}">
                                        {{ form.name.errors }}
                                        {{ form.name.label_tag }} {% render_field form.name class+="form-control"  %}
                                    </div>
                                    <div class="col-xs-5 {% if form.image.errors %}has-error{% endif %}">
                                        {{ form.image.errors }}
                                        {{ form.image.label_tag }} {{ form.image }}
                                    </div>
                                    <div class="col-xs-2 {% if form.order.errors %}has-error{% endif %}">
                                        {{ form.order.errors }}
                                        {{ form.order.label_tag }} {% render_field form.order class+="form-control"  %}
                                    </div>

                                    {% if listing_images_form.can_delete %}
                                        <div class="col-xs-1">
                                            {{ form.DELETE.label_tag }}
                                            {{ form.DELETE }}
                                        </div>
                                    {% endif %}
                                </div>
                                <hr/>
                            </div>
                        {% endfor %}
                        </fieldset>
                        <div class="empty-form images-inline">
                            <div class="inline">
                                <div class="row" data-empty-permitted="true">
                                    <div class="col-xs-3">
                                        {{ listing_images_form.empty_form.name.label_tag }}
                                        {% render_field listing_images_form.empty_form.name class+="form-control"  %}
                                    </div>
                                    <div class="col-xs-5">
                                        {{ listing_images_form.empty_form.image.label_tag }}
                                        {{ listing_images_form.empty_form.image }}
                                    </div>
                                    <div class="col-xs-2">
                                        {{ listing_images_form.empty_form.order.label_tag }}
                                        {% render_field listing_images_form.empty_form.order class+="form-control"  %}
                                    </div>
                                    {% if listing_images_form.can_delete %}
                                        <div class="col-xs-1">
                                            {{ listing_images_form.empty_form.DELETE.label_tag }}
                                            {{ listing_images_form.empty_form.DELETE }}
                                        </div>
                                    {% endif %}
                                </div>
                                <hr/>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
                <!-- general form elements disabled -->
                <div class="box box-success">
                    <div class="box-header">
                        <h3 class="box-title">{% trans "Listing Features" %}</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <fieldset class="formlistAttributes">
                        {{ listing_attributes_form.management_form }}
                        {{ listing_attributes_form.non_form_errors }}

                        {% for form in listing_attributes_form %}
                            {{ form.id }}
                            <div class="inline">
                                <div class="row {{ listing_attributes_form.prefix }}">
                                    <div class="col-xs-5 {% if form.attribute.errors %}has-error{% endif %}">
                                        {{ form.attribute.errors }}
                                        {{ form.attribute.label_tag }} {% render_field form.attribute class+="form-control"  %}
                                    </div>
                                    <div class="col-xs-4 {% if form.value.errors %}has-error{% endif %}">
                                        {{ form.value.errors }}
                                        {{ form.value.label_tag }} {% render_field form.value class+="form-control"  %}
                                    </div>
                                    {% if listing_attributes_form.can_delete %}
                                        <div class="col-xs-2">
                                            {{ form.DELETE.label_tag }}
                                            {{ form.DELETE }}
                                        </div>
                                    {% endif %}
                                </div>
                                <hr/>
                            </div>
                        {% endfor %}
                        </fieldset>
                        <div class="empty-form attributes-inline">
                            <div class="inline">
                                <div class="row" data-empty-permitted="true">
                                    <div class="col-xs-5">
                                        {{ listing_attributes_form.empty_form.attribute.label_tag }}
                                        {% render_field listing_attributes_form.empty_form.attribute class+="form-control"  %}
                                    </div>
                                    <div class="col-xs-4">
                                        {{ listing_attributes_form.empty_form.value.label_tag }}
                                        {% render_field listing_attributes_form.empty_form.value class+="form-control"  %}
                                    </div>
                                    {% if listing_attributes_form.can_delete %}
                                        <div class="col-xs-2">
                                            {{ listing_attributes_form.empty_form.DELETE.label_tag }}
                                            {{ listing_attributes_form.empty_form.DELETE }}
                                        </div>
                                    {% endif %}
                                </div>
                                <hr/>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!-- general form elements disabled -->
                <div class="box box-primary">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </form>
    <div id="ajax-modal" class="modal fade" tabindex="-1" style="display: none;"></div>
{% endblock %}
