{% extends 'index.html' %}
{% block content %}
{% load basefilters %}
{% load static i18n %}
{% load i18n %}
<style>
    .oh-card-dashboard {
        cursor:default;
    }
</style>
<!-- End of Navigation -->
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
    <div class="oh-wrapper">
        <div class="d-none mt-5">

        </div>
        <div class="oh-dashboard row" id="dashboard">
            <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
                <div class="oh-dashboard__cards row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--success">
                            <div class="oh-card-dashboard__header">
                                <span class="oh-card-dashboard__title">{% trans "Total Objectives" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                <a href="{% url 'objective-list-view' %}" style="text-decoration: none;" class="oh-card-dashboard__counts">
                                    <span class="oh-card-dashboard__count">{{count_objective}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-card-dashboard oh-card-dashboard--neutral">
                            <div class="oh-card-dashboard__header">
                                <span class="oh-card-dashboard__title">{% trans "Total Key Results" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                <a href="{% url 'view-key-result' %}" style="text-decoration: none;" class="oh-card-dashboard__counts">
                                    <span class="oh-card-dashboard__count">{{count_key_result}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-card-dashboard oh-card-dashboard--danger">
                            <div href="{% url 'objective-list-view' %}" style="text-decoration: none;" class="oh-card-dashboard__header">
                                <span class="oh-card-dashboard__title">{% trans "Total Feedbacks" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                <a href="{% url 'feedback-view' %}" style="text-decoration: none;" class="oh-card-dashboard__counts">
                                    <span class="oh-card-dashboard__count">{{count_feedback}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="oh-dashboard__movable-cards row mt-4">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-5 oh-card-dashboard--moveable mb-3">
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                <span class="oh-card-dashboard__title">{% trans "Objective Status" %}</span>
                                <span class="oh-card-dashboard__title float-end" id="objective-status-chart" style="cursor:pointer"><ion-icon name="caret-forward"></ion-icon></span>

                            </div>
                            <div class="oh-card-dashboard__body">
                                {% if count_objective %}
                                    <canvas id="objectiveChart" style="cursor:pointer"></canvas>
                                {% else %}
                                    <div style="height: 430px; display:flex;align-items: center;justify-content: center;" class="">
                                        <div style="" class="">
                                            <img style="display: block;width: 100px;margin: 20px auto ;" src="{% static 'images/ui/goal.png' %}" class="" alt="Page not found. 404."/>
                                            <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No Objectives are available." %}</h3>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% if perms.pms.view_feedback or request.user|is_reportingmanager %}
                    <div class="col-12 col-sm-12 col-md-12 col-lg-5 oh-card-dashboard--moveable">
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                <span class="oh-card-dashboard__title">{% trans "Key Result Status" %}</span>
                                <span class="oh-card-dashboard__title float-end" id="key-result-status-chart" style="cursor:pointer"><ion-icon name="caret-forward"></ion-icon></span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                {% if count_key_result %}
                                    <canvas id="keyResultChart" style="cursor:pointer"></canvas>
                                {% else %}
                                    <div style="height: 430px; display:flex;align-items: center;justify-content: center;" class="">
                                        <div style="" class="">
                                            <img style="display: block;width: 100px;margin: 20px auto ;" src="{% static 'images/ui/keyresult.png' %}" class=""/>
                                            <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No Key Results are available." %}</h3>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    <div class="col-12 col-sm-12 col-md-12 col-lg-5 mb-3 ">
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                <span class="oh-card-dashboard__title">{% trans "Feedback Status" %}</span>
                                <span class="oh-card-dashboard__title float-end" id="feedback-status-chart" style="cursor:pointer"><ion-icon name="caret-forward"></ion-icon></span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                {% if count_feedback %}
                                    <canvas id="feedbackChart" style="cursor:pointer"></canvas>
                                {% else %}
                                    <div style="height:220px; display:flex;align-items: center;justify-content: center;" class="">
                                        <div style="" class="">
                                            <img style="display: block;width: 100px;margin: 20px auto ;" src="{% static 'images/ui/feedback.png' %}" class="" />
                                            <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No Feedbacks are available." %}</h3>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="oh-dashboard__right  col-12 col-sm-12 col-md-12 col-lg-3">
                <div class="oh-dashboard__events">

                    <ul class="oh-dashboard__events-nav">
                        <li class="oh-dashboard__events-nav-item oh-dashboard__events-nav-item--active" data-target="0">
                        </li>
                        <li class="oh-dashboard__events-nav-item" data-target="1"></li>
                        <li class="oh-dashboard__events-nav-item" data-target="2"></li>
                    </ul>
                </div>

                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                        <span class="oh-card-dashboard__title"> {% trans "Objectives At-Risk" %}</span>
                    </div>
                    <div class="oh-card-dashboard__body">
                        {% if okr_at_risk %}
                            <ul class="oh-card-dashboard__user-list">
                            {% for okr in okr_at_risk %}
                                <li class="oh-card-dashboard__user-item">
                                        <a
                                            hx-get='{% url "view-employee-objective" okr.id %}'
                                            hx-target="#objectDetailsModalTarget"
                                            data-toggle="oh-modal-toggle"
                                            data-target="#objectDetailsModal"
                                            type="button" title="{% trans 'View' %}"
                                            class="oh-btn oh-btn--light-bkg p-3 w-100"  onclick="event.stopPropagation()"
                                        >
                                        <div class="oh-profile oh-profile--md">
                                            <div class="oh-profile__avatar mr-1">
                                                <img src="{{okr.employee_id.get_avatar}}"
                                                class="oh-profile__image" alt="" />
                                            </div>
                                            <span class="oh-profile__name oh-text--dark">{{okr.employee_id}}</span>
                                        </div>
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                        {% else %}
                            <h6 style="font-size:16px; text-align:left;" class="oh-404__subtitle" >{% trans "No OKRs are currently At-Risk." %}</h6>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{%static 'src/dashboard/pmsChart.js' %}"></script>
{% endblock %}