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

{% block buttons %}
    <a href="{{ path('addEmployeeHours', {id: employee.id}) }}" class="btn btn-info" role="button">Dodaj novo radno vrijeme</a>
{% endblock %}

{% block body %}

    <div class="row mb-4">
        <div class="col">
            <select name="month" id="month" class="form-control" onchange="changeMonth(this.value)">
                {% for i in 1..12 %}
                    <option {% if (month == i) %} selected="selected"{% endif %} value="{{ i }}">{{ i }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="col">
            <select name="year" id="year" class="form-control" onchange="changeYear(this.value)">
                {% for i in 2020..2040 %}
                    <option  {% if (year == i) %} selected="selected"{% endif %} value="{{ i }}">{{ i }}</option>
                {% endfor %}
            </select>
        </div>
    </div>


    <div class="table-responsive">
        <table class="table table-striped table-sm" id="listTable">
            <thead>
            <tr>
                <th>Datum</th>
                <th>Djelatnik</th>
                <th>Gradilište</th>
                <th>Radno Vrijeme</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            {% set sum = 0 %}
            {% for workHours in allWorkHours %}
                <tr>
                    <td>{{ workHours.date|date('d.m.Y') }}</td>
                    <td>{{ workHours.employee.name }} {{ workHours.employee.surname }}</td>
                    <td>{{ workHours.constructionSite.companyName }}</td>
                    <td>{{ workHours.hoursWorked }}</td>
                    <td><a href="{{ path('editWorkHours', {id: workHours.id }) }}" ><span data-feather="edit" style="color: #013499"></span></a></td>
                </tr>
                {% set sum = sum + workHours.hoursWorked %}
            {% endfor %}

            </tbody>
        </table>
    </div>

    <script>
        let ukupnoSati = {{ sum }};
    </script>


    <h2 class="mt-4">Ukupno radnih sati: {{ sum }}</h2>

{% endblock %}


{% block javascripts %}
<script>
    function changeMonth(val) {
        window.location.href = '/radni-sati/djelatnika/'+ {{ employee.id }} +'/' + val +'/' + document.getElementById("year").value;
    }

    function changeYear(val) {
        window.location.href = '/radni-sati/djelatnika/'+ {{ employee.id }} +'/' + document.getElementById("month").value +'/' + val;
    }
</script>
{% endblock %}