{% 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 %}
{% block pageLabel %}{{ 'Student List' | trans }}{% endblock %}
{% block MainContent %}
    {% set date = app.request.query.get('date') is empty ?  '' : app.request.query.get('date') %}
    {# filters of the attendance #}
    <div class="kt-portlet">
        <div class="kt-portlet__head" data-toggle="collapse" data-target="#demo">
            <div class="kt-portlet__head-label"><h3 class="kt-portlet__head-title">{{ 'Filter Recrods'|trans }}
                    &nbsp;</h3><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>
            </div>
        </div>
        <span class="{{ app.request.query is empty ? 'collapse' }}" id="demo"><form class="kt-form" method="get">
            <div class="kt-portlet__body add___filter_place">


                <div class="row">

                    {# Mark attendance of the date of #}
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 simpleDateRangePicker">
                        <label for="date">{{ 'Select date'|trans }}</label>
                        <input type="text" class="form-control" name="date" value="{{ date }}">
                    </div>

                    {# search attendance status #}
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label for="date">{{ 'Attendance Status'|trans }}</label>
                        <select name="status" class="form-control simpleSelect2">
                            <option></option>
                            {% for status in attendanceStatus %}
                                <option {{ app.request.query.get('status') == status.id | urlencrypt ? 'selected="selected"' }}
                                        value="{{ status.id | urlencrypt }}">{{ status.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {# search by class #}
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label for="date">{{ 'Classes'|trans }}</label>
                        <select name="class" class="form-control simpleSelect2">
                            <option></option>
                            {% for class in activeClassesWithSession %}
                                <option {{ app.request.query.get('class') == class.id | urlencrypt ? 'selected="selected"' }}
                                        value="{{ class.id | urlencrypt }}"> {{ class.session.name }} >> {{ class.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                </div>
            </div>
            <div class="kt-portlet__foot">
                <div class="kt-form__actions">
                    <button type="submit" class="btn-primary btn">
                        {{ 'Filter Attendance'|trans }}
                    </button>
                    &nbsp;
                    <a target="_blank" class="btn btn-info"
                       href="{{ path('status_wise_attendance', {'status': app.request.query.get('status'), 'class' : app.request.query.get('class'), 'printResult' : 1, 'date' : app.request.query.get('date')}) }}"> {{ 'Print' | trans }}</a>
                    &nbsp;
                    <a class="btn btn-danger" href="{{ path('status_wise_attendance') }}"> {{ 'Clear' | trans }}</a>
                </div>
            </div>
        </form></span>
    </div>
    {# Active class with their session and number of student present and absent#}
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            <div class="kt-section">
                <div class="kt-section__content">
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>{{ 'Class name'|trans }}</th>
                            <th>{{ 'Subject name'|trans }}</th>
                            <th>{{ 'Comments'|trans }}</th>
                            <th>{{ 'Attendance Status'|trans }}</th>
                            <th>{{ 'Marked By'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody id="subjects" class="ui-sortable">
                        {% for attendance in attendanceReportOfAClass %}
                            <tr>
                                <th scope="row">
                                    {{ attendance.getClassSessionEnrolment.getClassSession.session.name is defined ? attendance.getClassSessionEnrolment.getClassSession.session.name : '' }}
                                    >>
                                    {{ attendance.getClassSessionEnrolment.getClassSession.name is defined ? attendance.getClassSessionEnrolment.getClassSession.name: '' }}
                                </th>
                                <td>{{ attendance.getClassSessionEnrolmentSubject.getClassSubject.getSubjectName is defined ? attendance.getClassSessionEnrolmentSubject.getClassSubject.getSubjectName:'' }}</td>
                                <td>{{ attendance.getComments }}</td>
                                <td>{{ attendance.getAttendanceStatus.name }}</td>
                                <td>{{ attendance.getBlameUser.getFullName }}</td>
                            </tr>
                        {% endfor %}

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

{% endblock %}

   {% block ExtraJsFIles %}
       {% for file in encore_entry_js_files('dateRangepicker__init') %}
           <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 %}