{% extends 'partials/base.html' %}
{% load i18n %}
{% load staticfiles %}
{% block head_css %}
    <link rel='stylesheet' href='{% static "lib/proekton-components/css/fonts.css" %}'>
    <link rel='stylesheet' href='{% static "lib/proekton-components/css/selected-container.css" %}'>
    <link rel='stylesheet' href='{% static "lib/proekton-components/css/editable-container.css" %}'>
    <link rel='stylesheet' href='{% static "lib/proekton-components/css/select-box.css" %}'>
    <link rel='stylesheet' href='{% static "css/project_filter.css" %}'>{#  other  #}
    <link rel='stylesheet' href='{% static "css/font-awesome.min.css" %}'>
    <link rel='stylesheet' href='{% static "css/user_profile_edit.css" %}'>
    <link rel='stylesheet' href='{% static "css/custom-checkboxes.css" %}'>
    <link rel='stylesheet' href='{% static "css/customer_project_create.css" %}'>
{% endblock %}

{% block content %}
    {% include 'partials/modals/project_work_type_suggestion.html' %}
    {% include 'partials/header.html' %}
    <div class="container mainScore">
        <div class="row mainContent">
            <div class="row">
                <div class="col-lg-12 allProjects">
                    <p class="titleScore">Новый заказ</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-9">
                    <div class="header">Название заказа
                        <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                    </div>
                    <input value="" name="" class="simple-input"
                           placeholder="Пример: Дизайн квартиры, Армирование фундамента, Конструкции перекрытия и т.д.">
                </div>
                <div class="col-lg-3">

                </div>
            </div>
            <div class="row vertical-child">
                <div class="col-lg-9">
                    <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">
                    <div class="selected-container horizontal" id="selected-spec">
                        <input type="hidden" name="{{ form.contractor_specializations.html_name }}"
                               value="{{ form.contractor_specializations.value }}">
                    </div>
                </div>
            </div>
            <div style="margin-top: 45px" class="row">
                <div class="col-lg-12">
                    <div class="header">
                        Подобно опишите задание для / ...
                        <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i> Обязательно
                    </div>
                    <textarea style="width: 100%" rows="6" placeholder=
                            " Пример №1
  Разработать архиьектурные решения для жилого дома на основании эскизной проработки


  Пример №2
  Разработать проект по електроснабжению и освещению гаража"></textarea>

                    {#                    <div id="fileUploadContainer" class="upload-new paper-clip">#}
                    {#                        <p id="fileUploadAddBtn" style="margin: 0">прикрепить файл</p> до 100 файлов#}
                    {#                    </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">
                            <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">
                                <p class="file-upload-label"></p>
                                <div class="file-upload-remove-btn"></div>
                            </li>
                        </ul>
                    </div>


                </div>
            </div>

            <div class="row separator">
                <div class="col-lg-12">
                    <div class="flex">
                        <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 active">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="header">Способ оплаты</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <label>
                            <input type="checkbox"> Безопасная сделка (с резервированием бюджета)
                        </label>
                        <div class="description">
                            Безопасная сделка – это сервис, с помощью которого:
                            -Заказчики - полностью избавляются от всех финансовых рисков при сотрудничестве с
                            Исполнителями;
                            -Исполнители - получают гарантию своевременной оплаты своей работы (выполненной по заданию
                            точно в срок).

                            Это сервис и тип оплаты в заказах, в котором сумма оплаты резервируется (перечисляется на
                            сайт) Заказчиком до начала работы и выплачивается Исполнителю только после успешного
                            выполнения задания. А в случае некачественного и/или несвоевременного выполнения –
                            возвращается Заказчику.

                            Сайт выступает в Безопасных сделках хранителем и гарантом сохранности средств. А в случае
                            возникновения конфликтов в заказе - Арбитром, независимой третьей Стороной, помогающей
                            решить проблемы при сотрудничестве и справедливо распорядиться зарезервированной суммой:
                            -выплатить ее Исполнителю, если работа выполнена своевременно и в полном соответствии с
                            заданием;
                            -вернуть Заказчику, если работа не выполнена или нарушены сроки выполнения;
                            -разделить сумму между Заказчиком и Исполнителем, если работа выполнена частично и без
                            нарушения сроков.
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <label>
                            <input type="checkbox"> Прямая оплата Исполнителю на его кошелек/счет
                        </label>
                        <div class="description">
                            Прямая оплата - это оплата без помощи сайта. Оплаты заказов происходят напрямую исполнителю
                            на его личный счет или кошелек.

                            В данном случае сайт не выступает гарантом сохранности средств и не является Арбитром при
                            спорных вопросах.
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3">
                        <div class="header ">Бюджет
                            <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                        </div>
                        <input name="..." class="simple-input" placeholder="Введите сумму" value="">
                    </div>
                    <div class="col-lg-3">
                        <div class="header">Срок
                            <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                        </div>
                        <input name="..." class="simple-input" placeholder="Введите срок" value="">
                    </div>
                    <div class="col-lg-3">
                        <label>
                            <input type="checkbox"> Сделать для исполнителей обязательным для заполнения поля цена и
                            срок
                            <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                        </label>
                    </div>
                    <div class="col-lg-3">
                        <label>
                            <input type="checkbox"> Бюджет и срок по договоренности
                            <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                        </label>
                    </div>
                </div>
                <div class="row separator">
                    <div class="col-lg-12">
                        <div class="flex">
                            <div class="border"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <input type="checkbox"> Создать/выбрать объект, прикрепить объект к заказу
                        <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <input name="..." class="simple-input" placeholder="Создайте/Выберите объект" value="">
                    </div>
                    <div class="col-lg-6">
                        <div class="selected-container horizontal" id="selected-obj">
                            <input type="hidden" name="obj" value="">
                        </div>
                    </div>
                </div>
                <!-- bottom block -->
                <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.contractor_building_classifications.html_name }}"
                                   value="{{ form.contractor_building_classifications.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.contractor_construction_types.html_name }}"
                                   value="{{ form.contractor_construction_types.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> <!-- bottom block -->
                <div class="row top-line">
                    <div class="col-lg-3 vertical-child" style="text-align: center">
                        <div class="header">&nbsp;</div>
                        <input type="submit" class="btn btn-simple" value="РАЗМЕСТИТЬ ЗАКАЗ">
                    </div>
                    <div class="col-lg-3 col-lg-offset-6 vertical-child" style="text-align: center">
                        <div class="header">&nbsp;</div>
                        <input type="submit" class="btn btn-simple" value="ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР">
                    </div>
                </div>
            </div> <!-- slide -->

        </div> <!-- content -->
    </div>
{% endblock %}
{% block js_block %}
    <script src='{% static "lib/proekton-components/js/build/init_customer_project_create.js" %}'></script>
{% endblock %}