{% extends 'partials/base.html' %}
{% load i18n %}
{% load staticfiles %}
{% load sass_tags %}
{% 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" %}'>
{% endblock %}

{% block content %}
    {% include 'partials/modals/project_work_type_suggestion.html' %}
    {% include 'partials/modals/modal-registration_form.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>{% if pk %}Редактировать{% else %}Новый{% endif %} заказ</h1>
                {#                </div>#}
            </div>
        </div>
        <div class="row main-content">
            <div class="col-lg-12">
                <form action="
                {% if pk %}
                   {% url 'projects:customer-project-edit' pk=pk %}
                {% else %}
                   {% url 'projects:customer-project-create' %}
                {% endif %}
                "
                      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="name"
                                       class="simple-input italic"
                                       placeholder="Пример: Дизайн квартиры, Армирование фундамента, Конструкции перекрытия и т.д."
                                       autocomplete="off"
                                       required>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div id="sb-realty-top"></div>
                        </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.specialization.errors %}error{% endif %}">Обязательно</span>
                            <div class="" id="select-box-1"></div>
                        </div>
                        <div class="col-lg-3">
                            <div class="header">&nbsp;</div>
                            <div href="#" onclick="return false" data-toggle="modal"
                                 data-target="#projectWorkTypeSuggestionModal"
{#                                 style="text-transform: none; line-height: 115%"#}
                                 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" style="display: none">
                        <div class="col-lg-12">
                            <div class="selected-container horizontal" id="selected-spec">
                                <input type="hidden" name="{{ form.specialization.html_name }}"
                                       value="{{ form.specialization.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.text.errors %}error{% endif %}">Обязательно</span>
                                <textarea name="text" class="description" rows="6"
                                          placeholder=
                                                  " Пример №1
  Разработать архиьектурные решения для жилого дома на основании эскизной проработки


  Пример №2
  Разработать проект по електроснабжению и освещению гаража">{{ form.text.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>

                                <ul style="float: none" class="list-new-new">
                                    {% for file in form.files.field.queryset.all %}
                                        <li class="file-upload-widget">
                                            <input type="hidden" name="files" class="file-upload-input" value="{{ file.pk }}">
                                            <span class="file-upload-label">{{ file.file.name|basename }} {{ file.file.size|filesizeformat }}</span>
                                            <div class="file-upload-remove-btn"></div>
                                        </li>
                                    {% endfor %}
                                    <li class="file-upload-widget" style="display: none">
                                        <input type="file" name="new_files" class="file-upload-input"
                                               style="position: absolute; top: -1000px; left: -1000px">
                                        <span class="file-upload-label"></span>
                                        <div class="file-upload-remove-btn"></div>
                                    </li>
                                </ul>
                            </div>


                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="separator">
                                <span class="header">Показать расширенные настройки</span>
                                <button class="resButton">
                                    <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                                </button>
                                <div class="border"></div>
                            </div>
                        </div>
                    </div>

                    <div class="slide">
                        <div style="padding-bottom: 15px" class="row">
                            <div class="col-lg-12">
                                <div class="header">Способ оплаты</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <label class="mod-align-center header">
                                    <input name="{{ form.deal_type.html_name }}" class="custom-radio" type="radio"
                                           {% if form.deal_type.value == 'secure_deal' %}checked{% endif %}
                                           value="secure_deal">&nbsp;
                                    Безопасная сделка (с
                                    резервированием бюджета)
                                </label>

                                <div class="description">
                                <span class="teaser">
                                    Безопасная сделка – это сервис, с помощью которого:<br/>
                                    -Заказчики - полностью избавляются от всех финансовых рисков при сотрудничестве с
                                    Исполнителями;<br/>
                                    -Исполнители - получают гарантию своевременной оплаты своей работы (выполненной по
                                    заданию
                                    точно в срок).
                                </span>
                                    <span class="complete">
                                    <p>
                                        Это сервис и тип оплаты в заказах, в котором сумма оплаты резервируется
                                        (перечисляется
                                        на
                                        сайт) Заказчиком до начала работы и выплачивается Исполнителю только после
                                        успешного
                                        выполнения задания. А в случае некачественного и/или несвоевременного выполнения
                                        –
                                        возвращается Заказчику.
                                    </p>
                                    <p>
                                        Сайт выступает в Безопасных сделках хранителем и гарантом сохранности средств. А
                                        в
                                        случае
                                        возникновения конфликтов в заказе - Арбитром, независимой третьей Стороной,
                                        помогающей
                                        решить проблемы при сотрудничестве и справедливо распорядиться зарезервированной
                                        суммой:<br>
                                        -выплатить ее Исполнителю, если работа выполнена своевременно и в полном
                                        соответствии с
                                        заданием;<br>
                                        -вернуть Заказчику, если работа не выполнена или нарушены сроки выполнения;<br>
                                        -разделить сумму между Заказчиком и Исполнителем, если работа выполнена частично
                                        и
                                        без нарушения сроков.
                                    </p>
                                </span>
                                    <span class="more"></span>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label class="mod-align-center header">
                                    <input name="{{ form.deal_type.html_name }}" class="custom-radio" type="radio"
                                           {% if form.deal_type.value == 'direct_payment' %}checked{% endif %}
                                           value="direct_payment">&nbsp;
                                    Прямая оплата Исполнителю на
                                    его
                                    кошелек/счет
                                </label>
                                <div class="description">
                                    <p>
                                        Прямая оплата - это оплата без помощи сайта. Оплаты заказов происходят напрямую
                                        исполнителю
                                        на его личный счет или кошелек.
                                    </p>
                                    <p>
                                        В данном случае сайт не выступает гарантом сохранности средств и не является
                                        Арбитром
                                        при
                                        спорных вопросах.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 40px" class="row mod-align-bottom">
                            <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="Введите сумму"
                                       value="{{ form.budget.value }}"
                                       autocomplete="off">
                            </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.term.html_name }}" class="simple-input icon-days js-number-format"
                                       placeholder="Введите срок"
                                       value="{{ form.term.value }}"
                                       autocomplete="off">
                            </div>
                            <div class="col-lg-4">
                            <div class="header">&nbsp</div>
                                <div class="row">
                                    <div class="col-lg-1">
                                        <input name="{{ form.price_and_term_required.html_name }}" id="safe"
                                               class="custom-checkbox" type="checkbox"
                                               {% if form.price_and_term_required.value %}checked{% endif %}>
                                    </div>
                                    <div class="col-lg-11">
                                        <label for="safe" style="font-weight: normal" class="">
                                            Сделать для исполнителей обязательным для заполнения поля цена и срок
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2">
                            <div class="header">&nbsp</div>
                                <div class="row">
                                    <div class="col-lg-2">
                                        <input name="{{ form.budget_by_agreement.html_name }}" id="by_agreement"
                                               class="custom-checkbox" type="checkbox"
                                               {% if form.budget_by_agreement.value %}checked{% endif %}>
                                    </div>
                                    <div class="col-lg-10">
                                        <label for="by_agreement" style="font-weight: normal" class="">
                                            Бюджет и срок по договоренности
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="separator">
                                            <div class="border"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <label class="header mod-align-center">
                                            <input id="checkbox-sb-realty" class="custom-checkbox" type="checkbox">
                                            &nbsp; Создать/выбрать объект, прикрепить заказ в объект &nbsp;
                                            <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="row mod-align-bottom">
                                    <div class="col-lg-6">
                                        {#                                        placeholder="Создайте/Выберите объект"#}
                                        <div id="sb-realty"></div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="selected-container horizontal" id="selected-realty">
                                            <input class="-id" type="hidden" name="{{ form.realty.html_name }}"
                                                   value="{{ form.realty.value }}">
                                            <input class="-name" type="hidden" name="new_realty_name" value="">
                                        </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="{{ realty_form.building_classification.html_name }}"
                                                   value="{{ realty_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="{{ realty_form.construction_type.html_name }}"
                                                   value="{{ realty_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="{{ realty_form.location.html_name }}"
                                                   value="{{ realty_form.location.value }}">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="select-box-header vertical-child">
                                            <span style="width: 180px" class="header">Требуется допуск (СРО)</span>
                                            <i class="fa fa-question-circle-o" aria-hidden="true"
                                               title="bla-bla-bla..."></i>
                                        </div>

                                        <div class="custom-check">
                                            <div class="checked"></div>
                                            <div style="display: none" class="not-checked"></div>
                                            <input name="{{ form.cro.html_name }}" type="checkbox" hidden
                                                    {% if form.cro.value %} checked{% endif %}>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="separator">
                                            <div class="border"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- slide -->

                    <div class="row top-line">

                        <div id="is_customer"
                                {% if request.user.is_authenticated and request.user.is_customer or unregister_user %}
                                {% else %}
                             style="display: none"
                                {% endif %}>


                            <div class="col-lg-3" style="text-align: center">
                                <input style="width: 100%" type="submit" class="btn btn-simple js-change-text"
                                       value="{% if pk %}СОХРАНИТЬ{% else %}РАЗМЕСТИТЬ{% endif %} ЗАКАЗ">
                            </div>
                            <div class="col-lg-3 col-lg-offset-6" style="text-align: center">
                                <input style="width: 100%" type="button" class="btn btn-simple"
                                       value="ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР">
                            </div>
                        </div>

                        <div id="not_customer"
                                {% if not request.user.is_authenticated or request.user.is_contractor %}
                                {% else %}
                             style="display: none"
                                {% endif %}
                                {% if  unregister_user %}
                             style="display: none"
                                {% endif %}>
                            <div class="col-lg-12" style="text-align: center">
                                <a onclick="return false" class="btn-simple" data-toggle="modal"
                                   data-target="#registrationFormModal">
                                    ДЛЯ РАЗМЕЩЕНИЯ ЗАКАЗА НЕОБХОДИМО ЗАРЕГИСТРИРОВАТЬСЯ
                                    {% if request.user.is_contractor %}
                                        КАК ЗАКАЗЧИК
                                    {% endif %}
                                </a>
                            </div>
                        </div>
                        <input type="hidden" name="not_auth_user_id" value="{{ unregister_user }}">
                    </div>
                </form>
            </div> <!-- content -->
        </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 "my-libs.js" %}'></script>
{% endblock %}
{% block js_block %}
    <script src='{% static "js/bootstrap.min.js" %}'></script>
    <script src='{% static "js/build/init_customer_project_create.js" %}'></script>
    <script src='{% static "js/build/create_project.js" %}'></script>
    <script src='{% static "js/jquery.mask.min.js" %}'></script>
    <script>
        $(function () {
            $('.js-number-format').mask('0000000000');
        })
    </script>
{% endblock %}