{% extends 'base.html.twig' %}

{% block title %}MOKPI - Dashboard
{% endblock %}

{% block body %}
	{{ encore_entry_link_tags('cute-alert-css') }}
	{{ encore_entry_link_tags('default-view') }}

    <div class="container-fluid box-no-bkg-color">
		<nav aria-label="breadcrumb" class="hide-on-mobile">
			<ol class="breadcrumb">
                <li class="page-directory-previous breadcrumb-item">
                    <a href="{{ path('mokpi_index') }}">MOKPI</a>
                </li>
                <li aria-current="page" class="page-directory breadcrumb-item active">Dashboard</li>
			</ol>
		</nav>
        <div class="box">
            <div class="title">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-title" >Acompanhamento MOKPI</h1>
                    </div>
                </div>
            </div>
            <div class="box-body px-4 py-4">
                <div class="tableContainer no-height" >
                    <div class="row mb-4">
                        <div class="col-md-12" >
                            <select id="mokpiFilter" class="form-control col-md-4 mb-3 d-inline-block inputSearchTable">
                                {% for mokpi in allMokpis %}
                                    <option {{ mokpiFilter == mokpi.groupKey ? 'selected' : '' }} value="{{mokpi.groupKey}}">{{mokpi}}</option>
                                {% endfor %}
                            </select>
                            <select id="yearFilter" class="form-control col-md-4 mb-3 d-inline-block">
                                {% for year in years %}
                                    <option  {{ yearFilter == year.createdAt ? 'selected' : '' }} value="{{year.createdAt}}">{{year.createdAt}}</option>
                                {% endfor %}
                            </select>
                            {% if selectedMokpi %}
                                <h5 class="page-title-color" > KPI | {{selectedMokpi}} | {{selectedMokpi.formula}}</h5>
                            {% endif %}
                            <div class="col-md-12" id="mokpiChart" ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<script>
		var mensuration = "{{ mensuration }}";
		var mokpiValues = {{ mokpiValues|json_encode|raw }};
		var mokpiGoalChartData = {{ mokpiGoalChartData|json_encode|raw }};
		var mokpiBaseChartData = {{ mokpiBaseChartData|json_encode|raw }};
	</script>
	{{ encore_entry_script_tags('mokpi-dashboard') }}
{% endblock %}