{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_rank' %}
{% set breadcrumbs = [
    {
        'link': path('app_front_account'), 'title': 'Home'
    },
    {
		'title': 'Network',
	},
    {
        'title': 'My Rank',
    }
]%}

{% block stylesheets %}
    <style>
        .heading span {
            display: inline; /* or inline-block */
        }
        .heading {
            position: relative;
        }
        .heading::after {
            content: '';
            position: absolute;
            bottom: -2px; /* Adjust this value to control the thickness of the underline */
            left: 0;
            width: 100%;
            height: 2px; /* Adjust this value to control the height of the underline */
            background-color: grey; /* Color of the underline */
        }
        .level_title{
            font-size: 40px;
        }
        .progress{
            height: 40px;
        }
        .level{
            color: white;
        }
        .progress-bar-vertical .progress-bar {
            width: 100%;
            height: 0;
            -webkit-transition: height 0.6s ease;
            -o-transition: height 0.6s ease;
            transition: height 0.6s ease;
        }
        .progress-bar{
            background-color: #73C8DC;
        }
    </style>
{% endblock %}
{% block content %}
    {% set highlight_level = false %}
    {% set stop_checking = false %}
    {% for rank in rankData %}
        <div class="card">
            <div class="card-body">
                <div class="level">
                    <div class="row">
                        {% if not stop_checking %}
                            {% if rank.block_level is defined %}
                                {% if rank.task_data['average_percentage'] != 100 %}
                                    {% set highlight_level = true %}
                                    {% set stop_checking = true %}
                                    <div class="col-md-6">
                                        <p class="heading"><b class="level_title p-1" style="background-color: #247297; color: white">{{ rank.level_name }}</b></p>
                                    </div>
                                {% else %}
                                    <div class="col-md-6">
                                        <p class="heading"><b class="level_title">{{ rank.level_name }}</b></p>
                                    </div>
                                {% endif %}
                            {% else %}
                                <div class="col-md-6">
                                    <p class="heading"><b class="level_title">{{ rank.level_name }}</b></p>
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="col-md-6">
                                <p class="heading"><b class="level_title">{{ rank.level_name }}</b></p>
                            </div>
                        {% endif %}
                        <div class="col-md-1"></div>
                        <div class="col-md mt-4">
                            <p>Average Percentage</p>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: {{ rank.task_data['average_percentage'] }}%;" aria-valuenow="{{ rank.task_data['average_percentage'] }}" aria-valuemin="0" aria-valuemax="100">{{ rank.task_data['average_percentage'] }}%</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-7">
                            {% for key, data in rank.task_data %}
                                {% if key == 'marketing' %}
                                    <div class="row">
                                        <div class="col-md">
                                            <h4 class="mt-3">{{ key|title }} Tasks</h4>
                                            <div class="row">
                                                {% if data.trello is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.trello.label}} ({{ data.trello.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.trello.trello_value_percentage }}%;" aria-valuenow="{{ data.trello.trello_value_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.trello.trello_value_percentage }}%</div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if data.instagram is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.instagram.label }} ({{ data.instagram.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.instagram.instagram_value_percentage }}%;" aria-valuenow="{{ data.instagram.instagram_value_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.instagram.instagram_value_percentage }}%</div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if data.answer_question is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.answer_question.label }} ({{ data.answer_question.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.answer_question.answer_question_value_percentage }}%;" aria-valuenow="{{ data.answer_question.answer_question_value_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.answer_question.answer_question_value_percentage }}%</div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                                {% if key == 'sales' %}
                                    <div class="row">
                                        <div class="col-md">
                                            <h4 class="mt-3">{{ key|title }} Tasks</h4>
                                            <div class="row">
                                                {% if data.direct_on_board is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.direct_on_board.label }} ({{ data.direct_on_board.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.direct_on_board.direct_on_board_percentage }}%;" aria-valuenow="{{ data.direct_on_board.direct_on_board_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.direct_on_board.direct_on_board_percentage }}%</div>
                                                        </div>
                                                    </div>
                                                {% elseif data.level_on_board is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.level_on_board.label }} ({{ data.level_on_board.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.level_on_board.level_on_board }}%;" aria-valuenow="{{ data.level_on_board.level_on_board }}" aria-valuemin="0" aria-valuemax="100">{{ data.level_on_board.level_on_board }}%</div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if data.get_sel is defined %}
                                                <div class="col-12 col-sm-6 col-md-6">
                                                    <p>{{ data.get_sel.label }} ({{ data.get_sel.value }})</p>
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" style="width: {{ data.get_sel.total_sales_percentage }}%;" aria-valuenow="{{ data.get_sel.total_sales_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.get_sel.total_sales_percentage }}%</div>
                                                    </div>
                                                </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                                {% if key == 'revenue' %}
                                    <div class="row">
                                        <div class="col-md">
                                            <h4 class="mt-3">{{ key|title }} Tasks</h4>
                                            <div class="row">
                                                {% if data.direct_revenue is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.direct_revenue.label }} ({{ data.direct_revenue.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.direct_revenue.direct_revenue_percentage }}%;" aria-valuenow="{{ data.direct_revenue.direct_revenue_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.direct_revenue.direct_revenue_percentage }}%</div>
                                                        </div>
                                                    </div>  
                                                {% endif %}
                                                {% if data.team_revenue is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.team_revenue.label }} ({{ data.team_revenue.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.team_revenue.team_revenue_percentage }}%;" aria-valuenow="{{ data.team_revenue.team_revenue_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.team_revenue.team_revenue_percentage }}%</div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                                {% if key == 'review' %}
                                    <div class="row">
                                        <div class="col-md">
                                            <h4 class="mt-3">{{ key|title }} Tasks</h4>
                                            <div class="row">
                                                {% if data.client_review is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.client_review.label }} ({{ data.client_review.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.client_review.client_review_percentage }}%;" aria-valuenow="{{ data.client_review.client_review_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.client_review.client_review_percentage }}%</div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if data.partner_review is defined %}
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <p>{{ data.partner_review.label }} ({{ data.partner_review.value }})</p>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" style="width: {{ data.partner_review.partner_review_percentage }}%;" aria-valuenow="{{ data.partner_review.partner_review_percentage }}" aria-valuemin="0" aria-valuemax="100">{{ data.partner_review.partner_review_percentage }}%</div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <div class="col-1"></div>
                        <div class="col">
                            <div class="row mt-3">
                                <div class="col">
                                    <h4>BENEFITS</h4>
                                    {% for benefit in rank.benefits %}
                                        <li>{{ benefit }}</li>
                                    {%endfor %}
                                </div>
                               {# <div class="col">#}
{#                                    <a href="#" class="btn btn-info btn-lg" role="button" style="cursor: pointer">SETUP AI</a>#}
{#                                </div> #}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}