{% 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 = 'Daily Attendance Report' | trans %}
{% set addBtnTitle = 'Mark Attendance?' | trans %}
{% set addBtnLink = path('add_attendance') %}

{% block showHeaderMenuButtons %}
    <div id="kt_header_menu" class="kt-header-menu kt-header-menu-mobile  kt-header-menu--layout-default ">
        <ul class="kt-menu__nav ">
            <li class="kt-menu__item  kt-menu__item--open kt-menu__item--here kt-menu__item--submenu kt-menu__item--rel kt-menu__item--open kt-menu__item--here kt-menu__item--active"
                data-ktmenu-submenu-toggle="click" aria-haspopup="true"><a href="javascript:;"
                                                                           class="kt-menu__link kt-menu__toggle"><span
                            class="kt-menu__link-text">{{ 'Reports' | trans }}</span><i
                            class="kt-menu__ver-arrow la la-angle-right"></i></a>
                <div class="kt-menu__submenu kt-menu__submenu--classic kt-menu__submenu--left">
                    <ul class="kt-menu__subnav">
                        <li class="kt-menu__item " aria-haspopup="true"><a href="{{ path('daily_attendance') }}"
                                                                           class="kt-menu__link "><i
                                        class="kt-menu__link-bullet kt-menu__link-bullet--dot"><span></span></i><span
                                        class="kt-menu__link-text">{{ 'Routine Report' | trans }}</span></a></li>
                        <li class="kt-menu__item " aria-haspopup="true"><a href="{{ path('class_wise_attendance') }}"
                                                                           class="kt-menu__link "><i
                                        class="kt-menu__link-bullet kt-menu__link-bullet--dot"><span></span></i><span
                                        class="kt-menu__link-text">{{ 'Class Based' }}</span></a></li>
                        <li class="kt-menu__item " aria-haspopup="true"><a href="{{ path('filter_attendance') }}"
                                                                           class="kt-menu__link "><i
                                        class="kt-menu__link-bullet kt-menu__link-bullet--dot"><span></span></i><span
                                        class="kt-menu__link-text">{{ 'Filter Attendance' | trans }}</span></a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
{% endblock %}
{% block MainContent %}
    <div class="kt-portlet">
        {# Search filter head #}
        <div class="kt-portlet__head" data-toggle="collapse" data-target="#demo1">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">{{ 'Daily Attendnace'|trans }}

                    {# dropdown #}<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>
        {# filters #}
        {#        {{ app.request.query.get('date') is empty ? 'collapse' }} #}
        <span id="demo1">
            <form class="kt-form" method="get">
                <div class="kt-portlet__body add___filter_place">
                    <div class="row">

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

                        {# Attendance Status #}
                    <div class="col-xl-4 col-lg-4 col-md-4 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>

                        {# Mark attendance of the date of #}
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                            <label class="col-form-label" for="attend_inTime">{{ 'Date'|trans }}</label>
                            <input type="text" class="form-control simpleDatePicker" name="attend_inTime"
                                   value="{{ app.request.query.get('attend_inTime') }}">
                        </div>
                    </div>
                </div>

                <div class="kt-portlet__foot">
                    <div class="kt-form__actions">
                        <button type="submit"
                                class="btn-primary btn filterRecords">{{ 'Search'|trans }}</button>
                        &nbsp;
                        <a class="btn btn-info" target="_blank"
                           href="{{ path('daily_attendance', {'printResult': 1,'class':app.request.query.get('class') | urlencrypt, 'attendance__status':app.request.query.get('attendance__status'), 'attend_inTime':app.request.query.get('attend_inTime') }) }}">{{ 'Print' | trans }}</a>
                            &nbsp;
                        <a class="btn btn-danger"
                           href="{{ path('daily_attendance') }}">{{ 'Clear' | trans }}</a>
                    </div>
                </div>
            </form>
        </span>
    </div>
    {# Body #}
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>{{ 'Student Name'|trans }}</th>
                    <th>{{ 'Attendance Status'|trans }}</th>
                </tr>
                </thead>
                <tbody>

                {% for attendance in attendances %}
                    {% if isInstanceof(attendance,'attendance') %}
                        <tr>
                            <td>{{ attendance.user is not empty  ? attendance.user.fullname }}</td>
                            <td>
                                {% if attendance.getAttendanceStatustype %}
                                    {% set ClassName = 'success' %}
                                {% else %}
                                    {% set ClassName = 'danger' %}
                                {% endif %}
                                <span class="kt-badge kt-badge--{{ ClassName }}  kt-badge--inline kt-badge--pill">{{ attendance.getAttendanceStatus is not empty ? attendance.getAttendanceStatus.name }}</span>
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}

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

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

    <h5><b>Student Attendance?</b></h5>
    <br/>

    <div class="mb-3 accordion accordion-solid accordion-toggle-plus" id="accordionExample1">
        <div class="card">
            <div class="card-header" id="flow_div">
                <div class="card-title" data-toggle="collapse" data-target="#collapse_flow_div" aria-expanded="false"
                     aria-controls="collapseOne1">
                    Q1. What is the Flow of Attendance? (If you're new to Attendance, Please make sure you followed
                    these Setups)
                </div>
            </div>
            <div id="collapse_flow_div" class="collapse" aria-labelledby="flow_div" data-parent="#accordionExample1"
                 style="">
                <div class="card-body">
                    A1. <a target="_blank"
                           href="{{ path('secure_file_server', {'filePath'  : secure('fekara/media/help/AttendanceFlow.png')}) }}">See
                        Fig, To Check Flow</a>
                    <ul>
                        <li>Step 1 is about to add {{ 'Attendance satuts'|trans }} <a target="_blank" href="{{ path('attendance_status') }}">Complete Step 1</a></li>
                        <li>Step 2 is about to enable {{ 'Attendance satuts'|trans }} from Settings <a target="_blank" href="{{ path('app_settings') }}">Complete Step 2</a>, Go to the Setting Page & then Go to {{ 'Attendance Setting' | trans }} Tab </li>
                        <li>Step 3 is about Mark {{ 'Attendance'|trans }}<a href="{{ path('add_attendance') }}">Complete Step 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <p>This page help to Show Daily Attendance of Student, At the bottom of the Page, there is a table which is divided
        into tow columns</p>
    <ul>
        <li>{{ 'Student Name'|trans }}</li>
        <li>{{ 'Attendance Status'|trans }}</li>
    </ul>

    <p>To Filter Attendance of Specific Class you Can Select Class from the Classes Dropdown, Attendance Status &
        Date</p>
    <p>To Print out the Student Attendance, You've to Click on the <b>Print</b> button, after search. </p>

    <h5><b>How to Mark Attendance Of Class?</b></h5>
    <p>To Mark Class Attendance Click over the <b>Mark Attendance</b> button, which is in the Top head, behind the
        Documentation button</p>

{% endblock %}