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

{% 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">
                    {# list of all classes of active sessions#}
                    <div class="{{ ColsClass }}">
                        <label>{{ 'Classes'|trans }}
                            <small> ({{ 'active session'| trans }})</small>
                        </label>
                        <select class="form-control simpleSelect2" name="active__classes">
                            <option value="">{{ 'Select Class' | trans }}</option>
                            {% for class in activeClassesWithSession %}

                                {% if app.getUser().getCategory() == 't' %}
                                    {# if current user is teacher #}

                                    {% if(in_array(class.id, assignedClassesToTeacher)) %}
                                        {# Only show those classes which are assigned to the teacher #}
                                        <option data-type="{{ class.getAttendanceType }}"
                                                value="{{ class.id }}">{{ class.session.name }}
                                            >> {{ class.name }}</option>
                                    {% endif %}

                                {% else %}
                                    {# if current user is not teacher#}
                                    <option data-type="{{ class.getAttendanceType }}"
                                            value="{{ class.id }}">{{ class.session.name }}
                                        >> {{ class.name }}</option>

                                {% endif %}



                            {% endfor %}
                        </select>
                    </div>

                    {# list of subject which is in the class #}
                    <div class="{{ ColsClass }} subjectList">
                        <label>{{ 'Subjects'|trans }}
                            <small>({{ 'insdie'| trans }} <b><span class="selectedClassName">{{ 'class'|trans }}</span></b>)
                            </small>
                        </label>
                        <span></span>
                        <select class="form-control dumysubjects" disabled="disabled">
                            {% for class in activeClassesWithSession__not_subject_wise %}
                                <option value="{{ class.id }}">{{ class.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {# 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 Students'|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__addAttendance.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('attendance') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}
{% endblock %}

{% block documentation %}
    <h5><b>Mark 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>To Mark Student Attendance:
    <ul>
        <li>Select Class From the Class DropDown - when you select the Class you will see effect over the Subject
            DropDown!
        </li>
        <li>Select Subject, If Visible</li>
        <li>Select Date of which date you want to mark Attendance, by, Page load, Today's Data will visible to the
            Select Date box.
            <br>
            If you want to Mark Yesterday Attendance, Please select yesterday date & Hit load Students button to load
            the Student.
        </li>
    </ul>
    </p>

    <h5><b>Why Subject Dropdown Disabled or Hide when we select the Class from Class DropDown?</b></h5>
    <p>If you remember, While adding or editing a Class, system ask {{ 'Attendance type' | trans }} from you, You select
        the Class wise or Subject wise.
        <a target="_blank"
           href="{{ path('secure_file_server', {'filePath': secure('fekara/media/help/ClassAttendanceType.png') }) }}">See
            Fig</a>

        <br>
        If Selected Class Attendance is <b>Class wise</b> then subject Dropdown will hide/Disable <br>
        If Selected Class Attendance is <b>Subject wise</b> then Subject Dropdown will visible/Enable <br>
    </p>

    <p><b>Load Student</b> button will loads the Student of Specific Class or Subject which is selected from above
        drop-downs,
        Under the Load button you will see the some Attendance status, <i>If these are not available, then Please read
            next Heading under this paragraph </i>
        <br>
        If you select the status one of them, then all student marked by that status & you can save the their attendance
        in one go.
    </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 %}