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

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


{% block content %}
    {% include 'partials/modals/add_team_member.html' %}
    {% include 'partials/header.html' %}
    
    <div class="container mainScore">
        <div class="row">
            <div class="col-lg-12">
                <p class="titleScore">Личный кабинет</p>
            </div>
            
            {% include 'partials/contractor_profile_tabs.html' %}
            
            <div class="buttonGP disTab">
                <div class="btn-group valProject2 val-pro3" role="group">
                    {% if contractor.team %}
                        <button type="button" class="btn btn-default">
                            {{ contractor.team.name }}
                            <span><mark>0</mark></span>
                        </button>
                    {% else %}
                        <button type="button" class="btn btn-default add-group" data-toggle="modal" data-target="#myModal">
                            + Добавить группу
                        </button>
                    {% endif %}
                </div>
                
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                
                                <h4 class="modal-title" id="myModalLabel">Добавление новой группы</h4>
                            </div>
                            
                            <form method="post" action="{% url 'users:team-create' %}">{% csrf_token %}
                                <div class="modal-body">
                                    <div class="textAreaBlock2 text-nn box-sizing disTab">
                                        <p>Название <span style="color: red">{{ form_team.name.errors.as_text }}</span></p>
                                        <input type="text" class="box-sizing" name="{{ form_team.name.html_name }}">
                                    </div>
                                </div>
                                
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                    <button type="submit" class="btn btn-primary">Сохранить</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            {% if contractor.team %}
                <div class="projectsBlock disTab">
                    <div class="col-lg-12">
                        <div class="col-lg-3 divCol3">
                            <div class="avatar">
                                <div class="avatarInset">
                                    {% if contractor.avatar %}
                                        {% thumbnail contractor.avatar "265x264" crop="center" as im %}
                                            <img src="{{ im.url }}" alt="profile-image">
                                        {% endthumbnail %}
                                    {% else %}
                                        <img src="{% static 'img/profile.jpg' %}" alt="profile-image">
                                    {% endif %}
                                </div>
                            </div>
    
                            <div class="menuUser disTab">
                                <a href="#" onclick="return false" data-toggle="modal" data-target="#addTeamMemberModal" class="add-man -add-team-member">
                                    добавить участника
                                </a>
    
                                <div class="block-users">
                                    <p>Состав группы</p>
    
                                    {% for c in contractor.team.contractors.all %}
                                        <div class="message-new">
                                            <div class="imgMess">
                                                {% if c.avatar %}
                                                    {% thumbnail c.avatar "60x60" crop="center" as im %}
                                                        <img src="{{ im.url }}" alt="mess-image">
                                                    {% endthumbnail %}
                                                {% else %}
                                                    <img src="{% static 'img/profile.jpg' %}" alt="mess-image">
                                                {% endif %}
                                            </div>
    
                                            <p class="nameMess" style="float: none">
                                                <a href="{% url 'users:contractor-profile' c.pk %}">{{ c.get_full_name }}</a>
                                            </p>
    
                                            <p><span>{{ c.get_popular_specialization }}</span></p>
                                        </div>
                                    {% empty %}
                                        В группе пока нет участников
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
    
                        <div class="col-lg-9 divCol9">
                            <div class="col-lg-4">
                                <p class="nameUser">{{ contractor.team.name }}</p>
                                <p class="cityUser">{{ contractor.get_location }}</p>
                                <p class="navv">На сайте {{ contractor.team.created }}</p>
                                
                                <p class="navv">
                                    Кол-во человек: <span>{{ contractor.team.contractors.count }}</span>
                                </p>
                                
                                <p class="navv">
                                    Выполненных проектов: <span>{{ completed_project_count }}</span>
                                </p>
                                
                                <div class="statusUser st-new">Свободен</div>
                                <a href="javascript:void(0)" class="new-prop new-prop2 new-prop3">написать сообщение</a>
                            </div>
    
                            <div class="col-lg-4">
                                {% specialization_team_widget contractor.team.pk %}
                            </div>
    
                            <div class="col-lg-4">
                                {% ratings_team_widget contractor.team.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>
                                </ul>
                            </div>
                        </div>
    
                        <div class="tab-content">
                            <div id="tab11" class="tab-pane fade in active">
                                <div class="galleryWork2 disTab col-lg-9 -portfolios-container">
                                    <script type="text/template" class="-portfolio-item-templ">
                                        <div class="col-lg-4">
                                            <div class="insetCol box-sizing disTab">
                                                <div class="imgGal" style="background:rgba(0, 0, 0, 0) url('<%- portfolio.photos[0].img %>') no-repeat scroll center center / cover">
                                                    <a class="open-modal-image" href="<%- portfolio.photos[0].img %>"><div class="imgFigure"></div></a>
                                                </div>
                                            </div>
                                            
                                            <div class="insetCol2 box-sizing disTab text-center">
                                                <a href="<%- portfAbsUrl %>"><%- trunc({length: 50}, portfolio.name) %></a>
                                            </div>
                                        </div>
                                    </script>
                                </div>
                                
                                <div class="col-lg-9 col-lg-offset-3 -more-portfolios-btn">
                                    <div class="linkElse">
                                        <a href="#" onclick="loadMorePortfolios(); return false" class="showElse">показать еще</a>
                                    </div>
                                </div>
                            </div>
    
                            <div id="tab12" class="tab-pane fade">
                                <div class="galleryWork2 disTab -work-sells-container">
                                    <script type="text/template" class="-work-sell-item-templ">
                                        <div class="col-lg-4">
                                            <div class="insetCol box-sizing disTab">
                                                <div class="imgGal" style="background:rgba(0, 0, 0, 0) url('<%- workSell.photos[0].img %>') no-repeat scroll center center / cover ;">
                                                    <a class="open-modal-image" href="<%- workSell.photos[0].img %>"><div class="imgFigure"></div></a>
                                                </div>
                                                
                                                <div class="cenaImg box-sizing">
                                                    <div class="cenaImgInset">
                                                        <%- workSell.budget %> <i class="fa fa-rub"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="insetCol2 box-sizing disTab">
                                                <a href="<%- workSellAbsUrl %>"><%- trunc({length: 50}, workSell.name) %></a>
                                            </div>
                                        </div>
                                    </script>
                                </div>
                                
                                <div class="col-lg-9 col-lg-offset-3 -more-work-sells-btn">
                                    <div class="linkElse">
                                        <a href="#" onclick="loadMoreWorkSells(); return false" class="showElse">показать еще</a>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="tab13" class="tab-pane fade">
                                {% for review in reviews %}
                                    <div class="new-comm-44">
                                        <div class="col-lg-12">
                                            <p class="nameComm">
                                                <a href="#">{{ review.get_sender }}</a>
                                            </p>
                                            
                                            {% if review.project.deal_type == 'secure_deal' %}
                                                <span class="dateComm44">Безопасная сделка</span>
                                            {% endif %}
                                            
                                            <div class="stars box-sizing">
                                                <a href="#">положительный отзыв</a>
                                            </div>
                                            
                                            <p class="textComm44">
                                                {{ review.text|safe }}
                                            </p>
                                        </div>
                                    </div>
                                {% empty %}
                                    <div class="new-comm-44">
                                        <p style="text-align: center;">Отзывов пока нет</p>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            
            {% include 'partials/footer.html' %}
        </div>
    </div>
{% endblock %}

{% block js_block %}
    <script>
        (function() {
            var $portfoliosContainer = $('.-portfolios-container').first()
            var portfolioItemTempl = _.template($portfoliosContainer.find('.-portfolio-item-templ').first().html())
            var $morePortfBtn = $('.-more-portfolios-btn').first()
            var portfAbsUrl = '/projects/portfolio/'
            
            var $workSellsContainer = $('.-work-sells-container').first()
            var workSellItemTempl = _.template($workSellsContainer.find('.-work-sell-item-templ').first().html())
            var $moreWorkSellsfBtn = $('.-more-work-sells-btn').first()
            var workSellAbsUrl = '/work_sell/'
            
            var contractorId = {{ contractor.pk }}
            var teamId = {{ contractor.team.pk }}
            var contractorIds = [contractorId]
            
            var portfUrl = new URI('/api/portfolios/')
            var workSellUrl = new URI('/api/work-sells/')
            var pageSize = 3
            
            $.get('/api/teams/' + teamId + '/').then(function(res) {
                Array.prototype.push.apply(contractorIds, _.map(function(contractor) {
                    return contractor.id
                }, res.contractors))
            })
                .then(loadMorePortfolios)
                .then(loadMoreWorkSells)
            
            function loadMorePortfolios() {
                var query = portfUrl.query(true)
                
                portfUrl.setQuery('user__id__in', _.join(',', contractorIds))
                portfUrl.setQuery('page_size', pageSize)
                portfUrl.setQuery('page', query.page ? Number(query.page) + 1 : 2)
                
                $.get(portfUrl.href())
                    .then(function(res) {
                        _.each(function(portfolio) {
                            $portfoliosContainer.append(portfolioItemTempl({
                                portfolio: portfolio,
                                portfAbsUrl: portfAbsUrl + portfolio.id + '/',
                                trunc: _.truncate,
                            }))
                        }, res.results)
                        
                        if (!res.next)
                            $morePortfBtn.css('display', 'none')
                    })
                    
                    .then(function() {
                        $('.open-modal-image').magnificPopup({type: 'image'})
                    })
            }
            
            function loadMoreWorkSells() {
                var query = workSellUrl.query(true)
                
                workSellUrl.setQuery('contractor', contractorId)
                workSellUrl.setQuery('page_size', pageSize)
                workSellUrl.setQuery('page', query.page ? Number(query.page) + 1 : 2)
                
                $.get(workSellUrl.href()).then(function(res) {
                    _.each(function(ws) {
                        $workSellsContainer.append(workSellItemTempl({
                            workSell: ws,
                            workSellAbsUrl: workSellAbsUrl + ws.id + '/',
                            trunc: _.truncate,
                        }))
                    }, res.results)
                    
                    if (!res.next)
                        $moreWorkSellsfBtn.css('display', 'none')
                })
            }
            
            window.loadMorePortfolios = loadMorePortfolios
            window.loadMoreWorkSells = loadMoreWorkSells
            
            
            
            // Add new team member --------------------------------------------
            
            
            {% if request.user.has_team %}
                var $contractorSelect = $('.-contractor-select').first()
                var $addTeamMemberModal = $('#addTeamMemberModal')
{#                var addTeamMemberUrl = '/users/add-team-member/%id%/'#}
                
                initContractorSelect($contractorSelect)
                
                $addTeamMemberModal.find('.-action-button').first().on('click', function($evt) {
                    $addTeamMemberModal.modal('hide')
                    
                    socketMain.add_message({
                        format_type: 'add_message_contact',
                        
                        data: {
                            sender_id: {{ request.user.pk }},
                            recipent_id: $contractorSelect.select2('val'),
                            chat_message: 'Приглашаю в группу http://{{ request.get_host }}{% url 'users:team-profile' pk=request.user.team.pk %}',
                        },
                    })
                    
                    $.jGrowl('Приглашение успешно отправлено')
                })
            {% endif %}
        }())
    </script>
{% endblock %}