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

{% block title %} Fekara | Custom Fields  {% endblock %}

{# add extra css here, if require #}
{% block ExtraCSSFiles %}
    <link href="{{ assetsBasePath ~asset('/css/CustomFields/index.css') }}" rel="stylesheet" type="text/css"/>
{% endblock %}
{% set pagename = 'Custom Fields' | trans %}
{% set addBtnTitle = 'Add New Field?' | trans %}
{% set addBtnLink = path('add_custom_fields') %}

{% 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="{{ path('add_custom_field_section') }}" class="kt-menu__link"><span
                            class="kt-menu__link-text">{{ 'Add Custom Field Section?' | trans }}</span><i class="kt-menu__ver-arrow la la-angle-right"></i></a>
            </li>
        </ul>
    </div>
{% endblock %}

{% block MainContent %}

    <span class="hand_____l" data-path="{{ path('ajax_request_customField') }}"></span>

    {# Section of custom fields #}
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                    {{ 'Sections'|trans }}
                </h3>
            </div>
        </div>
        <div class="kt-portlet__body">
            <div class="kt-section">
                <div class="kt-section__content">

                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>{{ 'Name'|trans }}</th>
                            <th>{{ 'Description'|trans }}</th>
                            <th>{{ 'No, of fields'|trans }}</th>
                            <th>{{ 'Actions'|trans }}</th>
                        </tr>
                        </thead>

                        {# Default section #}
                        <tr class="no-background">
                            <th scope="row">{{ 'More Information' | trans }}</th>
                            <td>{{ 'This is the default section, Uncategories field will display here'|trans }}</td>
                            <td>
                                {{ noOfFieldInDefaultSection|length }}
                            </td>
                            <td>
                                <a class="btn btn-sm btn-clean btn-icon btn-icon-md"
                                   aria-expanded="false">
                                    <i class="fa fa-ellipsis-h"></i>
                                </a>
                            </td>
                        </tr>

                        <tbody id="section_list" class="ui-sortable">
                        {# User's saved sections #}
                        {% for f_s in fieldsSection %}

                            {% if f_s.id != 1 %}
                                <tr data-from="section" id="f_section_{{ f_s.id }}" data-ref="{{ f_s.id }}">
                                    <th scope="row" class="move-cursor">{{ f_s.name }}</th>
                                    <td class="move-cursor">{{ f_s.description }}</td>
                                    <td class="move-cursor">
                                        {{ f_s.getCustomFieldRef() | length }}
                                    </td>
                                    <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="{{ f_s.id }}">
                                                <li class="kt-nav__item">
                                                    <a class="kt-nav__link"
                                                       href="{{ path('add_custom_field_section', {'id':f_s.id}) }}"><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">
                                                    <a class="kt-nav__link CustomFieldActionList"
                                                       href="{{ path('ajax_request_customField') }}"><i
                                                                class="kt-nav__link-icon flaticon2-trash"></i><span
                                                                class="kt-nav__link-text">{{ 'Delete'  | trans }}</span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            {% endif %}


                        {% endfor %}
                        </tbody>

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

    {# List of Custom Fields #}
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                    {{ 'Custom Fields'|trans }}
                </h3>
            </div>
        </div>
        <div class="kt-portlet__body">

            <div class="kt-section">
                <div class="kt-section__content">

                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>{{ 'Name'|trans }}</th>
                            <th>{{ 'Type'|trans }}</th>
                            <th>{{ 'Accessible to'|trans }}</th>
                            <th>{{ 'Registration form'|trans }}</th>
                            <th>{{ 'Require'|trans }}</th>
                            <th>{{ 'Actions'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody id="field_list" class="ui-sortable">

                        {% for field in fieldsLIst %}

                            {# some twig variables #}
                            {# show this field to these specific roles. #}
                            {% set visible_to = field.getVisibleTo()|split(',') %}
                            {# show this field to specific roles of registration form #}
                            {% set visible_in = field.getVisibleToRegistrationFormOf()|split(',') %}

                            <tr data-from="field" id="fieldList_tr_{{ field.id }}" class="cursor-move"
                                data-ref="{{ field.id }}">
                                <th class="move-cursor" scope="row"> {{ field.label }}</th>
                                <td class="move-cursor">{{ field.type }}</td>
                                {# this field visible to following roles. #}
                                <td class="move-cursor">
                                    {% if in_array('1', visible_to) %}
                                        Student,
                                    {% endif %}
                                    {% if in_array('2', visible_to) %}
                                        Teacher,
                                    {% endif %}
                                    {% if in_array('3', visible_to) %}
                                        Guardian,
                                    {% endif %}
                                    {% if in_array('4', visible_to) %}
                                        Employee,
                                    {% endif %}
                                </td>
                                <td class="move-cursor">
                                    {% if in_array('1', visible_in) %}
                                        Student,
                                    {% endif %}
                                    {% if in_array('2', visible_in) %}
                                        Teacher,
                                    {% endif %}
                                    {% if in_array('3', visible_in) %}
                                        Guardian,
                                    {% endif %}
                                    {% if in_array('4', visible_in) %}
                                        Employee,
                                    {% endif %}
                                </td>
                                <td class="move-cursor">
                                    {% if field.is_require %}
                                        <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" data-targetRef="{{ field.id }}">
                                            <li class="kt-nav__item">
                                                <a class="kt-nav__link"
                                                   href="{{ path('add_custom_fields', {'id':field.id}) }}"><i
                                                            class="kt-nav__link-icon flaticon-edit-1"></i><span
                                                            class="kt-nav__link-text">Edit</span></a>
                                            </li>
                                            <li class="kt-nav__item">
                                                <a class="kt-nav__link CustomFieldAction"
                                                   href="{{ path('ajax_request_customField') }}"><i
                                                            class="kt-nav__link-icon flaticon2-trash"></i><span
                                                            class="kt-nav__link-text">Delete</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}

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

{% block ExtraJsFIles %}
    {% for file in encore_entry_js_files('viewCustomFields') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}
{% endblock %}
{% block documentation %}
    <h5><b>Custom Fields?</b></h5>

    <p> Custom fields are designed because, many schools has different criteria to ask information from students. so this application is asking basic information from the Students, Teachers & Employees
        <br>
        Here we are having of all the Custom fields, All custom fields are must be in the <b>Section</b>, try to add <a
                href="{{ path('add_custom_field_section') }}" target="_blank">new section</a>
    </p>
    <p> From here, We can see the List of Custom Field Sections and Custom Fields, this page is divided into two segments </p>
    <ul>
        <li><b>Sections </b>- Here all list of Custom Fields Sections are displayed, We are having information, how many custom field are in the Section
            <br>
            To edit the section you need to go to the right of section table
        </li>
        <li><b>Custom Fields</b> - here we found the custom fields
            <ul>
                <li><b>Name</b> - Custom field name</li>
                <li><b>Type</b> - Custom field type, means, what type of question we are asking from user, is text, number, selection and etc </li>
                <li><b>Accessible to</b> - We have four type of Users, <b>Student</b>, <b>Guardian</b>, <b>Employees</b>, <b>Teacher</b>  </li>
                <li><b>Registration form</b> - Is this field is visible to Registration form of users</li>
                <li><b>Require</b> - Is this field must need to fill?</li>
                <li><b>Action</b> - What we can do over custom field is listed here</li>
            </ul>
        </li>
    </ul>
{% endblock %}