{% extends "base.html" %}
{% load gravatar %}
{% load static %}
{% load custom_tags %}

{% block style %}
<style>
    a {
        color: inherit;
        text-decoration: inherit;
    }

    .img-thumbnail {
        width: 200px;
        height: 200px;
    }

    .fa-money {
        margin-right: 5px;
    }

    .list-group .label-default {
        margin-top: 3px;
    }

    .icon-block kbd {
        width: 180px;
        height: 50px;
        font-size: 16px;
        text-align: center;
        line-height: 45px;
        margin: 2px;
    }

    .unrated {
        position: absolute;
        left: 130px;
        top: 8px;
        padding: 10px;
        font-weight: bolder;
    }

    .silver {
        background-color: lightblue;
        color: #333;
        position: absolute;
        left: 140px;
        top: 8px;
        padding: 10px;
        font-weight: bolder;
    }

    .gold {
        background-color: #D4AF37;
        color: #333;
        position: absolute;
        left: 155px;
        top: 8px;
        padding: 10px;
        font-weight: bolder;
    }

    .bronze {
        background-color: #C9AE5D;
        color: #333;
        position: absolute;
        left: 140px;
        top: 8px;
        padding: 10px;
        font-weight: bolder;
    }

    .upload-btn,
    .upload-btn:hover {
        margin-top: -40px;
        opacity: 0.6;
        width: 200px;
        border: none;
        height: 30px;
        background: whitesmoke;
        display: none;
    }

    .upload {
        display: none;
        width: 200px;
    }

    .fa-cogs {
        color: white;
    }

    .fa-exclamation-triangle {
        color: #ff4444;
    }

    .fa-trophy {
        color: #FF8800;
    }

    .fa-flash {
        color: #00C851;
    }

    .fa-lock {
        color: #0099CC;
    }

    .fa-eraser {
        color: white;
    }

    .fa-code {
        color: #ef6c00;
    }

    .fa-star {
        color: #0099CC;
    }

    .fa-bug {
        color: #00C851;
    }

    .fa-code-fork {
        color: #ff4444;
    }

    .scroll {
        max-height: 1100px;
        overflow-y: auto;
    }

    #target_div .btn {
        width: 200px;
        margin-top: 10px;
    }

    .list-group-item .badge {
        margin-right: 30px;
        margin-top: 10px;
    }

    .icon-block kbd a {
        color: inherit;
        text-decoration: none;
    }

    .issue-hide-btn {
        background-color: rgb(245, 220, 79);
        position: relative;
        bottom: 2.5px;
        left: 10px;
        height: 30px;
        font-weight: 700;
    }
    .issue-hide-btn:hover {
        color:black;
        background-color: rgb(98, 207, 88);
    }

    .hide-issue-form {
        padding-top: 10px;
    }
</style>
{% endblock %}

{% block content %}
<script type="text/javascript" src="{% static 'js/Chart.bundle.min.js' %}"></script>
<div class="row">
    <h1 class="page-header text-capitalize">{{ user.username }}</h1>
    <div class="col-md-3">
        {% if user.userprofile.avatar %}
        <img src="{{ user.userprofile.avatar }}" class="img-responsive img-thumbnail">
        {% else %}
        <img src="{% gravatar_url user.email 200 %}" class="img-responsive img-thumbnail">
        {% endif %}
        {% if request.user == user %}
        <button class="upload-btn">Edit Profile Pic</button>
        <form method="post" action="." enctype="multipart/form-data">
            {% csrf_token %}
            <input type="file" id='${multipartFilePath}' name="user_avatar" />
            <button type="submit" id="follow" class="btn btn-primary upload">
                <span class="badge badge-avatar"></span> Upload
            </button>
        </form>
        {% endif %}
        <kbd class="{{ user.userprofile.get_title_display }} text-uppercase title">
            {{ user.userprofile.get_title_display }}
        </kbd>
        {% if request.user == user %}
        <div class="hide-issue-form">
            <form action="." method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="checkbox" id="hide_user_issues" name="issues_hidden" {{ issues_hidden }}>
                <label for="hide_user_issues">Hide all issues</label>
                <button type="submit" class="btn issue-hide-btn">OK</button>
            </form>
        </div>
        {% endif %}
        <div id="target_div">
            {% if request.user != user and request.user.is_authenticated %}
            {% if request.user.email in followers_list %}
            <a class="follow_unfollow btn btn-default" name="{{ user }}">Unfollow</a>
            {% else %}
            <a class="follow_unfollow btn btn-default" name="{{ user }}">Follow</a>
            {% endif %}
            {% endif %}

            <div class="status">
                <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_xclick">
                    <input type="hidden" name="business" value="{{ project.paypal|default:" coderbounty@gmail.com" }}">
                    <input type="hidden" name="item_name" value="tip for {{ user.username }} on {% env 'DOMAIN_NAME' %}">
                    <input type="hidden" name="currency_code" value="USD">
                    <button type="submit" class="btn btn-danger">
                        <i class="fa fa-money fa-lg"></i> Send a tip
                    </button>
                </form>
            </div>
        </div>
        <div class="icon-block">
            <kbd class="fa fa-cogs">
                <a href="/label_activity?user={{ user.username }}&label=General">
                    General {{ bug_type_0 | length }}
                </a>
            </kbd>
            <kbd class="fa fa-exclamation-triangle">
                <a href="/label_activity?user={{ user.username }}&label=Number">
                    Number {{ bug_type_1 | length }}
                </a>
            </kbd>
        </div>
        <div class="icon-block">
            <kbd class="fa fa-trophy">
                <a href="/label_activity?user={{ user.username }}&label=Functional">
                    Functional {{ bug_type_2 | length }}
                </a>
            </kbd>
            <kbd class="fa fa-flash">
                <a href="/label_activity?user={{ user.username }}&label=Performance">
                    Performance {{ bug_type_3 | length }}</a>
            </kbd>
        </div>
        <div class="icon-block">
            <kbd class="fa fa-lock">
                <a href="/label_activity?user={{ user.username }}&label=Security">
                    Security {{ bug_type_4 | length }}
                </a>
            </kbd>
            <kbd class="fa fa-eraser">
                <a href="/label_activity?user={{ user.username }}&label=Typo">
                    Typo {{ bug_type_5 | length }}
                </a>
            </kbd>
        </div>
        <div class="icon-block">
            <kbd class="fa fa-code">
                <a href="/label_activity?user={{ user.username }}&label=Design">
                    Design {{ bug_type_6 | length }}
                </a>
            </kbd>
        </div>
    </div>
    <div class="col-md-6">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li role="presentation" class="active">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Stats</a>
            </li>
            <li role="presentation">
                <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Followers
                    [{{ followers|length }}]</a>
            </li>
            <li role="presentation">
                <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Following
                    [{{ following|length }}]</a>
            </li>
            <li role="presentation">
                <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Bookmarks
                    [{{ bookmarks|length }}]</a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                {% if activities %}
                <canvas id="myChart" width="400" height="350"></canvas>
                {% else %}
                <div class="alert alert-info" role="alert">
                    <span class="fa fa-info-circle"></span>
                    <strong>No Bug Reported!</strong>
                </div>
                {% endif %}
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">

                <div class="list-group">
                    {% for user in followers %}
                    <div class="list-group-item">
                        {% if user.socialaccount_set.all.0.get_avatar_url %}
                        <img src="{{ user.socialaccount_set.all.0.get_avatar_url }}" height="50px">
                        {% else %}
                        <img src="{% gravatar_url user.email 50 %}">
                        {% endif %}
                        <a href="/profile/{{ user.username }}">{{ user.username }}</a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <div class="list-group">
                    {% for user in following %}
                    <div class="list-group-item">
                        {% if user.socialaccount_set.all.0.get_avatar_url %}
                        <img src="{{ user.socialaccount_set.all.0.get_avatar_url }}" height="50px">
                        {% else %}
                        <img src="{% gravatar_url user.email 50 %}">
                        {% endif %}
                        <a href="/profile/{{ user.username }}">{{ user.username }}</a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
                <div class="list-group">
                    {% for i in bookmarks %}
                    <div class="list-group-item">
                        <button type="button" class="close" name="{{ i.pk }}" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <a href="{{ i.get_absolute_url }}" class="list-group-item-heading">
                            <strong>{{ i.description|truncatechars:50 }}</strong>
                        </a>
                        <span class="badge text-capitalize">{{ i.status }}</span>
                        <p class="list-group-item-text">{{ i.user }}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="icon-block">
            <kbd class="fa fa-trophy"> Bugs Reported {{ total_bugs }}</kbd>
            <kbd class="fa fa-star"> Points {{ my_score|default:0 }}</kbd>
            <a href="/label_activity?user={{ user.username }}&label=open">
                <kbd class="fa fa-bug"> Open Issues {{ total_open }}</kbd>
            </a>
            <a href="/label_activity?user={{ user.username }}&label=closed">
                <kbd class="fa fa-code-fork"> Closed Issues {{ total_closed }}</kbd>
            </a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-9">
        <div class="panel panel-default">
            <div class="panel-heading text-capitalize">
                {{ user.username }}'s activity
            </div>
            <div class="panel-body">
                {% if activities %}
                <div class="list-group">
                    {% for activity in activities %}
                    {% include '_activity.html' %}
                    {% endfor %}
                </div>
                <a href="/all_activity?user={{ user.username }}" class="btn btn-default btn-block">View All
                    Activity by {{ user.username }}</a>
                {% else %}
                <div class="text-center">No Activity Yet!</div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-3" style="padding: 0px">
        <div class="panel panel-default">
            <div class="panel-heading text-capitalize">
                {{ user.username }}'s top bug findings
            </div>
            <div class="panel-body" style="padding: 0px">
                {% if websites %}
                <div class="list-group scroll">
                    {% for website in websites %}
                    <div class="list-group-item">
                        <a href="/domain/{{ website.name }}">
                            <img src="http://www.{{ website.name }}/favicon.ico" height="25"
                                onerror="this.onerror=null; this.style.display='none';">
                        </a>
                        <a href="/domain/{{ website.name }}">{{ website.name|truncatechars:15 }}</a>
                        <span class="label label-default pull-right">
                            {{ website.total }} Bug{{ website.total|pluralize }}
                        </span>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center">Nothing Found</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('.img-thumbnail, .upload-btn').on('mouseenter', function () {
            $('.upload-btn').show();
        });
        $('.img-thumbnail, .upload-btn').on('mouseleave', function () {
            $('.upload-btn').hide();
        });
        $('.upload-btn').on('click', function () {
            $('input[name="user_avatar"]').click();
        });
        $('input[name="user_avatar"]').on('change', function () {
            var file = $(this).val().replace('C:\\fakepath\\', '');
            $('.badge-avatar').html(file);
            $('.upload').show();
        });
    });

    {% if activities %}
    var all_months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
    var months = [],
        data = [];
    var all_data = new Array(12).fill(0);
    var current_month = {{ current_month }};

    {% for i in graph %}
    all_data['{{i.month}}' - 1] = {{ i.c }};
    {% endfor %}

    if (current_month - 6 < 0) {
        months = all_months.slice(current_month - 6);
        months = months.concat(all_months.slice(0, current_month));
        data = all_data.slice(current_month - 6);
        data = data.concat(all_data.slice(0, current_month));
    } else {
        months = all_months.slice(current_month - 6, current_month);
        data = all_data.slice(current_month - 6, current_month);
    }

    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: months,
            datasets: [{
                label: 'Monthly Activity',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.6)',
                    'rgba(54, 162, 235, 0.6)',
                    'rgba(255, 206, 86, 0.6)',
                    'rgba(75, 192, 192, 0.6)',
                    'rgba(153, 102, 255, 0.6)',
                    'rgba(255, 159, 64, 0.6)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        fixedStepSize: 1
                    }
                }],
                xAxes: [{
                    time: {
                        unit: 'month'
                    }
                }]
            }
        }
    }); {% endif %}

    $('body').on('click', '.follow_unfollow', function (e) {
        e.preventDefault();
        var usr = $(this).attr('name');
        $.ajax({
            type: 'GET',
            url: '/follow/' + usr + '/',
            data: {},
            success: function (data) {
                var txt = $('.follow_unfollow').text();
                if (txt == "Follow")
                    $('.follow_unfollow').text("Unfollow");
                else
                    $('.follow_unfollow').text("Follow");
                $.notify("Done!", {
                    style: "custom",
                    className: "success"
                });
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        });
    });

    $('body').on('click', '.list-group-item button', function (e) {
        e.preventDefault();
        var issue_pk = $(this).attr('name');
        var el = $(this);
        $.ajax({
            type: 'GET',
            url: '/unsave_issue/' + issue_pk + '/',
            data: {},
            success: function (data) {
                el.parent().remove();
                $.notify("Bookmark Removed!", {
                    style: "custom",
                    className: "success"
                });
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        });
    });
</script>
{% endblock %}