{% extends 'partials/_base.html' %}
{% load staticfiles %}
{% load thumbnail %}
{% load sass_tags %}
{#{% block old_css %}{% endblock %}#}
{% block personal_css %}
    <link rel='stylesheet' href='{% sass_src "lib/proekton-components/sass/components.sass" %}'>
    <link rel='stylesheet' href='{% sass_src "sass/old_main.sass" %}'>
    <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" %}'>
{% endblock %}

{% block content %}
    <div class="container main-scope">
        <div class="row main-content">
{#            <div class="old-main">#}
                <form method="POST" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    {% if request.user.is_customer %}
                        <input type="hidden" name="next" value="{% url 'users:customer-profile' pk=pk %}">
                    {% else %}
                        <input type="hidden" name="next" value="{% url 'users:contractor-profile' pk=pk %}">
                    {% endif %}

                    <div class="col-lg-12">
                        <div class="row row-eq-height">
                            <div class="col-lg-3 -live-image-avatar-upload-container">
                                <div class="avatar" style="float: none">
                                    <div class="avatarInset -position-relative-parent">
                                        <a href="#" onclick="return false" class="btn close -live-image-delete"
                                           style="display: none">&times;</a>

                                        {% if request.user.avatar %}
                                            {% thumbnail request.user.avatar "208x208" crop="center" as avatar %}
                                                <img src="{{ avatar.url }}" alt="profile-image" class="-avatar-image">
                                            {% endthumbnail %}
                                        {% else %}
                                            <img src="{% static 'img/profile.jpg' %}" alt="profile-image"
                                                 class="-avatar-image">
                                        {% endif %}
                                    </div>
                                </div>
                                <div style="margin-top: 15px">
                                    <div class="upload-new">
                                        {#                                    <div class="upload2 up-l1">#}
                                        <input type="file" name="image" class="-live-image-upload">

                                        <p>Загрузить фотографию</p>
                                        {#                                    </div>#}
                                    </div>
                                </div>
                                <div {% if not TESTING %}style="display: none"{% endif %}>
                                    <input type="text" name="live_image" class="-live-image-id">
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="bottom-line">
                                            {% if request.user.is_customer %}
                                                <span class="header">
                                                Полное заполнение профиля влияет на количество откликиков исполнителей и “безопасную сделку”
                                                <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                            </span>
                                            {% else %}
                                                <span class="header">
                                                Параметры заполнения прифоля влияют на фильтр поиска специалистов, ранжирования в списке
                                                <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                            </span>
                                            {% endif %}


                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12" style="padding-bottom: 10px">
                                <span class="header block-header">
                                    Личная информация <i class="fa fa-question-circle-o" aria-hidden="true"
                                                         title=""></i>
                                </span>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-4">
                                        <input value="{{ form.last_name.value }}" name="{{ form.last_name.html_name }}"
                                               class="simple-input" placeholder="Фамилия">
                                    </div>
                                    <div class="col-lg-4">
                                        <input value="{{ form.first_name.value }}"
                                               name="{{ form.first_name.html_name }}"
                                               class="simple-input" placeholder="Имя">
                                    </div>
                                    <div class="col-lg-4">
                                        <input value="{{ form.patronym.value }}" name="{{ form.patronym.html_name }}"
                                               class="simple-input" placeholder="Отчество">
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="vertical-child" id="sb-location-1">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="vertical-child" id="sb-location-2">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="vertical-child" id="sb-location-3">
                                        </div>
                                    </div>
                                    <div class="col-lg-8">
                                        <div class="selected-container horizontal vertical-child no-margin"
                                             id="selected-location">
                                            <div class="header">&nbsp;</div>
                                            <input type="hidden" name="location"
                                                   value="{{ form.location.value }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- top -->
                        {% if request.user.is_contractor %}
                            <div class="row">
                                <div style="padding-bottom: 10px" class="col-lg-12">
                                    <div class="row">
                                        <div class="col-lg-offset-3 col-lg-9">
                                            <div class="top-line">
                                <span class="header block-header">
                                    Мой опыт работы в проектировании / дизайне / сопровождении проектной документации
                                    <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="" id="select-box-1">
                                            </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 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>
                                </div>
                            </div> <!-- center -->
                        {% endif %}
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="top-line" style="padding-top: 15px">
                                            <div class="btn-group toggle" role="group" aria-label="...">
                                                <a style="z-index: 0" href="#"
                                                        {#                                            <a style="z-index: 0" href="{% url 'users:user-profile-edit' pk=pk %}"#}
                                                   role="button"
                                                   class="btn btn-default active">Общая информация</a>
                                                <a href="#"
                                                   class="btn btn-default" role="button">Финансовая информация</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row info">
                                    <div class="col-lg-3">
                                        <div class="header"> Дата рождения</div>
                                        <div class="birth_edit_dat">
                                            {{ form.date_of_birth }}
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div style="position: relative" class="select-box-container custom-select"
                                             id="gender">
                                            <div class="select-box-header">
                                                <div class="header">Пол</div>
                                            </div>
                                            <input class="simple-select" placeholder="Выберите"
                                                   value="{{ form.get_gender_display }}" readonly>
                                            <input type="hidden" name="{{ form.gender.html_name }}"
                                                   value="{{ form.gender.value }}">
                                            <div class="select-box-options" style="width: 100%; display: none">
                                                <div style="min-width: inherit" class="box-wrapper">
                                                    <ul>
                                                        {% for id, text in form.gender.field.choices %}
                                                            <li data-id="{{ id }}">{{ text }}</li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-3">
                                        <div style="position: relative" class="select-box-container custom-select"
                                             id="gender">
                                            <div class="select-box-header">
                                                <div class="header">Статус</div>
                                            </div>
                                            <input class="simple-select" placeholder="Выберите"
                                                   value="{{ form.get_status_display }}" readonly>
                                            <input type="hidden" name="{{ form.contractor_status.html_name }}"
                                                   value="{{ form.contractor_status.value }}">
                                            <div class="select-box-options" style="width: 100%; display: none">
                                                <div style="min-width: inherit" class="box-wrapper">
                                                    <ul>
                                                        {% for id, text in form.contractor_status.field.choices %}
                                                            <li data-id="{{ id }}">{{ text }}</li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="header">Skype</div>
                                        <input name="{{ form.skype.html_name }}" class="simple-input"
                                               placeholder="skype id"
                                               value="{{ form.skype.value }}">
                                    </div>
                                    <div class="clearfix visible-lg"></div>
                                    <div class="col-lg-3 vertical-child">
                                        <div class="header">Сайт</div>
                                        <input name="{{ form.website.html_name }}" class="simple-input"
                                               placeholder="example.com"
                                               value="{{ form.website.value }}">
                                    </div>
                                    <div class="col-lg-3 vertical-child">
                                        <div class="header">Телефон</div>
                                        <input name="{{ form.phone.html_name }}" class="simple-input phone"
                                               placeholder="+7 909 999 00 00"
                                               value="{{ form.phone.value }}"
                                               type="tel">
                                    </div>
                                    <div class="col-lg-3 vertical-child">
                                        <div class="header">Второй телефон</div>
                                        <input name="{{ form.phone2.html_name }}" class="simple-input phone"
                                               placeholder="+7 909 999 00 00"
                                               value="{{ form.phone2.value }}"
                                               type="tel">
                                    </div>
                                    <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>

                            </div>
                        </div> <!-- bottom -->
                    </div>
                </form>
{#            </div>#}
        </div>
    </div>

{% endblock %}
{% block personal_js %}
    {{ block.super }}
    <script src='{% static "lib/proekton-components/js/build/init_user_profile.js" %}'></script>
    <script src='{% static "projects-filter.js" %}'></script>
    <script src='{% static "js/jquery.mask.min.js" %}'></script>
    <script>
        $(function () {
            $('.phone').mask('+7(000)000-00-00');
        })
    </script>
{% endblock %}