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

{% set pagename = 'Attendance Status' | trans %}
{% set addBtnTitle = 'Add New Status' | trans %}
{% set addBtnLink = path('add_attendance_status') %}

{% block MainContent %}

    <span class="r__q__s" data-path="{{ path('requestHandler__attendance') }}"></span>
    <div class="kt-portlet">

        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">{{ 'Attendance satuts'|trans }}
                </h3>
            </div>
        </div>
        <div class="kt-portlet__body">

            <!--begin::Section-->
            <div class="kt-section">
                <div class="kt-section__content">
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>{{ 'Status name'|trans }}</th>
                            <th>{{ 'Description'|trans }}</th>
                            <th>{{ 'Status type'|trans }}</th>
                            <th>{{ 'Enable?'|trans }}</th>
                            <th>{{ 'Action'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody>


                        {% for key,value in attendance_status___list %}


                            <tr data-target="{{ value.id|urlencrypt }}">
                                <th scope="row">{{ value.name }}</th>
                                <td>
                                    {{ value.description }}
                                </td>
                                <td>
                                    {% if value.type %}
                                        <span class="kt-badge kt-badge--success  kt-badge--inline kt-badge--pill">{{ 'Present' | trans }}</span>
                                    {% else %}
                                        <span class="kt-badge kt-badge--danger  kt-badge--.
                                        inline kt-badge--pill">{{ 'Absent' | trans }}</span>
                                    {% endif %}
                                </td>

                                <td class="td__attendance__status">
                                    {% if value.getEnable %}
                                        <span class="kt-badge kt-badge--success  kt-badge--inline kt-badge--pill">{{ 'Active' | trans }}</span>
                                    {% else %}
                                        <span class="kt-badge kt-badge--danger  kt-badge--inline kt-badge--pill">{{ 'InActive' | trans }}</span>
                                    {% endif %}
                                </td>

                                <td>
                                    <a data-toggle="dropdown" class="btn btn-sm btn-clean btn-icon btn-icon-md xx-large"
                                       aria-expanded="false">
                                        <i class="fa fa-ellipsis-h"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dotedDropdown"
                                         x-placement="bottom-end">
                                        <ul class="kt-nav">
                                            <li class="kt-nav__item">
                                                <a href="{{ path('add_attendance_status', {'query':  value.id | urlencrypt }) }}"
                                                   class="kt-nav__link"><i
                                                            class="kt-nav__link-icon flaticon-edit-1"></i><span
                                                            class="kt-nav__link-text">Edit</span></a>
                                            </li>

                                            {% if value.id != '1' or value.id != '2' %}
                                                <li class="kt-nav__item deleteStatusLink"
                                                    data-target="{{ value.id|urlencrypt }}">
                                                    <a class="kt-nav__link" href="#"><i
                                                                class="kt-nav__link-icon flaticon2-trash"></i><span
                                                                class="kt-nav__link-text">{{ 'Delete'|trans }}</span></a>
                                                </li>
                                            {% endif %}

                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}

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

            <!--end::Section-->
        </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>Attendance Status?</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 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 target="_blank" href="{{ path('add_attendance') }}">Complete Step 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <p>Attendance Status are , <b>Present, Absent, Sick Leave and other</b>, these status are totally customized able & can define by yourself.
        <br>
        Here we will show the list of Attendance Status.
    </p>

    <h5><b>How to Add Attendance Status?</b></h5>
    <br/>
    <p>To Add Attendance Status Click on the {{ 'Add Attendance Status'|trans }} button which is behind the Documentation button</p>

    <h5 class="color-red-"><b>Important! To Make Attendance Status enabled you need to follow this step</b></h5>
    <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>

{% endblock %}