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

{% block BeforeAnyCSSFile %}
    {% for file in encore_entry_css_files('select2__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
{% endblock %}

{% block ExtraCSSFiles %}
    <link href="{{ assetsBasePath~asset('/css/attendance/add_attendance.css') }}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% set pagename = 'Marking Teacher Attendance' | trans %}


{% block MainContent %}
    <span class="r__q__s d-none" data-path="{{ path('requestHandler__attendance') }}"></span>
    <span class="r____q__us d-none" data-value="{{ path('requestHandler') }}"></span>

    {# filters of the attendance #}
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">{{ 'Mark Attendance'|trans }}</h3>
            </div>
        </div>

        <form class="kt-form" method="post" id="attendance___filter">
            <div class="kt-portlet__body add___filter_place">

                {#active class of active sessions - when class is selected then enrolled users are load accordingly#}
                {% set ColsClass = 'col-lg-4 col-md-4 col-sm-6 col-xs-12' %}
                <div class="row">

                    <input type="hidden" value="st" name="ld">
                    <input type="hidden" value="{{  userCategory }}" name="userCategory">

                    {# Mark attendance of the date of #}
                    <div class="{{ ColsClass }}">
                        <label for="">{{ 'Select date'|trans }}</label>
                        <input type="text" class="simpleDatePicker form-control" name="in_date"
                               value="{{ 'now'|date('d-M-y') }}">
                    </div>

                </div>
            </div>
            <div class="kt-portlet__foot">
                <div class="kt-form__actions">
                    <button type="submit" class="btn-primary btn loadStudent">
                        {{ 'Load Staff'|trans }}
                    </button>
                </div>
            </div>
        </form>

        {% set enabled__statuses_for_attendance = getAppSetting('attendance_enable_status') %}
        {% if enabled__statuses_for_attendance is iterable %}
            <hr>
            <div class="row">
                {#attendance status#}
                {% for key, status in attendance__status %}
                    {#if these status are enabled form the setttings.#}
                    {% if in_array(status.id, enabled__statuses_for_attendance) %}

                        <label class="kt-radio">
                            <input type="radio" class="markAllAsTheseStatusType"
                                   data-target="{{ status.id }}">

                            {% if status.id == '1' %}
                                <span class="kt-present-student"></span>
                            {% elseif status.id == '3' %}
                                <span class="kt-leave-student"></span>
                            {% else %}
                                <span></span>
                            {% endif %}

                            <strong class="kt-label-name"> &nbsp; {{ status.name }}</strong>
                        </label>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

    </div>


    <div class="page-container user-status">
        <div class="row main____add_attendance__view">
            {% include "attendance/___list__addAttendanceOfTeacherAndStaff.html.twig"  with {'__user_list':__user_list} %}
        </div>
    </div>


    {# save changes #}
    <div class="kt-portlet">
        <div class="kt-portlet__foot">
            <div class="kt-form__actions">
                <button type="button" disabled="disabled"
                        class="save-attendance btn btn-primary"> {{ 'Save changes' }}</button>
            </div>
        </div>
    </div>

{% endblock %}

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

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

{% block documentation  %}
    <h5><b>Employee 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('teacher_mark_attendance') }}">Complete Step 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <p>To Mark Teacher Attendance you need to only selecte Date & Click on the <b>Load Staff Button</b> It will load all the Staff </p>


    <h5><b>What are the Attendance Status?</b></h5>
    <p>Attendance Status are , <b>Present, Absent, Sick Leave and other</b>, these status are totally customized able & can define by yourself.var </p>


    <h5><b>Why you're having -
            Please select at least two Attendance Status from the Settings, {{ 'Warning'|trans }}?</b></h5>
    <p>This warning meant, Attendance Status are not enabled by the Settings, To enable from setting Go to <b><a
                    href="{{ path ('app_settings')}}" target="_blank"></a>App Settings</b>
        & Go to the <b>Attendance Setting</b> & select Attendance status from the <b>{{ 'Visisble attendance status'|trans }}</b>
        <a target="_blank" href="{{ path('secure_file_server', {'filePath': secure('fekara/media/help/selectAttendanceStatusFromSettings.png') }) }}">See Fig</a>
    </p>

    <p> If your <b>App Setting </b>, Attendance Setting Tab, is not showing <b>{{ 'Visisble attendance status'|trans }}</b> Dropdown, then Please click on the
        link {{ 'Add Attendance status' | trans }} & system will redirect to the new page, where you can add the Attendance Status
        <a target="_blank" href="{{ path('secure_file_server', {'filePath':secure('fekara/media/help/AddAttendanceStatus.png')}) }}">See Fig</a>

        <br> Add new Status & Go back to the Settings Page and select the Attendance Status & you will able to Mark Attendance of Student.
    </p>


    <h5><b>Attendance Options?</b></h5>
    <p>Attendance Widget provide multiple options: </p>
    <ul>
        <li>You can change Check-in time of single student <b>Consider as Late Check-in</b></li>
        <li>You can write different comments over different Student Attendance <b>Can tell the Late reason, and anything else, what you want</b> </li>
        <li>You can change Single student Attendance Status <b>Consider as Late Check-in</b></li>
    </ul>

    <p>To, see more options click on the eye button which is place over the Attendnace Widget at top right corner!
        <a target="_blank" href="{{ path('secure_file_server',{'filePath':secure('fekara/media/help/AttendanceOption.png') }) }}">See Fig</a>
    </p>


{% endblock %}