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

{% block title %}TNC - 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">
			<ol class="breadcrumb">
                <li class="page-directory-previous breadcrumb-item">
                    <a href="{{ path('tnc_index') }}">TNC</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 TNC</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 col-lg-6" id="chartCol">
                            <select id="yearFilter" class="form-control w-50 mb-3 inputSearchTable">
                                <option value="">Filtrar por ano</option>
                                {% for year in years %}
                                    <option {{ selectedYear == year ? 'selected' : '' }} value="{{year}}">{{year}}</option>
                                {% endfor %}
                            </select>
                            <h5 class="page-title-color" >Total TNCs X Mês | <span >{{selectedYear ? selectedYear : 'now' | date('Y') }}</span></h5>
                        </div>
                        <div class="col-md-12 col-lg-6" id="chartPie">
                            <select id="monthFilter" class="form-control w-50 mb-3 inputSearchTable">
                                <option value="">Todo período</option>
                                <option {{ selectedMonth == 1 ? 'selected' : '' }} value="1">Janeiro</option>
                                <option {{ selectedMonth == 2 ? 'selected' : '' }} value="2">Fevereiro</option>
                                <option {{ selectedMonth == 3 ? 'selected' : '' }} value="3">Março</option>
                                <option {{ selectedMonth == 4 ? 'selected' : '' }} value="4">Abril</option>
                                <option {{ selectedMonth == 5 ? 'selected' : '' }} value="5">Maio</option>
                                <option {{ selectedMonth == 6 ? 'selected' : '' }} value="6">Junho</option>
                                <option {{ selectedMonth == 7 ? 'selected' : '' }} value="7">Julho</option>
                                <option {{ selectedMonth == 8 ? 'selected' : '' }} value="8">Agosto</option>
                                <option {{ selectedMonth == 9 ? 'selected' : '' }} value="9">Setembro</option>
                                <option {{ selectedMonth == 10 ? 'selected' : '' }} value="10">Outubro</option>
                                <option {{ selectedMonth == 11 ? 'selected' : '' }} value="11">Novembro</option>
                                <option {{ selectedMonth == 12 ? 'selected' : '' }} value="12">Dezembro</option>
                            </select>
                            <h5 class="page-title-color" >Total TNCs X Mês | <span >{{selectedYear ? selectedYear : 'now' | date('Y') }}</span></h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
	<script>
		var data = {{ grdCountData|json_encode|raw }};
		var data2 = {{ actionsQtdPerStatus|json_encode|raw }};
	</script>
	{{ encore_entry_script_tags('tnc-dashboard') }}
{% endblock %}