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

{% block title %}
    {% trans %}Market{% endtrans %}
    <small>{% trans %}1.9 FO jährliche Unterweisung zur Arbeitssicherheit, Umgang mit Gefahrstoffen, Hygiene am Arbeitsplatz und das Allgemeine Gleichbehandlungsgesetz{% endtrans %}</small>
{% endblock %}

{% block content %}
    <div class="panel mar-top">
        <div class="panel-body">
            <div class="row form-inline">
                <div class="col-sm-6 text-center">
                    <label for="search-worker">{% trans %}Search{% endtrans %} {% trans %}Worker No.{% endtrans %}:</label>
                    <input type="text" class="form-control" id="search-worker" name="search-worker">
                </div>
                <div class="col-sm-6 text-center">
                    <label for="search-team">{% trans %}Search{% endtrans %} {% trans %}Team{% endtrans %}.:</label>
                    <input type="text" class="form-control" id="search-team" name="search-team">
                </div>
            </div>
            <table class="table table-striped responsibility datatable-workers">
                <thead>
                <tr>
                    <th>Nächste Unterweisung</th>
                    <th>MA-Nr.</th>
                    <th>Name</th>
                    <th>Bestätigung MA</th>
                    <th>Unterschrift UW</th>
                    <th>Datum Unterweisung</th>
                    <th>KoSt.</th>
                </tr>
                </thead>
                <tbody>
                {% for worker in workers %}
                    <tr>
                        <td>
                            {% if worker.annualInstruction %}
                                {{ worker.annualInstruction.getNextDate | default('') | date('Y-m-d') }}
                            {% else %}
                                {{ worker.getNextFirstDayDate | default('') | date('Y-m-d') }}
                            {% endif %}
                        </td>
                        <td>{{ worker.number }}</td>
                        <td>{{ worker.firstName }} {{ worker.lastName }}</td>
                        <td>
                            {% if worker.annualInstruction %}
                                <img src="{{ asset(worker.getSignature(true), 'signature') }}"
                                     class="img-responsive">
                            {% endif %}
                        </td>
                        <td>
                            {% if worker.annualInstruction %}
                                <img src="{{ asset(worker.annualInstruction.leader.getSignature(true), 'signature') }}"
                                     class="img-responsive">
                            {% endif %}
                        </td>
                        <td>
                            {% if worker.annualInstruction %}
                                {{ worker.annualInstruction.workerConfirmedAt | date('Y-m-d') }}
                            {% else %}
                                {{ worker.firstDay | date('Y-m-d') }}
                            {% endif %}
                        </td>
                        <td>{{ worker.team }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(function() {
            var datatable = $('table.datatable-workers').dataTable({
                paging: false,
                info: false,
                order: [[ 0, "asc"]],
                orderClasses: false,
                dom: "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                language: {
                    "search": Translator.trans('Search', {}) + ':'
                }
            });

            var $searchWorker = $('#search-worker');

            $searchWorker.on('keyup', function() {
                var query = $('#search-worker').val();

                if (query.length > 0) {
                    if (isNaN(query)) {
                        datatable.api().search(query).draw();
                    } else {
                        datatable.api().column(1).search("^" + query + "$", true, false, true).draw();
                    }
                } else {
                    datatable.api().column(1).search("").draw();
                    datatable.api().search('').draw();
                }
            });

            $searchWorker.on('keydown', function(e) {
                if (e.keyCode === 13) {
                    var rows = datatable.api().rows({filter: 'applied'}).nodes();
                    if (rows.length === 1) {
                        $(rows[0]).find('.btn-primary')[0].click();
                    }
                }
            });

            var $searchTeam = $('#search-team');

            $searchTeam.on('keyup', function() {
                var query = $('#search-team').val();

                if (query.length > 0) {
                    if (isNaN(query)) {
                        datatable.api().search(query).draw();
                    } else {
                        datatable.api().column(6).search("^" + query, true, false, true).draw();
                    }
                } else {
                    datatable.api().column(6).search("").draw();
                    datatable.api().search('').draw();
                }
            });

            $searchTeam.on('keydown', function(e) {
                if (e.keyCode === 13) {
                    var rows = datatable.api().rows({filter: 'applied'}).nodes();
                    if (rows.length === 1) {
                        $(rows[0]).find('.btn-primary')[0].click();
                    }
                }
            });
        });
    </script>
{% endblock %}