{# extends page #}
{% 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 = 'Students List' | trans %}
{% set addBtnTitle = 'Add new Student?' | trans %}
{% set addBtnLink = path('add_new_user') %}

{# add page title#}
{% block pageTitle %}{{ pagename }}{% endblock %}

{# main content of page display here#}
{% block MainContent %}
    <span id="whereToSendPageRemoteRequest" data-value="{{ path('requestHandler') }}"></span><span
        class="r__q__s d-none" data-path="{{ path('requestHandler') }}"></span>
    <div class="currentLocale d-none" data-locale="{{ app.request.attributes.get('_locale') }}"></div>

    {% for messages in app.flashes('importCSVResult') %}
        {% set messagesList = twig_json_decode(messages) %}
        {% if messagesList is iterable %}
            {% for message in messagesList %}

                {% if message[0] is defined %}
                    {% set message = message[0] %}
                {% endif %}

                {% include 'errors/server_errors.html.twig' with {errorMessage: message} %}
            {% endfor %}
        {% else %}
            {% include 'errors/server_errors.html.twig' with {errorMessage: messagesList} %}
        {% endif %}
    {% endfor %}

    {# Search block for the student list#}
    <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>
        {# form where to write text.#}
        {# {{ app.request.query.get('csE') is empty ?  'collapse'  }} #}
        <span class="{{ app.request.query is empty ? 'collapse' }}" id="demo">
            <form class="kt-form" method="get">
                    <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-2 col-md-2 col-sm-4 col-xs-6' %}
                        {# filters #}
                        <div class="row">
                                {# list of all classes of active sessions#}
                            <div class="{{ ColsClass }}">
                                <label class="col-form-label">{{ 'Classes'|trans }}<small> ({{ 'active session'| trans }})</small></label>
                                <select class="form-control simpleSelect2" name="cs">
                                    <option value="">{{ 'Select Class' | trans }}</option>
                                    {% for class in classSession %}
                                        <option  {{ app.request.query.get('cs')  == class.id | urlencrypt ?  'selected="selected"' : '' }} value="{{ class.id | urlencrypt }}">
                                            {{ class.getSession.getName }} >> {{ class.name }}
                                            {% if not class.getActive %}
                                                {{ '(in-active)' |trans }}
                                            {% endif %}
                                            {% if class.getIsDeleted %}
                                                {{ '(deleted)' |trans }}
                                            {% endif %}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            {# Order by column #}
                            <div class="{{ ColsClass }}">
                                <label class="col-form-label">{{ 'Order By'|trans }}</label>
                                <select class="form-control simpleSelect2" name="oB">
                                    <option {{ app.request.query.get('oB')  == 'id' ?  'selected="selected"' : '' }} value="id">{{ 'ID' | trans }}</option>
                                    <option {{ app.request.query.get('oB')  == 'fName' ?  'selected="selected"' : '' }} value="fName">{{ 'Name' | trans }}</option>
                                </select>
                            </div>
                            {# Order #}
                            <div class="{{ ColsClass }}">
                                <label class="col-form-label">{{ 'Order'|trans }}</label>
                                <select class="form-control simpleSelect2" name="o">
                                    <option value=""></option>
                                    <option {{ app.request.query.get('o')  == 'asc' ?  'selected="selected"' : '' }} value="asc">{{ 'ASC' | trans }}</option>
                                    <option {{ app.request.query.get('o')  == 'desc' ?  'selected="selected"' : '' }} value="desc">{{ 'DESC' | trans }}</option>
                                </select>
                            </div>
                            {# Student name list #}
                            <div class="{{ ColsClass }}">
                                <label class="col-form-label">{{ 'Student'|trans }}</label>
                                <select class="form-control simpleSelect2" name="studentName">
                                    <option value=""></option>
                                        {% for std in students %}
                                            <option {{ app.request.query.get('studentName') == std.id ? 'selected="selected"' }} value="{{ std.id }}">{{ std.getFullName }}</option>
                                        {% endfor %}
                                </select>
                            </div>
                            {# Gurdian name #}
                            <div class="{{ ColsClass }}">
                                <label class="col-form-label">{{ 'Guardian'|trans }}</label>
                                <select class="form-control simpleSelect2" name="guardian">
                                    <option value=""></option>
                                        {% for guard in Guardian %}
                                            <option {{ app.request.query.get('guardian') == guard.id ? 'selected="selected"' }} value="{{ guard.id }}">{{ guard.getFullName }}</option>
                                        {% endfor %}
                                </select>
                            </div>
                            {# Active #}
                            <div class="{{ ColsClass }}">
                                <label class="col-form-label">{{ 'Active/InActive?'|trans }}</label>
                                <select class="form-control simpleSelect2" name="status">
                                    <option value=""></option>
                                     <option {{ app.request.query.get('status') == 2 ? 'selected="selected"' }} value="2">{{ 'Active' | trans }}</option>
                                     <option {{ app.request.query.get('status') == 1 ? 'selected="selected"' }}  value="1">{{ 'InActive' | trans }}</option>
                                </select>
                            </div>
                            {#Gender #}
                            <div class="{{ ColsClass }}">
                                <label class="col-form-label">{{ 'Gender'|trans }}</label>
                                <select class="form-control simpleSelect2" name="gender">
                                    <option value=""></option>
                                     <option {{ app.request.query.get('gender') == 1 ? 'selected="selected"' }}  value="1">{{ 'Male' | trans }}</option>
                                     <option {{ app.request.query.get('gender') == 2 ? 'selected="selected"' }} value="2">{{ 'FeMale' | trans }}</option>
                                     <option {{ app.request.query.get('gender') == 3 ? 'selected="selected"' }} value="3">{{ 'Other' | trans }}</option>
                                </select>
                            </div>
                            {# Date Range filter #}
                            <div class="col-xl-2 col-lg-2 col-md-2  simpleDateRangePicker">
                                <label class="col-form-label" for="date">{{ 'Date Range'|trans }}</label>
                                <input type="text" class="form-control clearMeAsWell" name="dateRange"
                                       value="{{ app.request.query.get('dateRange') }}">
                            </div>
                        </div>

                        <div class="row">
                                {# Search & Reset Button  #}
                            <div class="centerButton">
                                <button type="submit" class="btn btn-primary btn-md">{{ 'Search'|trans }}</button>
                                &nbsp;
                                <button class="btn btn-danger btn-md clearSelect2"
                                        data-target="{{ path('student_list') }}">{{ 'Clear'|trans }}</button>
                            </div>
                        </div>
                    </div>
            </form>
        </span>

    </div>

    {# List of the students #}
    <div class="kt-portlet">
        {# list of student #}
        <div class="kt-portlet__body">
            <div class="kt-section">
                <div class="kt-section__content">
                    <table class="table table-striped table-bordered" id="dataTable">
                        <thead>
                        <tr>
                            <th>{{ 'Name'|trans }}</th>
                            <th>{{ 'Guardian'|trans }}</th>
                            <th>{{ 'Session >> Class Enrollment'|trans }}</th>
                            <th>{{ 'Active'|trans }}</th>
                            <th>{{ 'Gender'|trans }}</th>
                            <th>{{ 'DOR'|trans }}</th>
                            <th>{{ '...'|trans }}</th>
                        </tr>
                        </thead>

                        <tbody>
                        {# User's saved sections #}
                        {% for u_l in UsersLIst %}

                            {% set class = '' %}
                            {% if u_l.getIsDeleted %}
                                {% set class = 'bg-inactive' %}
                            {% endif %}

                            <tr class="{{ class }}" data-from="section" id="u__{{ u_l.id }}">
                                {# first and last name#}
                                <td><a href="{{ path('users_profile', {'id':u_l.id | urlencrypt  }) }}"> {{ u_l.id}} {{ u_l.fname }} {{ u_l.lname }}</a></td>
                                {# Guardian #}
                                <td>
                                    {% if u_l.guardians.toArray is not empty %}
                                        {% for guard in u_l.guardians.toArray %}
                                            {{ guard.fname }} {{ guard.lname }} / {{ guard.phone }}
                                        {% endfor %}
                                    {% endif %}
                                </td>
                                {# Enrollment #}
                                <td>
                                    {% if u_l.classSessionEnrolments.toArray is not empty %}
                                        {% for enroll in u_l.classSessionEnrolments.toArray %}
                                            {% if enroll.getClassSession.getSession.active is not empty and enroll.getClassSession.getSession.active and not enroll.getIsDeleted %}
                                                {{ enroll.getClassSession.getSession.getName }} >>    {{ enroll.getClassSession.name }}
                                                {% if not enroll.getClassSession.getSession.active %}
                                                    <b> (Not Active) </b>
                                                {% endif %}
                                                <br>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                </td>
                                {# status of user, is active or in active #}
                                <td>

                                    {% if u_l.getIsActive() %}
                                        <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>
                                {# gender of user #}
                                <td>
                                    {% if u_l.gender == 1 %}
                                        <i class="fa fa-male"></i>
                                    {% elseif u_l.gender == 2 %}
                                        <i class="fa fa-female"></i>
                                    {% else %}
                                        <i class="fa fa-male"></i> - <i class="fa fa-female"></i>
                                    {% endif %}
                                </td>
                                {# date of registration #}
                                <td>{{ u_l.getRegisterTime()|date(getAppSetting('date_format')) }}</td>
                                {# actions list #}
                                <td>
                                    <a data-toggle="dropdown" class="btn btn-sm btn-clean btn-icon btn-icon-md"
                                       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" data-targetRef="{{ u_l.id }}">
                                            <li class="kt-nav__item">
                                                <a class="kt-nav__link"
                                                   href="{{ path('users_profile', {'id':u_l.id | urlencrypt  }) }}"><i
                                                            class="kt-nav__link-icon flaticon-edit-1"></i><span
                                                            class="kt-nav__link-text">{{ 'Edit'|trans }}</span></a>
                                            </li>
                                            <li class="kt-nav__item deleteUserLink">
                                                <a class="kt-nav__link"
                                                   href="{{ path('requestHandler') }}"><i
                                                            class="kt-nav__link-icon flaticon2-trash"></i><span
                                                            class="kt-nav__link-text">

                                                        {% if u_l.getIsDeleted %}
                                                            {{ 'Un-Delete'|trans }}
                                                        {% else %}
                                                            {{ 'Delete'|trans }}
                                                        {% endif %}

                                                    </span></a>
                                            </li>
                                            <li class="kt-nav__item">
                                                <a class="kt-nav__link"
                                                   href="{{ path('studentDetailReport', {'userID':u_l.id | urlencrypt}) }}"><i
                                                            class="kt-nav__link-icon flaticon2-sheet"></i><span
                                                            class="kt-nav__link-text">{{ 'Detail Report'|trans }}</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>

                        <tfoot>
                        <tr>
                            <th>{{ 'Name'|trans }}</th>
                            <th>{{ 'Guardian'|trans }}</th>
                            <th>{{ 'Session >> Class Enrollment'|trans }}</th>
                            <th>{{ 'Active'|trans }}</th>
                            <th>{{ 'Gender'|trans }}</th>
                            <th>{{ 'DOR'|trans }}</th>
                            <th>{{ '...'|trans }}</th>
                        </tr>
                        </tfoot>

                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{# extra js codes here.#}
{% 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('UserList') %}
        <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 %}

{# docs #}
{% block documentation %}
    <h5><b>Students?</b></h5>
    <br/>
    Students are the Most Important Entity in the School, Here we can see the List of All registered, Active, In-Active, Deleted Students
    <br/>
    Student List is showing:
    <br><br>
    <ul>
        <li>Name of the Student</li>
        <li>Name of Student Guardian & Phone</li>
        <li>In Which Session and Class Student has Enrolled</li>
        <li>Is Student Active</li>
        <li>Gender Of Student</li>
        <li>Date of Registration</li>
    </ul>

    <h5><b>Which Actions can be performed?</b></h5>

    Student List Provide some actions that can be done over the Students, You can check those action on left of each student row!
    <br/> <br/>
    <ul>
        <li>Can Edit the Student</li>
        <li>Can Delete the Student</li>
        <li>Can Check the Detailed Report of Student</li>
        <li>To Check the Student Details, Click on the Student Name</li>
    </ul>

    <h5><b>Who to Add New Student?</b></h5>
    You can see there is <b>Add Student</b> Button in the Page Header, Behind the Documentation button.
    Click on that Button to add the new Student. <br />
    Student can register by self, to enable Online Registration, Check out <b>App Settings</b> or Click on this link, <a
        target="_blank" href="{{ path('app_settings') }}">{{ 'Enable online Student regisration'|trans }}</a> & Go to the <b>Application Setting</b> Tab, Scroll Down the Page & You will see the
    {{ 'Enable online Student regisration'|trans }} Dropdown.

    <br><br>
    <h5><b>Who to Filter or Search Students?</b></h5>
    You can see there is <b>Filter Records</b> Box over the Student List, To Search or Filter you've to click on that box so, a new shinny, Search Methods will apper.
    You can search on Students on following basics!
    <ul>
        <li>Can search Student on base of <b>Class</b></li>
        <li>Can Search Student on base of <b>Guardian</b> </li>
        <li>Can Search Student on base of <b>Active / In Active</b> </li>
        <li>Can Search Student on base of <b>Gender</b> </li>
        <li>Can Search Student on base of <b>Date of Registration</b> </li>
    </ul>

    <br>
    <i>You can also sort Students on base of their ID (A Student App Unique Number)</i>
    <br>

{% endblock %}