{% extends 'partials/base.html' %}

{% load projects_tags %}
{% load specializtions_tags %}
{% load thumbnail %}


{% block content %}
    {% include 'partials/header.html' %}

    <div class="container mainScore mainBlock2">
        <div class="row">
            <div class="col-lg-12">
                <div class="col-lg-3 divCol3">
                    <div class="avatar">
                        <div class="avatarInset">
                            {% thumbnail contractor.avatar "235x224" crop="center" as im %}
                                <img src="{{ im.url }}" alt="profile-image">
                            {% endthumbnail %}
                        </div>
                    </div>
                    <div class="menuUser disTab">
                        <ul>
                            {% if contractor.pk == user.pk %}
                                <li class="icon_um1">
                                    <a href="{% url 'users:user-profile-edit' pk=contractor.pk %}">
                                        редактировать профиль
                                    </a>
                                    <span></span>
                                </li>
                            {% endif %}
                            {% if contractor.pk != user.id %}

                                <li class="icon_um2">
                                    <a href="javascript:void(0)">
                                        пригласить в группу
                                    </a>
                                    <span></span>
                                </li>

                                <li class="icon_um3">
                                    <a href="javascript:void(0)">
                                        написать сообщение
                                    </a>
                                    <span></span>
                                </li>

                                <li class="icon_um4">
                                    <a href="javascript:void(0)">
                                        предложить заказ
                                    </a>
                                    <span></span>
                                </li>

                            {% endif %}
                        </ul>
                    </div>
                </div>
                <div class="col-lg-9 divCol9">
                    <div class="col-lg-4">
                        <p class="nameUser">
                            {{ contractor.get_full_name }} [{{ contractor.username }}]
                        </p>
                        <p class="cityUser">Россия, Москва</p>
                        <p class="navv">На сайте 8 лет и 3 месяца</p>
                        {% if contractor.is_free %}
                            <div class="statusUser">Свободен</div>
                        {% endif %}
                        <a href="javascript:void(0)" class="showCon">показать контакты</a>
                    </div>
                    <div class="col-lg-4">
                        {% specialization_widget contractor.pk %}
                    </div>
                    <div class="col-lg-4">
                        {% ratings_widget contractor.pk %}

                        {% if contractor.cro %}
                            <div class="sroUser">
                                <div class="iconSRO"></div>
                                <p>Есть допуск СРО</p>
                            </div>
                        {% endif %}


                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="profileTabs2">
                        <ul class="nav nav-tabs nav-justified">
                            <li role="presentation" class="active">
                                <a href="#tab11" data-toggle="tab">Портфолио</a>
                            </li>
                            <li role="presentation">
                                <a href="#tab12" data-toggle="tab">Готовые проекты</a>
                            </li>
                            <li role="presentation">
                                <a href="#tab13" data-toggle="tab">Резюме / Квалификация</a>
                            </li>
                            <li role="presentation">
                                <a href="#tab14" data-toggle="tab">Отзывы</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="tab-content">
                    <div id="tab11" class="tab-pane fade in active">
                    {% if contractor.pk == request.user.pk %}
                        <div class="col-lg-9">
                            <p class="addWork">
                                <a href="#" data-toggle="modal" data-target="#portfolio-modal">Добавить работу</a>
                            </p>
                        </div>


                        <div id="portfolio-modal" class="modal fade">
                            <div class="modal-dialog" style="width:900px;">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title">Добавить портфолио</h4>
                                    </div>
                                    {% include 'portfolio_create_form.html' %}
                                </div>
                            </div>
                        </div>
                    {% endif %}

                        <div class="galleryWork2 disTab">
                            {% for p in user.portfolios.all %}
                                <div class="col-lg-4">
                                    <div class="insetCol box-sizing disTab">
                                        <div class="imgGal"
                                             style="background:rgba(0, 0, 0, 0) url('{{ p.get_cover }}') no-repeat scroll center center / cover ;">
                                            <div class="imgFigure"></div>
                                        </div>
                                    </div>
                                    <div class="insetCol2 box-sizing disTab">
                                        <p>{{ p.name }}</p>
                                        <div class="buttonsImg" disTab>
                                            <a href="{% url 'projects:contractor-portfolio-edit' p.pk %}">
                                                <div class="insetBI insetBI1">
                                                    <i class="fa fa-pencil"></i>
                                                </div>
                                            </a>
                                            <div class="insetBI insetBI2">
                                                <i class="fa fa-times"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}

                        </div>

                        <div class="col-lg-9 col-lg-offset-3">
                            <div class="linkElse">
                                <a href="javascript:void(0)" class="showElse">показать еще</a>
                            </div>
                        </div>
                    </div>

                    <div id="tab12" class="tab-pane fade">
                    {% if contractor.pk == request.user.pk %}
                        <div class="col-lg-9">
                            <p class="addWork">
                                <a href="#" data-toggle="modal" data-target="#worksell-modal">Добавить проект</a>
                            </p>
                        </div>
                        <div id="worksell-modal" class="modal fade">
                            <div class="modal-dialog" style="width: 900px;">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title">Добавить готовую работу</h4>
                                    </div>
                                    {% include 'worksell_create_form.html' %}
                                </div>
                            </div>
                        </div>
                    {% endif %}

                        <div class="galleryWork2 disTab">
                            {% for ws in user.work_sell.all %}
                                <div class="col-lg-4">
                                    <div class="insetCol box-sizing disTab">
                                        <div class="imgGal"
                                             style="background:rgba(0, 0, 0, 0) url('/media/{{ ws.img }}') no-repeat scroll center center / cover ;">
                                            <div class="imgFigure"></div>
                                        </div>
                                        <div class="cenaImg box-sizing">
                                            <div class="cenaImgInset">
                                                {{ ws.budget }} <i class="fa fa-rub"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="insetCol2 box-sizing disTab">
                                        <p>{{ ws }}</p>
                                        <div class="buttonsImg" disTab>
                                            <div class="insetBI insetBI1">
                                                <a href="{% url 'work_sell:edit' ws.pk %}">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                            </div>
                                            <div class="insetBI insetBI2">
                                                <i class="fa fa-times"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="col-lg-9 col-lg-offset-3">
                            <div class="linkElse">
                                <a href="javascript:void(0)" class="showElse">показать еще</a>
                            </div>
                        </div>
                    </div>

                    <div id="tab13" class="tab-pane fade">
                        <div class="col-lg-9 resume">
                            <div class="upload2 up-l1">
                                <input type="file" name="upload">
                                <p>Загрузить резюме</p>
                            </div>
                            <div class="upload2 up-l2">
                                <input type="file" name="upload">
                                <p>Загрузить файл</p>
                            </div>
                        </div>
                        <div class="col-lg-9 resume-block">
                            <div class="block-is box-sizing">
                                <div class="block-i">
                                    {% thumbnail contractor.avatar "176x160" crop="center" as im %}
                                        <img src="{{ im.url }}" alt="profile-image">
                                    {% endthumbnail %}

                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="top-summary">
                                    <p class="name-summ">{{ user.get_full_name }}</p>
                                    {% if contractor.contractor_resume.resume_file %}
                                        <a href="{{ contractor.contractor_resume.resume_file.url }}"
                                           class="download-summ">скачать резюме</a>
                                    {% endif %}
                                    <p class="who-summ">
                                        {#                                        Мужчина, 24 года, {{ user.date_of_birth }}#}
                                    </p>
                                    <div class="list-summ-block">
                                        <div class="col-lg-4">
                                            <ul class="list-summ">
                                                <li>{{ contractor.website }}</li>
                                                <li>{{ contractor.email }}</li>
                                                <li>{{ contractor.phone }}</li>
                                                <li>Россия, Москва</li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 col-lg-offset-2">
                                            <div class="dashedCol4">
                                                <p class="specUser">
                                                    Специализации:
                                                </p>
                                                <div class="insetSpec">
                                                    <span>Интерьеры</span>
                                                    <span>2-й</span>
                                                </div>
                                                <div class="insetSpec">
                                                    <span>Визуализация/3D</span>
                                                    <span>45-й</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 wr-inset-pluss">
                                <div class="pluss-block">
                                    {{ contractor.contractor_resume.text }}

                                     <a href="#" data-toggle="modal" data-target="#resume-text-edit">Редактировать</a>
                                </div>

                                <!-- Редактирование текста резюме (модальное окно)-->
                                <div id="resume-text-edit" class="modal fade">
                                    <div class="modal-dialog" style="width:900px;">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                <h4 class="modal-title">Редактировать текст резюме</h4>
                                            </div>

                                            <div class="modal-body">
                                                <div class="textAreaBlock2 text-nn box-sizing disTab">
                                                        <p>Описание резюме</p>
                                                        <textarea name="" id="text-new">{{ contractor.contractor_resume.text }}</textarea>
                                                </div>

                                                <div class="searchF1 polsF1 polsFF links-filter">
                                                    <input class="btn-submit-link" type="submit" value="Сохранить">
                                                </div>
                                            </div>
                                            <div class="modal-footer"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Конец блока (resume-modal)-->

                                <div class="gal-pluss">
                                    <div class="inset-gp">
                                        <p class="title-gp">Дипломы / Сертификаты</p>
                                        <div class="upload2 up-l3">
                                            <input type="file" name="file" id="diplom-upload" multiple>
                                            <p>Загрузить файл</p>
                                        </div>
                                        <div class="galleryWork2 gal-iss disTab" id="diplom-gallery">

                                            {% for diplom in resume_diploms %}
                                                <div class="col-lg-4">
                                                    <div class="insetCol box-sizing disTab">
                                                        {% thumbnail diplom.img "210x334" crop="center" as im %}
                                                            <div class="imgGal"
                                                                 style="background: url('{{ im.url }}') no-repeat center;">
                                                                <div class="imgFigure"></div>
                                                            </div>
                                                        {% endthumbnail %}
                                                    </div>
                                                    <div class="insetCol2 box-sizing disTab">
                                                        <p>
                                                            {{ diplom.title }}
                                                        </p>
                                                        <div class="buttonsImg" distab="">
                                                            <div class="insetBI insetBI2">
                                                                <i class="fa fa-times"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}


                                        </div>
                                    </div>
                                    <div class="inset-gp">
                                        <p class="title-gp">Допуск СРО</p>
                                        <div class="upload2 up-l3">
                                            <input type="file" name="file" id="cro-upload">
                                            <p>Загрузить файл</p>
                                        </div>
                                        <div class="galleryWork2 gal-iss disTab" id="cro-gallery">

                                            {% for cro in resume_cro %}
                                                <div class="col-lg-4">
                                                    <div class="insetCol box-sizing disTab">
                                                        {% thumbnail cro.img "210x334" crop="center" as im %}
                                                            <div class="imgGal"
                                                                 style="background: url('{{ im.url }}') no-repeat center;">
                                                                <div class="imgFigure"></div>
                                                            </div>
                                                        {% endthumbnail %}
                                                    </div>
                                                    <div class="insetCol2 box-sizing disTab">
                                                        <p>
                                                            {{ cro.title }}
                                                        </p>
                                                        <div class="buttonsImg" distab="">
                                                            <div class="insetBI insetBI2">
                                                                <i class="fa fa-times"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab14" class="tab-pane fade">
                        <div class="new-comm-44">
                            <div class="col-lg-12">
                                <p class="nameComm">
                                    <a href="#">Иванов Петр Иванович</a>
                                </p>
                                <span class="dateComm44">
                                    Безопасная сделка
                                </span>
                                <div class="stars box-sizing">
                                    <span class="glyphicon glyphicon-star starAct" aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star starAct" aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star starAct" aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                    <a href="#">положительный отзыв</a>
                                </div>
                                <p class="textComm44">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum

                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    {% include 'partials/footer.html' %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block js_block %}
    <script type="text/javascript">
        var userId = '{{ contractor.pk }}';

        $(function () {
            $('#worksell-add-form').on('submit', function (e) {
                e.preventDefault();
                var dataSerializer = $(this).serialize();
                $.ajax({
                    url: '/work_sell/test/',
                    method: 'POST',
                    data: dataSerializer,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 'ok') {
                            location.reload();
                        }
                    },
                    error: function (jqXHR, exception) {
                        console.log(jqXHR.statusCode);
                    }

                })
            });


            $('#portfolio-add-form').on('submit', function (e) {
                e.preventDefault();
                var dataSerializer = $(this).serialize();
                $.ajax({
                    url: '/projects/portfolio/create/',
                    method: 'POST',
                    data: dataSerializer,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 'ok') {
                            $('#portfolio-add-form').each(function(){
                                this.reset();
                            });
                            location.reload();
                        }else if(data.status == 'no'){
                            $.each(data.form_errors, function(k,v){
                                $('.error-'+ k).html(v).show();
                            });
                        }
                    },
                    error: function (jqXHR, exception) {
                        console.log(jqXHR.statusCode);
                    }
                });
            });
            var url = '/work_sell/basic/';
            var csrftoken = $.cookie('csrftoken');

            $('#fileupload').fileupload({
                url: url,
                crossDomain: false,
                beforeSend: function (xhr, settings) {
                    $('#progress-portfolio .progress-bar').css(
                            'width',
                            '0%'
                    );
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                },
                dataType: 'json',
                done: function (e, data) {
                    console.log(data);
                    $.each(data.result.files, function (index, file) {
                        var img = $('<img style="width:200px;height:200px;margin:10px;">').attr('src', file.url).appendTo("#files");
                        console.log(file);
                        var currentValue = $("#upload-files-pk").val();
                        currentValue += file.id + ';';
                        $("#upload-files-pk").val(currentValue);

                    });
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    console.log(progress);
                    $('#progress-portfolio .progress-bar').css(
                            'width',
                            progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');

            $('#fileupload-worksell').fileupload({
                url: url,
                crossDomain: false,
                beforeSend: function (xhr, settings) {
                    $('#progress-worksell .progress-bar').css(
                            'width',
                            '0%'
                    );
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                },
                dataType: 'json',
                done: function (e, data) {
                    console.log(data);
                    $.each(data.result.files, function (index, file) {
                        var img = $('<img style="width:200px;height:200px;margin:10px;">').attr('src', file.url).appendTo("#files-worksell");
                        console.log(file);
                        var currentValue = $("#upload-files-worksell-pk").val();
                        currentValue += file.id + ';';
                        $("#upload-files-worksell-pk").val(currentValue);

                    });
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    console.log(progress);
                    $('#progress-worksell .progress-bar').css(
                            'width',
                            progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');


            $('#diplom-upload').fileupload({
                url: url,
                crossDomain: false,
                beforeSend: function (xhr, settings) {
                    $('#progress .progress-bar').css(
                            'width',
                            '0%'
                    );
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                },
                dataType: 'json',
                done: function (e, data) {;
                    $.each(data.result.files, function (index, file) {
                        var htmlImg = '<div class="col-lg-4"><div class="insetCol box-sizing disTab"><div class="imgGal" style="background: url(+ file.url +) no-repeat center;"><div class="imgFigure"></div></div></div> ' +
                                '<div class="insetCol2 box-sizing disTab"><p>Название</p><div class="buttonsImg" distab="">' +
                                '<div class="insetBI insetBI2"><i class="fa fa-times"></i></div></div></div></div>';

                        var img = $(htmlImg).appendTo("#diplom-gallery");

                    });
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                            'width',
                            progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');

            $('#cro-upload').fileupload({
                url: url,
                crossDomain: false,
                beforeSend: function (xhr, settings) {
                    $('#progress .progress-bar').css(
                            'width',
                            '0%'
                    );
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                },
                dataType: 'json',
                done: function (e, data) {;
                    $.each(data.result.files, function (index, file) {
                        var htmlImg = '<div class="col-lg-4"><div class="insetCol box-sizing disTab"><div class="imgGal" style="background: url(+ file.url +) no-repeat center;"><div class="imgFigure"></div></div></div> ' +
                                '<div class="insetCol2 box-sizing disTab"><p>Название</p><div class="buttonsImg" distab="">' +
                                '<div class="insetBI insetBI2"><i class="fa fa-times"></i></div></div></div></div>';

                        var img = $(htmlImg).appendTo("#cro-gallery");

                    });
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                            'width',
                            progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');
        });


        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
    </script>
{% endblock %}