{#
USAGE: This templates is for a three purposes,
Adding for new students.
#}

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

{% block BeforeAnyCSSFile %}
    {% for file in encore_entry_css_files('select2__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
{% endblock %}

{% set pagename = 'Add Student / Guardian' | trans %}

{% block MainContent %}

    <span id="whereToSendPageRemoteRequest" class="d-none" data-value="{{ path('requestHandler') }}"></span>
    <span class="addingNewUser d-none" data-answer="1"></span>

    <div class="alert alert-info" role="alert">
        <div id="serverResponse__notice"></div>
        <div class="alert-icon"><i class="flaticon-questions-circular-button"></i></div>
        <div class="alert-text">
            <div><b>{{ 'Info' | trans }} </b></div>
            <span class="message">{{ "We've notice some student doesn't have email address, so the systems suggest a valid email address for those student, when we try to Add new Student" | trans }}</span>
            <br>
            <span class="message">{{ "In your case, If student have an email address then you can remove suggested email address from the Email address field and write the actual one"| trans }}</span>
        </div>
        <div class="alert-close hideErrorMessageAler">
            <button type="button" aria-label="Close" class="close"><span aria-hidden="true"><i class="la la-close"></i></span></button>
        </div>
    </div>

    <div class="row">
        {# import students #}
        {% include 'student/import/import.html.twig' %}

        {# Basic information #}
        <div class="col-xl-12">
            <div class="kt-portlet">
                {# adding student #}
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">{{ 'Basic Information'|trans }}</h3>
                    </div>
                </div>
                <form class="kt-form kt-form--label-right" id="saveProfile"
                      action="{{ path('requestHandler', {'query':'profileUpdate' }) }}" enctype="multipart/form-data">
                    <div class="kt-portlet__body">

                        <input type="hidden" name="category" value="s">
                        {# first name div. #}
                        <div class="form-group row">
                            <label class="col-xl-3 col-lg-3 col-form-label">{{ 'First Name'|trans }} {{ requireSymbol|raw }}</label>
                            <div class="col-lg-9 col-xl-6">
                                <input class="form-control" type="text" name="fName" required="required">
                            </div>
                        </div>

                        {# last name div #}
                        <div class="form-group row">
                            <label class="col-xl-3 col-lg-3 col-form-label">{{ 'Last Name'|trans }} {{ requireSymbol|raw }}</label>
                            <div class="col-lg-9 col-xl-6">
                                <input class="form-control" type="text" name="lname" required="required">
                            </div>
                        </div>

                        {# email address div.#}
                        <div class="form-group row">
                            <label class="col-xl-3 col-lg-3 col-form-label">{{ 'Email Address'|trans }}</label>
                            <div class="col-lg-9 col-xl-6">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="la la-at"></i></span>
                                    </div>
                                    <input type="text" class="form-control" placeholder="{{ 'Email' | trans }}"
                                           name="email" aria-describedby="basic-addon1" value="{{ uniqueEmail }}">
                                </div>
                            </div>
                        </div>

                        {# asking for gender #}
                        <div class="form-group row">
                            <label class="col-xl-3 col-lg-3 col-form-label">{{ 'Gender'|trans }}
                                {{ requireSymbol|raw }}
                            </label>
                            <div class="col-lg-9 col-xl-6">
                                <div class="kt-radio-inline">
                                    <label class="kt-radio kt-radio--bold kt-radio--brand">
                                        <input type="hidden" name="continueToEditing" value="0">
                                        <input type="radio" name="gender" class="r__q" value="1"
                                               required="required"> {{ 'Male'|trans }}
                                        <span></span>
                                    </label>

                                    <label class="kt-radio kt-radio--bold kt-radio--brand">
                                        <input type="radio" name="gender" class="r__q"
                                               value="2"> {{ 'Female'|trans }}
                                        <span></span>
                                    </label>

                                    <label class="kt-radio kt-radio--bold kt-radio--brand">
                                        <input type="radio" name="gender" class="r__q"
                                               value="3"> {{ 'Other'|trans }}
                                        <span></span>
                                    </label>

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

                        {# Search for gurdian #}
                        <div class="form-group row">
                            <label class="col-xl-3 col-lg-3 col-form-label">{{ 'Search for guardian'|trans }}</label>
                            <div class="col-lg-9 col-xl-6">
                                <div class="input-group GuardianSelectWrapper">
                                    <select name="guard__" class="form-control simpleSelect2">
                                        <option value=""></option>
                                        {% for guard in guardian %}
                                            <option value="{{ guard.id }}">{{ guard.fullName }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <a href="#"
                                   class="showGuardianPortlet">{{ 'Click here if guardian is not in the list & you want to create new guardian' | trans }}</a>
                            </div>
                        </div>

                    </div>
                    <div class="kt-portlet__foot">
                        <div class="kt-form__actions">
                            <div class="row">
                                <div class="col-lg-3 col-xl-3">
                                </div>
                                <div class="col-lg-9 col-xl-9" data-formId="saveProfile">
                                    <button type="reset" data-action='profileUpdate' data-shifting="false"
                                            data-reset="true" data-continue="0"
                                            class="btn btn-primary btn-bold formSubmitButton-byAddNew">{{ 'Save'|trans }}</button>&nbsp;
                                    <button type="reset" data-action='profileUpdate' data-shifting="false"
                                            data-reset="true" data-continue="1"
                                            class="btn btn-primary btn-bold formSubmitButton-byAddNew">{{ 'Save & Continue editing'|trans }}</button>&nbsp;
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {# Guardian Creator #}
    <div class="d-none" id="guardianCreatorDiv">
        <input type="hidden" class="LoadGuardianInDropdown" value="1">
        {% include "guardian/addGuardianBaseTemplate.html.twig" %}
    </div>


{% endblock %}

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

{% block documentation %}
    <h5><b>Add New Students/Guardian?</b></h5>
    <br/>
    <p>Students are the Most Important Entity in the School, Here we will <b>Add Students</b> as well their
    <b>Guardians</b>, if not exits or we can <b>Import Bulk Students!</b></p>
    <br>

    <h5><b>How to Import Bulk/Single Students?</b></h5>
    <br/>
    <p>At top of the Page Under the <b>Documentation Header</b> the first Box is <b>Import
    Students</b>, To Import Click on that box. A Box will expand & show the Details.
    To Import the Students you need to provide Valid <b>CSV</b> file. You can see their is button <b>Download Sample
    File</b> which will download the Sample of CSV File.
    You just need to Open that file Need to Add Student and Guardian Data in it & Upload back that file to Application.
    </p>
    <br>

    <b>Remember</b>, You've to take care of following Steps:
    <ul>
        <li>Student First and Last name should not be empty</li>
        <li>Student Email Address should not be empty or It should be valid email address or must be unique for all the
            Students
        </li>
        <li>Student Password</li>
    </ul>

    <p><b><i>Sometimes, Students are not having Email Address, at that time you can write temporary Email address e.g
            student1@fekara.com for Student One, student2@fekara.com for Student Two and so on </i></b>
    <br>
    After putting data into the CSV file, Upload the CSV file by Click on the <b>Choose File</b> & Click on the <b>Import
    Button</b> & every thing will be setup! </p>

    <br><br>
    <h5><b>How to Add Single Student?</b></h5>
    <br/>
    The Page will ask Minimal Student Detail, to add student quickly into the System. <br>
    To Add the Student you just need to enter, Student following information:
    <br>
    <ul>
        <li>Student First Name</li>
        <li>Student Last Name</li>
        <li>Student Email Address (Email address must be unique or valid Email address, if student have no email address
            then write student_anyNumber@fekara.com)
        </li>
        <li>Select the Student Gender</li>
        <li>Attach Guardian to the Student, If Student is new and this Student Guardian is not exits then click under
            the link of <b>Guardian box</b>
            <b><i>{{ 'Click here if guardian is not in the list & you want to create new guardian' | trans }}</i></b>
        </li>
    </ul>

    <b>Alert!</b> There are two buttons to save the Student information,
    <ul>
        <li>Save, This button wills simply save the Student Information.</li>
        <li>Save & Continue, will save the Student & Redirect you to other where you can add full details of student,
            eg. Classes Enrollment, Student Roles & etc.
        </li>
    </ul>
    <br>
    <h5><b>How to Attach Guardian to Student, If the Student is New and Guardian is not exits in the System?</b></h5>
    <br/>
    Click on the <b>Click here if guardian is not in the list & you want to create new guardian</b> link which is in <b>Basic
    Information</b> box & new Box will open
    <br>
    Where you can enter Guardian First Name, Last Name, Password, Email, Phone Number & Gender.
    <i><b>
            Input Name behind with the symbol asterik (*) are supposed to be filled, If you we didn't fill those fields,
            system will generate an Error & you would not be able to save Record
        </b>
    </i>


{% endblock %}