{% extends "base.html.twig" %}
{% block BeforeAnyCSSFile %}
    {% for file in encore_entry_css_files('select2__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
    {% for file in encore_entry_css_files('dateRangepicker__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
{% endblock %}
{% set pagename = 'Teacher Attendance List' | trans %}

{% set addBtnTitle = 'Mark Teacher Attendance?' | trans %}
{% set addBtnLink = path('teacher_mark_attendance') %}

{% block MainContent %}
    <div class="kt-portlet">
        <div class="kt-portlet__head" data-toggle="collapse" data-target="#demo1">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">{{ 'Filter Attendance'|trans }}<span class="hand-cursor"><svg
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon"><g
                                    stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon id="Shape"
                                                                                                            points="0 0 24 0 24 24 0 24"></polygon><path
                                        d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z"
                                        id="Path-94" fill="#000000" fill-rule="nonzero"
                                        transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999) "></path>        </g></svg></span>
                </h3>
            </div>
        </div>
        <span id="demo1" class="{{ app.request.query is empty or app.user.category == 'g' ? 'collapse' }}"><div
                    class="kt-portlet__body add___filter_place">
                <form method="get">
                    <div class="row">
                    {# list of student #}
                    <div class="col-xl-3 col-lg-3 col-md-3 col-xs-12"><label
                                class="col-form-label">{{ 'Users'|trans }} </label>
                        <select class="clearMeAsWell form-control kt-select2 kt-selectpicker simpleSelect2"
                                name="student__based"><option value=""></option>{% for user in student_list %}<option
                            value="{{ user.id }}" {{ app.request.query.get('student__based') == user.id ? 'selected="selected"' }}>{{ user.getFName }} {{ user.getLName }}{% if user.category == 's' %}{{ '(Studnet)'  | trans }}{% elseif user.category == 't' %}{{ '(Teacher)'  | trans }}{% else %}{{ '(Staff)'  | trans }}{% endif %}</option>{% endfor %}</select></div>
                    {# search attendance date #}
                    <div class="col-xl-3 col-lg-3 col-md-3 col-xs-12 simpleDateRangePicker"><label
                                class="col-form-label">{{ 'Date'|trans }} </label><input type="text"
                                                                                         name="attendance_markingDate"
                                                                                         class="form-control"
                                                                                         value="{{ app.request.query.get('attendance_markingDate') }}"
                                                                                         placeholder="{{ 'now' | date('d/m/y') ~ ' / '~  'now' | date('d/m/y') }}"></div>
                    {# Attendance Status #}
                    <div class="col-xl-3 col-lg-3 col-md-3 col-xs-12"><label
                                class="col-form-label">{{ 'Attendance Status'|trans }} </label><select
                                class="clearMeAsWell form-control kt-select2 kt-selectpicker simpleSelect2"
                                name="attendance__status"><option
                                    value=""></option>{% for attendanceStatus in attendanceStatus__list %}<option {{ app.request.query.get('attendance__status') == attendanceStatus.id ? 'selected="selected"' }} value="{{ attendanceStatus.id }}">{{ attendanceStatus.name }} </option>{% endfor %}</select></div>
                    {# list of users #}
                    <div class="col-xl-3 col-lg-3 col-md-3 col-xs-12"><label
                                class="col-form-label">{{ 'Attendance marked by'|trans }} </label><select
                                class="clearMeAsWell form-control kt-select2 kt-selectpicker simpleSelect2"
                                name="attendance__markBy"><option
                                    value=""></option>{% for user in user_list %}{% if user.getCategory != 's' %}
                            <option {{ app.request.query.get('attendance__markBy') == user.id ? 'selected="selected"' }}
                            value="{{ user.id }}">{{ user.getFName }} {{ user.getLName }}</option>{% endif %}{% endfor %}    </select></div>
                </div>
                    <div class="row kt-margin-t-15" style="position: absolute;left: 50%;">
                        <button type="submit" class="btn btn-primary">{{ 'Search'|trans }}</button> &nbsp;
                        <a class="btn btn-info" target="_blank"
                           href="{{ path('filter_teacher_attendance', {'printResult' : 1, 'student__based': app.request.query.get('student__based'), 'class': app.request.query.get('class'), 'classSubject': app.request.query.get('classSubject') , 'attendance_markingDate': app.request.query.get('attendance_markingDate'), 'attendance__status': app.request.query.get('attendance__status') , 'attendance__markBy': app.request.query.get('attendance__markBy') }) }}">{{ 'Print' | trans }}</a> &nbsp; <a
                                class="btn btn-danger" href="{{ path('filter_attendance') }}">{{ 'Clear' | trans }}</a>
                    </div>
                </form>
            </div></span>
    </div>
    {# invoice list #}
    {# list of attendances #}
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>{{ 'Ref#'|trans }}</th>
                    <th>{{ 'Teacher'|trans }}</th>
                    <th>{{ 'Status'|trans }}</th>
                    <th>{{ 'Comment'|trans }}</th>
                    <th>{{ 'Date'|trans }}</th>
                    <th>{{ 'Marked By'|trans }}</th>
                </tr>
                </thead>
                <tbody>{% for atten in attendance %}
                    <tr>
                    <td>{{ atten.id }}</td>
                    <td><a target="_blank"
                           href="{{ path('users_profile', {'id' : atten.user.id | urlencrypt }) }}">{{ atten.user.fullName }}</a>
                    </td>
                    <td>
                        <span class="kt-badge {{ atten.getAttendanceStatusType ?  'kt-badge--success' : 'kt-badge--danger' }}  kt-badge--inline kt-badge--pill">{{ atten.getAttendanceStatus.name }}</span>
                    </td>
                    <td>{{ atten.comments }}</td>
                    <td>{{ date_format(atten.getDateTimeIn) }}</td>
                    <td>{{ atten.getBlameUser.getFullname }}</td></tr>{% endfor %}</tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block ExtraJsFIles %}
    {% for file in encore_entry_js_files('dateRangePicker') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}

    {% for file in encore_entry_js_files('select2__init') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}
{% endblock %}