{% extends 'partials/base.html' %}
{% load staticfiles %}
{% load sass_tags %}
{% load thumbnail %}
{% block old_css %}{% endblock %}
{% block head_css %}
    <link rel='stylesheet' href='{% static "css/font-awesome.min.css" %}'>
    <link rel='stylesheet' href='{% sass_src "sass/main.sass" %}'>
    <link rel='stylesheet' href='{% sass_src "sass/components/custom-components.sass" %}'>
    <link rel='stylesheet' href='{% sass_src "lib/proekton-components/sass/components.sass" %}'>
    {#    <style>#}
    {#        .-live-image-upload-container .-position-relative-parent {#}
    {#            position: relative#}
    {#        }#}
    {##}
    {#        .-live-image-upload-container .-image-delete,#}
    {#        .-live-image-upload-container .-live-image-delete {#}
    {#            position: absolute;#}
    {#            top: 0;#}
    {#            right: 0;#}
    {#            background-color: white;#}
    {#        }#}
    {#    </style>#}
{% endblock %}


{% block content %}
    {% include 'partials/modals/project_work_type_suggestion.html' %}
    {% include 'partials/header.html' %}
    <div class="container main-scope">
        <div class="row title-scope">
            <div class="col-lg-12">
                {#                <div class="title-scope">#}
                <h1>Добавить готовую работу</h1>
                {#                </div>#}
            </div>
        </div>
        <div class="row main-content">
            <div class="col-lg-12">
                <form action="{% url 'work_sell:create' %}" method="POST"
                      enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-lg-9">
                            <div class="simple-field">
                                <div class="header">Название проекта</div>
                                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                                <span class="required {% if form.name.errors %}error{% endif %}">Обязательно</span>
                                <input value="{{ form.name.value }}" name="{{ form.name.html_name }}"
                                       class="simple-input italic"
                                       placeholder="Пример: Дизайн проект квартиры, Армирование фундамента, Конструкции перекрытия и т.д."
                                       autocomplete="off"
                                       required>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="header ">Стоимость готового проекта
                                <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                            </div>
                            <input name="{{ form.budget.html_name }}" class="simple-input icon-rub js-number-format"
                                   placeholder="Введите сумму"
                                    {% if  form.budget.value %}
                                   value="{{ form.budget.value }}"
                                    {% endif %}
                                   autocomplete="off">
                        </div>
                    </div>
                    <div class="row vertical-child mod-align-bottom">
                        <div class="col-lg-9">
                            <div class="header">Тип готовой работы</div>
                            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                            <span class="required {% if form.specializations.errors %}error{% endif %}">Обязательно</span>
                            <div class="" id="select-box-1"></div>
                        </div>
                        <div class="col-lg-3">
                            <div href="#" onclick="return false" data-toggle="modal"
                                 data-target="#projectWorkTypeSuggestionModal"
                                 class="btn btn-simple btn-plus">Нет нужной специальности хочу добавить
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="vertical-child" id="select-box-2">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="vertical-child" id="select-box-3">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="vertical-child" id="select-box-4">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="vertical-child" id="select-box-5">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 vertical-child">
                            <div class="selected-container horizontal" id="selected-spec">
                                <input type="hidden" name="specializations"
                                       value="{{ form.specializations.value }}">
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 45px" class="row">
                        <div class="col-lg-12">
                            <div class="simple-field">
                                <div class="header">Подробно опишите проект
                                    <span class="select-text" id="spec-value"></span>
                                </div>
                                <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                <span class="required {% if form.description.errors %}error{% endif %}">Обязательно</span>
                                <textarea name="{{ form.description.html_name }}" class="description"
                                          rows="8">{{ form.description.value }}</textarea>

                            </div>
                            <div class="documentsChat mod" id="fileUploadContainer">
                                <div style="display: inline-block;vertical-align: middle;">
                                    <div style="display: inline-block;vertical-align: inherit;"
                                         class="upload-new paper-clip">
                                        <p id="fileUploadAddBtn" style="margin: 0">прикрепить файл</p>
                                    </div>
                                    <span style="display: inline-block;vertical-align: inherit;">ДО 100 ФАЙЛОВ</span>
                                </div>

                                <div class="row list-new-new" style="margin-top: 10px">
                                    <div class="col-lg-3 file-upload-widget" style="display: none">
                                        <input type="file" name="new_files" class="file-upload-input"
                                               style="position: absolute; top: -1000px; left: -1000px">
                                        <div class="preview-container">
                                            <div class="file-upload-remove-img-btn"></div>
                                            <img class="preview" src="#" alt="your image"/>
                                            <textarea name="img_description" rows="2" data-limit-rows="true"
                                                      class="description"></textarea>
                                        </div>
                                        <span style="display:none" class="file-upload-label"></span>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="vertical-child" id="sb-building-classification">
                            </div>
                            <div class="vertical-child" id="sb-building-sub-classification">
                            </div>
                            <div class="selected-container" id="selected-building-classification">
                                <input type="hidden"
                                       name="{{ form.building_classification.html_name }}"
                                       value="{{ form.building_classification.value }}">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="vertical-child" id="sb-construction-type">
                            </div>
                            <div class="selected-container" id="selected-construction-type">
                                <input type="hidden"
                                       name="{{ form.construction_type.html_name }}"
                                       value="{{ form.construction_type.value }}">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="vertical-child" id="sb-location-1"></div>
                            <div class="vertical-child" id="sb-location-2"></div>
                            <div class="vertical-child" id="sb-location-3"></div>
                            <div class="selected-container" id="selected-location">
                                <input type="hidden"
                                       name="{{ form.location.html_name }}"
                                       value="{{ form.location.value }}">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="vertical-child" id="sb-format"></div>
                            <div class="selected-container" id="selected-format">
                                <input type="hidden"
                                       name="{{ form.el_format.html_name }}"
                                       value="{{ form.el_format.value }}">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="separator">
                                <div class="border"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row top-line">
                        <div class="col-lg-3" style="text-align: center">
                            <div class="header">&nbsp;</div>
                            <input style="width: 100%" type="submit" class="btn btn-simple"
                                   value="РАЗМЕСТИТЬ ЗАКАЗ">
                        </div>
                        <div class="col-lg-3 col-lg-offset-6" style="text-align: center">
                            <div class="header">&nbsp;</div>
                            <input style="width: 100%" type="button" class="btn btn-simple"
                                   onclick="addMessage('Функционал временно не работает', 'info')"
                                   value="ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР">
                        </div>
                    </div>
                </form>
            </div>

        </div>
        {% include 'partials/footer.html' %}
        <ul id="popups-storage" hidden>
            {% if form.errors %}
                <li class="error">Форма заполнена неполностью</li>
            {% endif %}
            {#       <li class="info">Message-1</li>#}
            {#       <li class="warning">Message-1</li>#}
        </ul>
        {% include 'partials/inc-message-popup.html' %}
    </div>
{% endblock %}
{% block old_js %}
    <script src='{% static "lib/jquery.fileupload/js/vendor/jquery.ui.widget.js" %}'></script>
    <script src='{% static "lib/jquery.fileupload/js/jquery.iframe-transport.js" %}'></script>
    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload.js" %}'></script>
    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload-process.js" %}'></script>
    <script src='{% static "lib/lodash/lodash.js" %}'></script>
    <script src='{% static "my-libs.js" %}'></script>
{% endblock %}
{% block js_block %}
    <script src='{% static "js/bootstrap.min.js" %}'></script>
    <script src='{% static "js/build/init_create_worksell.js" %}'></script>
    <script src='{% static "js/build/create_worksell.js" %}'></script>
    <script src='{% static "js/jquery.mask.min.js" %}'></script>
    <script>
        $(function () {
            $('.js-number-format').mask('0000000000');
        })
    </script>
{% endblock %}