{#
DOCS:
This page is used to edit sections of custom fields and custom fields.
If user request to edit section of custom fields then custom field edit view will be hide.
&
If user request to edit custom field then sections of custom field will be hide.

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

{% block title %}{{ 'Add Custom Field'|trans }}{% endblock %}

{% block BeforeAnyCSSFile %}
    {% for file in encore_entry_css_files('select2__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
{% endblock %}
{% set pagename = 'Custom Field Section?' | trans %}

{% block MainContent %}

    {# if user want's to edit the sections and server send valid section data then server it#}
    {% if app.request.attributes.get('_route') == 'add_custom_field_section' %}

        <!--begin::Portlet-->
        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        {{ fieldSectionForEdit.id is empty ? 'Add new section'|trans : 'Update section'|trans }}
                    </h3>
                </div>
            </div>

            <!--begin::Form-->
            <form class="kt-form" action="{{ path('ajax_request_customField', {'query': 'save_section'}) }}"
                  id="addSections" method="post">
                <div class="kt-portlet__body">

                    <input type="hidden" name="id" value="{{ fieldSectionForEdit.id }}"
                           id="adding_section_to_customField">

                    {# section name #}
                    <div class="form-group">
                        <label class="col-form-label">{{ 'Name'|trans }} {{ requireSymbol|raw }} </label>
                        <input type="text" name="name" class="form-control r__q"
                               placeholder="{{ 'Personal Information'|trans }}" value="{{ fieldSectionForEdit.name }}">
                    </div>

                    {# section details #}
                    <div class="form-group">
                        <label class="col-form-label">{{ 'Description'|trans }}</label>
                        <textarea name="description" cols="30" rows="5"
                                  class="form-control">{{ fieldSectionForEdit.description }}</textarea>
                    </div>

                </div>
                <div class="kt-portlet__foot">
                    <div class="kt-form__actions">
                        <button type="submit" class="btn-primary btn addSection">
                            {{ fieldSectionForEdit.id is empty ? 'Add new section'|trans : 'Update section'|trans }}
                        </button>

                        {% if fieldSectionForEdit.id is not empty %}
                            <a href="{{ path('custom_fields') }}" class="btn-default btn">
                                {{ 'Back to list'|trans }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </form>

        </div>

    {% else %}

        {# Custom field list #}

        <div class="kt-portlet" id="testing">

            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        {{ fieldDetails.id is empty ? 'Add new field'|trans : 'Update field'|trans }}
                    </h3>
                </div>
            </div>

            {% include "CustomFields/ajaxPatches/addNewField.html.twig"  with {'customFieldForm':customFieldForm,'fieldDetails':fieldDetails,'fieldSections': fieldSections } %}

        </div>


    {% endif %}



{% endblock %}

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

{% block documentation %}

    <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>While adding or editing a <b>Custom Field</b>, System is asking following information</p>
    <ul>
        <li><b>Field Label</b> - Custom field name</li>
        <li><b>Field Place Holder</b> - What will be show in the input box</li>
        <li><b>Section</b> - In which section, this custom field will be </li>
        <li><b>Option</b> - Is this field must need to fill?</li>
        <li><b>Visible to</b> - We have four type of Users, <b>Student</b>, <b>Guardian</b>, <b>Employees</b>, <b>Teacher</b></li>
        <li><b>Visible to Registration form</b> - Is this field is visible to Registration form of users</li>
        <li><b>Helping message</b> - To describe user, what this field is asking from you, this message shows under the field</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>
    </ul>
{% endblock %}