{% extends "base.html" %}
{% load gravatar %}
{% load static %}
{% load custom_tags %}
{% load i18n %}
{% 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;
    }
    
    .bottom-right {
            position: absolute;
            bottom: 10px;
            right: 15px;
    }
    #update-overlay{
        display: flex;
        gap:2px;
    }

    .wallet-selection {
    display: flex;
    gap: 2px;
    }

    .crypto-button {
    padding: 10px;
    margin-bottom: 0.5px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 20px; 
    height: 20px;
    }

    .crypto-button[data-crypto="Ethereum"] {
    background-color: #627eea;
    color: #fff;
    }

    .crypto-button[data-crypto="Bitcoin"] {
    background-color: #f2a900;
    color: #fff;
    }

    .crypto-button[data-crypto="BitcoinCash"] {
    background-color: #4cca47;
    color: #fff;
    }

    .btn-save {
    padding: 5px 5px;
    font-size: 7px;
    width: auto; 
    }

    #crypto-address{
    text-align: center;
    }

    #crypto-name{
        text-align: center;
        width: 100%;
        font-size: 20px;
        color: white;
        background-color: #ff4444;
        display: inline-block;
        margin: 0 auto;
    }

    #update-overlay {
        display: flex;
        flex-direction: column;
    }   

    .wallet-selection {
        display: flex;
    }

    .button-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 0px;
    }

    .wallet-selection .crypto-button[data-crypto="BitcoinCash"] {
        margin-right: 93px;
    }

    #dialog {
        position: relative;
    }

    #slideshow {
        margin-top: 50px;
    }

    .navigation {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
    }

    .nav-btn {
        width: 70px;
        height: 40px;
        border: 1px solid #0e0d0d;
        margin: 6px;
        cursor: pointer;
        transition: 0.4s;
    }
    .nav-btn.active {
        background: red; 
        color: white;
    }
    .nav-btn:hover {
        background: #fff;
    }

    input[name="r"] {
        position: absolute;
        visibility: hidden;
    }

    #btc:checked ~ .s1 {
        margin-left: -20%;
    }

    #eth:checked ~ .s1 {
        margin-left: -40%;
    }

    #bch:checked ~ .s1 {
        margin-left: -60%;
    }

    </style>
{% endblock style %}
{% 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"
                     alt="avatar"
                     width="50"
                     height="50">
            {% else %}
                <img src="{% gravatar_url user.email 200 %}"
                     class="img-responsive img-thumbnail"
                     alt="avatar"
                     width="50"
                     height="50">
            {% 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> {% trans "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">{% trans "Hide all issues" %}</label>
                        <button type="submit" class="btn issue-hide-btn">{% trans "OK" %}</button>
                    </form>
                </div>
            {% endif %}
            {% if request.user == user %}
                <div id="update-overlay">
                    <div class="wallet-selection">
                        <button class="crypto-button" data-crypto="Bitcoin">
                            <i class="fa-brands fa-btc"></i>
                        </button>
                        <button class="crypto-button" data-crypto="Ethereum">
                            <i class="fa-brands fa-ethereum"></i>
                        </button>
                        <button class="crypto-button" data-crypto="BitcoinCash">
                            <i class="fa-brands fa-btc"></i>
                        </button>
                        <form method="post"
                              action="{% url 'update_bch_address' %}"
                              id="update-form">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-primary text-black btn-save">Save</button>
                        </div>
                        <div class="text-block">
                            <input type="hidden" id="selected-crypto" name="selected_crypto" value="">
                            <input type="text"
                                   id="new-crypto-address"
                                   name="new_address"
                                   placeholder="Enter new Bitcoin address">
                        </div>
                    </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 }}">{% trans "Unfollow" %}</a>
                    {% else %}
                        <a class="follow_unfollow btn btn-default" name="{{ user }}">{% trans "Follow" %}</a>
                    {% endif %}
                {% endif %}
                <div class="status">
                    <button type="button" id="openModal" class="btn btn-danger text-black">Send a Tip</button>
                    <dialog id="dialog">
                        <input type="radio" name="r" id="bch" checked class="active">
                        <input type="radio" name="r" id="eth">
                        <input type="radio" name="r" id="btc">
                        <div class="navigation">
                            <button class="nav-btn" id="bch-btn">BCH</button>
                            <button class="nav-btn" id="eth-btn">Ethereum</button>
                            <button class="nav-btn" id="btc-btn">Bitcoin</button>
                        </div>
                        <div id="slideshow">
                            <img id="qr-image" alt="QR Code" height="300" width="400">
                            <p id="crypto-name" class="text-black"></p>
                            <p id="crypto-address"></p>
                        </div>
                        <button id="close" class="btn-danger w-full">Close</button>
                    </dialog>
                </div>
            </div>
            <div class="icon-block">
                <kbd class="fa fa-cogs">
                    <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=General">{% trans "General" %} {{ bug_type_0 | length }}</a>
                </kbd>
                <kbd class="fa fa-exclamation-triangle">
                    <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=Number">{% trans "Number" %} {{ bug_type_1 | length }}</a>
                </kbd>
            </div>
            <div class="icon-block">
                <kbd class="fa fa-trophy">
                    <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=Functional">
                        {% trans "Functional" %} {{ bug_type_2 | length }}
                    </a>
                </kbd>
                <kbd class="fa fa-flash">
                    <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=Performance">
                    {% trans "Performance" %} {{ bug_type_3 | length }}</a>
                </kbd>
            </div>
            <div class="icon-block">
                <kbd class="fa fa-lock">
                    <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=Security">{% trans "Security" %} {{ bug_type_4 | length }}</a>
                </kbd>
                <kbd class="fa fa-eraser">
                    <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=Typo">{% trans "Typo" %} {{ bug_type_5 | length }}</a>
                </kbd>
            </div>
            <div class="icon-block">
                <kbd class="fa fa-code">
                    <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=Design">{% trans "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">{% trans "Stats" %}</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">{% trans "Followers" %}
                    [{{ followers|length }}]</a>
                </li>
                <li role="presentation">
                    <a href="#messages"
                       aria-controls="messages"
                       role="tab"
                       data-toggle="tab">{% trans "Following" %}
                    [{{ following|length }}]</a>
                </li>
                <li role="presentation">
                    <a href="#settings"
                       aria-controls="settings"
                       role="tab"
                       data-toggle="tab">{% trans "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>{% trans "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"
                                         width="50px"
                                         alt="avatar">
                                {% else %}
                                    <img src="{% gravatar_url user.email 50 %}"
                                         height="50px"
                                         width="50px"
                                         alt="avatar">
                                {% endif %}
                                <a href="{% url 'profile' slug=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"
                                         width="50px"
                                         alt="avatar">
                                {% else %}
                                    <img src="{% gravatar_url user.email 50 %}"
                                         height="50px"
                                         width="50px"
                                         alt="avatar">
                                {% endif %}
                                <a href="{% url 'profile' slug=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">×</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"> {% trans "Bugs Reported" %} {{ total_bugs }}</kbd>
                <kbd class="fa fa-star"> {% trans "Points" %} {{ my_score|default:0 }}</kbd>
                <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=open">
                    <kbd class="fa fa-bug"> {% trans "Open Issues" %} {{ total_open }}</kbd>
                </a>
                <a href="{% url 'all_activitys' %}?user={{ user.username }}&label=closed">
                    <kbd class="fa fa-code-fork"> {% trans "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 {% trans "activity" %}</div>
                <div class="panel-body">
                    {% if activities %}
                        <div class="list-group">
                            {% for activity in activities %}
                                {% include "_activity.html" %}
                            {% endfor %}
                        </div>
                        <a href="{% url 'all_activity' %}?user={{ user.username }}"
                           class="btn btn-default btn-block">{% trans "View All Activity by" %} {{ user.username }}</a>
                    {% else %}
                        <div class="text-center">{% trans "No Activity Yet" %}!</div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-lg-3 p-0">
            <div class="panel panel-default">
                <div class="panel-heading text-capitalize">{{ user.username }}'s {% trans "top bug findings" %}</div>
                <div class="panel-body p-0">
                    {% if websites %}
                        <div class="list-group scroll">
                            {% for website in websites %}
                                <div class="list-group-item">
                                    <a href="{% url 'domain' slug=website.name %}">
                                        <img src="https://www.{{ website.name }}/favicon.ico"
                                             height="25"
                                             width="25"
                                             alt="blt"
                                             onerror="this.onerror=null; this.style.display='none';">
                                    </a>
                                    <a href="{% url 'domain' slug=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">{% trans "Nothing Found" %}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="items-center mt-20 mb-5 w-0 overflow-clip lg:w-fit lg:flex w-0 h-0 lg:w-[auto] lg:h-[auto]">
        <a href="{% url 'delete' %}"
           class="lg:!inline-block bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[20px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline rounded-xl tracking-wide">
            {% trans "Delete Account" %}
        </a>
    </div>
    <div class="bottom-right">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/profile.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=487%3A3001&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const cryptoOptions = [
            { name: 'Bitcoin Cash', address: '{{ user.userprofile.bch_address }}' },
            { name: 'Ethereum', address: '{{ user.userprofile.eth_address }}' },
            { name: 'Bitcoin', address: '{{ user.userprofile.btc_address }}' },
        ];

        let currentIndex = 0;
        const updateSlide = () => {
            let { name, address } = cryptoOptions[currentIndex];
            if (address == '' || address == 'None') {
                address = "qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc";
                document.getElementById('qr-image').src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
                document.getElementById('crypto-name').textContent = "No address: Will go to BLT Donation";
                document.getElementById('crypto-address').textContent = `BCH: ${address}`;
            }
            else{
                document.getElementById('crypto-name').textContent = name;
                document.getElementById('qr-image').src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
                document.getElementById('crypto-address').textContent = `${address}`;
            }
        }

        updateSlide();

        document.getElementById('openModal').addEventListener('click', function() {
            document.getElementById('dialog').showModal();
        });

        document.getElementById('close').addEventListener('click',function(){
            document.getElementById('dialog').close();
        });

        document.getElementById('bch-btn').classList.add('active'); // Highlight BCH button by default
        document.getElementById('bch-btn').addEventListener('click', function() {
            currentIndex = 0;
            updateSlide();
            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });

        document.getElementById('eth-btn').addEventListener('click', function() {
            currentIndex = 1;
            updateSlide();
            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });

        document.getElementById('btc-btn').addEventListener('click', function() {
            currentIndex = 2;
            updateSlide();
            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        const cryptoButtons = document.querySelectorAll('.crypto-button');
        const newCryptoAddressInput = document.getElementById('new-crypto-address');
        const selectedCryptoInput = document.getElementById('selected-crypto');

        cryptoButtons.forEach(button => {
            button.addEventListener('click', function() {
                const crypto = this.getAttribute('data-crypto');
                selectedCryptoInput.value = crypto;  // Set the selected cryptocurrency value
                newCryptoAddressInput.placeholder = `Enter new ${crypto} address`;
                document.getElementById('crypto-name').textContent = crypto;
            });
        });
    });

    $(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 content %}