{% extends "main/layout.html" %}
{% load static %}
{% block content %}
<div class="breadcrumb-holder">
	<div class="container-fluid">
		<ul class="breadcrumb">
			<li class="breadcrumb-item active"> <a href="{% url 'leave-hr-period-list' %}" class="mr-4">LISTA FUNSIONARIO HO PERIODE </a> </li>
			<li class="breadcrumb-item active">{{ legend|safe }}</li>
		</ul>
	</div>
</div>
<div class="container-fluid"><br/>
	<div class="row">
		<div class="col-sm-12">
			<div class="card shadow-lg border-info rounded">
				<div class="card-body">
					<center>
						<h4>{{ legend|safe }}</h4>
					</center>
                    <div class="row">
                        <div class="col-md-12 d-flex justify-content-center">
                            <form method="POST">
                                {% csrf_token %}
                                <div class="form-row">
                                        <div class="form-group col-md-3">
                                            <select id="tinan" name="tinan" class="form-control" required>
                                                <option selected value="0">Tinan...</option>
                                                {% for y in years %}
                                                <option value="{{ y }}">{{ y }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <select id="tri" name="tri" class="form-control" required>
                                                <option selected value="0">Trimestral...</option>
                                                {% for m in trimestral %}
                                                <option value="{{ m.0 }}">{{ m.1 }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <select id="fulan" name="fulan" class="form-control" required>
                                                <option selected value="0">Fulan...</option>
                                                {% for m in months %}
                                                <option value="{{ m.id }}">{{ m.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <select id="unit" name="unit" class="form-control" required>
                                                <option selected value="0">Divizaun...</option>
                                                {% for m in units %}
                                                <option value="{{ m.id }}">{{ m.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <button class="btn btn-info" type="submit" value="View">Hare <i class="fa fa-eye"></i></button>
                                        </div>
                                  </div>
                            </form>
                        </div>
                    </div>
                    <hr>

                    <div class="row">
                        <div class="col-sm-7">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <figure class="highcharts-figure">
                                        <div id="leaveTypeAll"></div>
                                    </figure>
                                    <div id="sliders">
                                        <table>
                                            <tr>
                                                <td><label for="alpha">Alpha Angle</label></td>
                                                <td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
                                                <td><label for="beta">Beta Angle</label></td>
                                                <td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
                                                <td><label for="depth">Depth</label></td>
                                                <td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
                                        </table>
                                        


                                      </div>
                                      
                                </div>
                            </div>
                        </div><!--end col-->
                        <div class="col-md-5">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <table class="table table-sm table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Tipu Licensa</th>
                                                <th  class="text-center">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            
                                            {% for obj in data  %}
                                                <tr >
                                                    <td>{{obj.0.name}}</td>
                                                    {% if page == 'year' %}
                                                        <td align="center"><a href="{% url 'hr-report-year' obj.0.pk get_year %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'month' %}
                                                        <td align="center"><a href="{% url 'hr-report-month' obj.0.pk get_month %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'unit' %}
                                                        <td align="center"><a href="{% url 'hr-report-unit' obj.0.pk get_unit %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'tri' %}
                                                        <td align="center"><a href="{% url 'hr-report-tri' obj.0.pk get_tri %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'year-unit' %}
                                                        <td align="center"><a href="{% url 'hr-report-year-unit' obj.0.pk get_unit get_year %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'year-month' %}
                                                        <td align="center"><a href="{% url 'hr-report-year-month' obj.0.pk get_year get_month %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'month-unit' %}
                                                        <td align="center"><a href="{% url 'hr-report-month-unit' obj.0.pk get_month get_unit %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'year-tri' %}
                                                        <td align="center"><a href="{% url 'hr-report-year-tri' obj.0.pk get_year get_tri %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'year-month-unit' %}
                                                        <td align="center"><a href="{% url 'hr-report-year-month-unit' obj.0.pk get_year get_month get_unit %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% elif page == 'year-tri-unit' %}
                                                        <td align="center"><a href="{% url 'hr-report-year-tri-unit' obj.0.pk get_year get_tri get_unit %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% else %}
                                                        <td align="center"><a href="{% url 'hr-leave-r-list-type' obj.0.pk year  %}"><strong>{{obj.1}}</strong></a></td>
                                                    {% endif %}
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                        <tfoot>
                                            <tr align="center">
                                                <th>TOTAL</th>
                                                {% if page == 'year' %}
                                                    <th><a href="{% url 'hr-report-year-all' get_year  %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'tri' %}
                                                    <th><a href="{% url 'hr-report-tri-all' %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'month' %}
                                                    <th><a href="{% url 'hr-report-month-all' get_month %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'unit' %}
                                                    <th><a href="{% url 'hr-report-unit-all' get_unit %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'year-unit' %}
                                                    <th><a href="{% url 'hr-report-year-unit-all' get_unit get_year %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'year-month' %}
                                                    <th><a href="{% url 'hr-report-year-month-all' get_year get_month %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'month-unit' %}
                                                    <th><a href="{% url 'hr-report-month-unit-all' get_month get_unit %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'year-tri' %}
                                                    <th><a href="{% url 'hr-report-year-tri-all' get_year %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'year-month-unit' %}
                                                    <th><a href="{% url 'hr-report-year-month-unit-all' get_year get_month get_unit %}"><strong>{{allleave}}</strong></a></th>
                                                {% elif page == 'year-tri-unit' %}
                                                    <th><a href="{% url 'hr-report-year-tri-unit-all' get_year get_unit %}"><strong>{{allleave}}</strong></a></th>
                                                {% else %}
                                                    <th><a href="{% url 'hr-leave-r-list-all' year %}"><strong>{{allleave}}</strong></a></th>
                                                {% endif %}
                                            </tr>
                                        </tfoot>
                                    </table>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    {% if datamonth %}
                      
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <table class="table table-sm table-bordered">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Date</th>
                                                <th  class="text-center">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            
                                            {% for obj in datamonth  %}
                                                <tr  align="center">
                                                    <td>{{obj.0|date:"d-F-Y"}}</td>
                                                    <td align="center"><a href="{% url 'hr-leave-r-list-day' obj.0.date %}"><strong>{{obj.1}}</strong></a></td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                                      
                        </div>
                    </div>
                    {% endif %}

				</div> <!--end card-body-->
			</div> <!--end card-->
		</div> <!--end col-->
	</div> <!--end row-->
</div>
{% endblock %}
{% block scripts %}
   <!-- Highcharts -->
   <script src="{% static 'main/js/highcharts/highcharts.js' %}"></script>
   <script src="{% static 'main/js/highcharts/sankey.js' %}"></script>
   <script src="{% static 'main/js/highcharts/data.js' %}"></script>
   <script src="{% static 'main/js/highcharts/export-data.js' %}"></script>
   <script src="{% static 'main/js/highcharts/exporting.js' %}"></script>
   <script src="{% static 'main/js/highcharts/accessibility.js' %}"></script>
   <script src="{% static 'main/js/highcharts/3d.js' %}"></script>
   <script src="{% static 'main/js/highcharts/cylinder.js' %}"></script>

   <script>
        {% if page == 'year-tri-unit' %} 
            {% include 'leave_chart/type_year_tri_unit.js' %}
        {% elif page == 'year-month-unit' %} 
            {% include 'leave_chart/type_year_month_unit.js' %}
        {% elif page == 'year-tri' %} 
            {% include 'leave_chart/type_year_tri.js' %}
        {% elif page == 'month-unit' %} 
            {% include 'leave_chart/type_month_unit.js' %}
        {% elif page == 'year-month' %} 
            {% include 'leave_chart/type_year_month.js' %}
        {% elif page == 'year-unit' %} 
            {% include 'leave_chart/type_year_unit.js' %}
        {% elif page == 'tri' %} 
            {% include 'leave_chart/type_tri.js' %}
        {% elif page == 'year' %} 
            {% include 'leave_chart/type_year.js' %}
        {% elif page == 'unit' %} 
            {% include 'leave_chart/type_unit.js' %}
        {% elif page == 'month' %} 
            {% include 'leave_chart/type_month.js' %}
        {% else %}
            {% include 'leave_chart/type2.js' %}
        {% endif %}
   </script>



<script>
</script>


<style>
@import "https://code.highcharts.com/css/highcharts.css";

.highcharts-pie-series .highcharts-point {
 stroke: #ede;
 stroke-width: 2px;
}

.highcharts-pie-series .highcharts-data-label-connector {
 stroke: silver;
 stroke-dasharray: 2, 2;
 stroke-width: 2px;
}

.highcharts-figure,
.highcharts-data-table table {
 min-width: 320px;
 max-width: 600px;
 margin: 1em auto;
}

.highcharts-data-table table {
 font-family: Verdana, sans-serif;
 border-collapse: collapse;
 border: 1px solid #ebebeb;
 margin: 10px auto;
 text-align: center;
 width: 100%;
 max-width: 500px;
}

.highcharts-data-table caption {
 padding: 1em 0;
 font-size: 1.2em;
 color: #555;
}

.highcharts-data-table th {
 font-weight: 600;
 padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
 padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
 background: #f8f8f8;
}

.highcharts-data-table tr:hover {
 background: #f1f7ff;
}
   </style>


<style>
    .highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

.ld-label {
  width: 200px;
  display: inline-block;
}

.ld-url-input {
  width: 500px;
}

.ld-time-input {
  width: 40px;
}
</style>

{% endblock %}