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

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

{% block MainContent %}
    <form method="post" id="scheduleMessage">

        {# Add invoice sections #}
        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">{{ 'Schedule Message'|trans }}</h3>
                </div>
            </div>
            <div class="kt-portlet__body">
                <div class="row">

                    {# Message Sent to #}
                    <div class="col-xl-3 col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Students'|trans }}</label>
                        <select class="form-control kt-select2 kt-selectpicker simpleSelect2" name="students[]"
                                multiple="multiple">
                            {% for student in students %}
                                <option value="{{ student.id }}">{{ student.fullname }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {# Guardians of selected student #}
                    <div class="col-xl-3 col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Guardians'|trans }} </label>
                        <small>{{ ' ( of selected students )' }}</small>
                        <div class="form-group">
                            <div class="">
                                <div class="kt-checkbox-inline">
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="guardiansOfSelectedStudent" class="form-control"/>
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Teachers of selected student #}
                    <div class="col-xl-3 col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Teachers'|trans }} </label>
                        <small>{{ ' ( of selected students )' }}</small>
                        <div class="form-group">
                            <div class="">
                                <div class="kt-checkbox-inline">
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="teachersOfSelectedStudent" class="form-control"/>
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Administator #}
                    <div class="col-xl-3 col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Adminstrators'|trans }}</label>
                        <select class="form-control kt-select2 kt-selectpicker simpleSelect2" name="administrators[]"
                                multiple="multiple">
                            {% for admin in admins %}
                                <option value="{{ admin.id }}">{{ admin.fullname }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="row">

                    {# Selected Email template #}{#
                    <div class="col-xl-4 col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Email Template'|trans }}</label>
                        <select class="form-control kt-select2 kt-selectpicker simpleSelect2" name="emailTemplate"
                                readonly="readonly">
                            {% for admin in admins %}
                                <option value="{{ admin.id }}">{{ admin.fullname }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    #}{# Selected Message template #}{#
                    <div class="col-xl-4 col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Message Template'|trans }}</label>
                        <select class="form-control kt-select2 kt-selectpicker simpleSelect2" name="messageTemplate"
                                readonly="readonly">
                            {% for admin in admins %}
                                <option value="{{ admin.id }}">{{ admin.fullname }}</option>
                            {% endfor %}
                        </select>
                    </div>#}

                    {# Schedule Message date and time picker #}
                    <div class="col-xl-3 col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Date Picker'|trans }} </label>
                        <input type="text" name="sentDate" class="form-control r__q simpleDatePicker"/>
                    </div>

                    <div class="col-xl-3  col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Time Picker'|trans }} </label>
                        <input type="text" name="sentTime" class="form-control r__q simpleTimePicker"/>
                    </div>

                    {# View attached pdf file #}
                    <div class="col-xl-3 col-lg-3 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Attached PDF File'|trans }} </label>
                        <br>
                        <input type="hidden" name="pathOfFile" value="{{ filePath }}">
                        <a target="_blank" href="{{ lastDownloadedFile }}">{{ 'Click to view' }}</a>
                    </div>

                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Subject'|trans }} </label>
                        <textarea name="appendSubject" id="" cols="30" rows="10" class="form-control"></textarea>
                    </div>

                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                        <label class="col-form-label">{{ 'Message'|trans }} </label>
                        <textarea name="appendMessage" id="" cols="30" rows="10" class="form-control"></textarea>
                    </div>


                </div>
            </div>
            <div class="kt-portlet">
                <div class="kt-portlet__foot">
                    <div class="kt-form__actions" data-formId="scheduleMessage">
                        <button type="submit" class="btn-primary btn formSubmitButton">
                            {{ 'Schedule Message' }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>


{% endblock %}

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

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