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

{% block title %}System settings{% endblock %}

{% form_theme settingsForm with ['bootstrap_4_layout.html.twig', _self] %}

{% block body %}

    <h4 class="c-grey-900 mT-10 mB-30">System Settings</h4>
    <div class="row">
        <div class="col-md-12">
            <div class="masonry-item  w-100">

                <div class="row gap-20">

                    {# { form_start(settingsForm, {'attr': {'class': 'form-inline'}}) } #}

                    <div class="col-md-6">
                        <div class="bgc-white p-20 bd">
                            <h6 class="c-grey-900"><i class="fa fa-server"></i> Server</h6>
                            <hr class="mB-20">

                                {{ form_start(settingsForm) }}
                                    {{ form_label(settingsForm.serverIpAddress) }}
                                    {{ form_widget(settingsForm.serverIpAddress) }}

                        </div>

                        <div class="bgc-white p-20 bd" style="margin-top: 20px;">
                            <h6 class="c-grey-900"><i class="fa fa-envelope"></i> Notifications</h6>
                            <hr class="mB-20">

                            <div class="form-group">
                                {{ form_label(settingsForm.enableEmailNotifications) }}
                                {{ form_widget(settingsForm.enableEmailNotifications) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(settingsForm.enableEmailNotificationToAddress) }}
                                {{ form_widget(settingsForm.enableEmailNotificationToAddress) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(settingsForm.notificationEmail) }}
                                {{ form_widget(settingsForm.notificationEmail) }}
                            </div>
                        </div>

                        <div class="bgc-white p-20 bd" style="margin-top: 20px;">
                            <h6 class="c-grey-900"><i class="fa fa-table"></i> Device Table Columns</h6>
                            <hr class="mB-20">

                            {{ form_label(settingsForm.deviceTableColumns) }}
                            {{ form_widget(settingsForm.deviceTableColumns) }}
                            <p style="font-size: smaller;">You can change order by simply dragging the column name. On the right side there is a clear button when there
                                is no columns selected default set is used.</p>

                        </div>

                        {% if(settingsForm.config is defined) %}
                        <div class="bgc-white p-20 bd" style="margin-top: 20px;">
                            <h6 class="c-grey-900"><i class="fa fa-server"></i> {{ productName }} System Configuration</h6>
                            <hr class="mB-20">
                            {% for row in nonWritableConfigData %}
                                <div class="form-group row">
                                    <div class="col-sm-4">
                                        {{ row.label }}
                                    </div>
                                    <div class="col-sm-8">
                                        <small class="form-text text-muted">{{ row.description }}.<br>The value is: <b>{{ row.actualValue }}</b>.</small>
                                    </div>
                                </div>
                                <hr>
                            {% endfor %}
                            {% for row in settingsForm.config %}
                                {% if loop.index is odd%}
                                <div class="form-group row">
                                {% endif %}
                                    <div class="col-sm-{% if loop.index is odd%}4{% else %}8{% endif %}">
                                        {{ form_label(row) }}
                                        {{ form_widget(row) }}
                                        {{ form_help(row) }}
                                    </div>
                                    {% if loop.index is even%}
                                </div>
                                {% endif %}
                                {% if not loop.last %}<hr>{% endif %}
                            {% endfor %}

                        </div>
                        {% endif %}

                    </div>

                    <div class="col-md-6">
                        <div class="bgc-white p-20 bd">
                            <h6 class="c-grey-900"><i class="fa fa-envelope"></i> Smtp server</h6>
                            <hr class="mB-20">
                            <div class="form-group">
                                {{ form_label(settingsForm.smtpServer) }}
                                {{ form_widget(settingsForm.smtpServer) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(settingsForm.smtpPort) }}
                                {{ form_widget(settingsForm.smtpPort, {'type': 'number'}) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(settingsForm.smtpSecurity) }}
                                {{ form_widget(settingsForm.smtpSecurity) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(settingsForm.smtpLogin) }}
                                {{ form_widget(settingsForm.smtpLogin) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(settingsForm.smtpPassword) }}
                                {{ form_widget(settingsForm.smtpPassword) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(settingsForm.senderEmail) }}
                                {{ form_widget(settingsForm.senderEmail) }}
                            </div>
                            {% if(settingsForm.sendEmailTestNotification is defined) %}
                                {{ form_widget(settingsForm.sendEmailTestNotification) }}
                            {% endif %}
                        </div>

                        <div class="bgc-white p-20 bd" style="margin-top: 20px;">
                            <h6 class="c-grey-900"><i class="fa fa-envelope"></i> Slack server</h6>
                            <hr class="mB-20">
                            <div class="form-group">
                                {{ form_label(settingsForm.slackToken) }}
                                {{ form_widget(settingsForm.slackToken) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(settingsForm.slackChannel) }}
                                {{ form_widget(settingsForm.slackChannel) }}
                            </div>
                            {% if(settingsForm.sendSlackTestNotification is defined) %}
                                {{ form_widget(settingsForm.sendSlackTestNotification) }}
                            {% endif %}
                        </div>

                    </div>

                    {{ form_end(settingsForm) }}

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

{% endblock body %}

{% block javascripts %}

    {{ parent() }}

    <script>

        let routeSetDeviceTableColumns = "{{ path('ajax_settings_device_table_columns') }}";

        $(document).ready(function () {

            {% for itemName in configNames %}

                {% if not ('enabled' in itemName) %}
                    nameId{{ loop.index }} = 'settings_config_{{ itemName }}'
                    checkUserDefined(nameId{{ loop.index }});
                    $("#"+nameId{{ loop.index }}+"_enabled").click(function(){
                        checkUserDefined(nameId{{ loop.index }})
                });
            {% endif %}

            {% endfor %}

            function checkUserDefined(nameId){

                if ($('#'+nameId+'_enabled').is(':checked')) {
                    if($("#"+nameId).attr('type') === 'number') {
                        $("#" + nameId).removeAttr('readonly');
                    }
                    if($("#"+nameId).attr('type') === 'checkbox') {
                        $("#" + nameId).removeAttr('disabled');
                    }
                }else {
                    if($("#"+nameId).attr('type') === 'number'){
                        $("#"+nameId).attr("readonly", !this.checked);
                    }
                    if($("#"+nameId).attr('type') === 'checkbox'){
                        $("#"+nameId).attr("disabled", 'disabled');
                    }
                }

            }

            $('#settings_deviceTableColumns').selectize({
                plugins: ['remove_button', 'drag_drop', 'clear_button'],
                //valueField: 'id',
                create: true,
                preload: true,
                onChange: function(value) {
                    updateTableColumns(value);
                }
            });

            function updateTableColumns(value) {
                console.log(value);
                $.ajax({
                    method: "POST",
                    url: routeSetDeviceTableColumns,
                    data: {'columns': value},
                    success: function (result) {

                        if (result.success.length != 0) {
                            let toastOptions = {
                                title: "Success",
                                message: result.message,
                                status: 1, //'SUCCESS',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }
                    }
                });
            }

        })

    </script>

{% endblock %}