<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>
<div th:fragment="content" class="modal fade pt-4rem" id="edit-setting">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">[[#{edit_setting}]]</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editSettingForm" onsubmit="return false;">
                    <div class="form-group row">
                        <label for="editSettingName" class="col-2 col-form-label">[[#{name}]]:</label>
                        <div class="col-10">
                            <label class="col-form-label text-danger d-none" id="editSettingNameErrorLabel" for="editSettingName">
                                <i class="far fa-times-circle"></i> <span id="editSettingNameError"></span>
                            </label>
                            <input type="text" name="name" id="editSettingName"
                                   class="form-control" th:placeholder="#{name}"
                                   onkeydown="ezyadmin.onKeyDownToSaveSetting('edit')">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="editSettingDataType" class="col-2 col-form-label">
                            [[#{type}]]:
                        </label>
                        <div class="col-10">
                            <label class="col-form-label text-danger d-none" id="editSettingDataTypeErrorLabel" for="editSettingDataType">
                                <i class="far fa-times-circle"></i> <span id="editSettingDataTypeError"></span>
                            </label>
                            <select name="dataType" id="editSettingDataType" class="form-control" aria-label="Type Select"
                                    onchange="ezyadmin.onSettingValueTypeChanged(this, 'edit');">
                                <option th:each="dataType : ${dataTypes}"
                                        th:value="${dataType}">
                                    [[#{${dataType.toLowerCase()}}]]
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-0">
                        <label for="editSettingValue" class="col-2 col-form-label">[[#{value}]]:</label>
                        <div class="col-10">
                            <label class="col-form-label text-danger d-none" id="editSettingValueErrorLabel" for="editSettingValue">
                                <i class="far fa-times-circle"></i> <span id="editSettingValueError"></span>
                            </label>
                            <textarea name="value" id="editSettingValue"
                                      class="form-control" th:placeholder="#{value}" rows="3"></textarea>
                            <div class="input-group cursor-pointer d-none" id="editSettingImageGroup" onclick="ezyadmin.selectSettingMedia('edit', 'image');">
                                <input type="text" name="settingImage"
                                       id="editSettingImage" class="form-control" th:placeholder="#{select_an_image}">
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span>[[#{browse}]]</span>
                                    </div>
                                </div>
                            </div>
                            <div class="input-group cursor-pointer d-none" id="editSettingMediaGroup" onclick="ezyadmin.selectSettingMedia('edit', 'media');">
                                <input type="text" name="settingMedia"
                                       id="editSettingMedia" class="form-control" th:placeholder="#{select_a_media}">
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span>[[#{browse}]]</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mt-2">
                        <label for="editChangeLastUpdateTime" class="col-2 col-form-label">
                            [[#{include}]]:
                        </label>
                        <div class="col-10 d-flex align-items-center">
                            <input type="checkbox" name="changeLastUpdateTime" id="editChangeLastUpdateTime" class="form-check wh-1rem">
                            <span class="ml-1">[[#{last_update_time_of_this_setting}]]</span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">[[#{cancel}]]</button>
                <div class="d-flex">
                    <button type="button" class="btn btn-primary" onclick="ezyadmin.editSetting();">[[#{edit}]]</button>
                    <button type="button" class="btn btn-danger ml-2" onclick="ezyadmin.deleteSetting();">[[#{delete}]]</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<script th:fragment="scripts">
// ========== setting edit =============
ezyadmin.openSettingModal = function(settingId) {
    ezyadmin.selectedSettingId = settingId;
    var setting = ezyadmin.settingById[settingId];
    $('#editSettingName').val(setting.name);
    $('#editSettingValue').val(setting.value);
    $('#editSettingDataType').val(setting.dataType);
    $('#editSettingImage').val(setting.value);
    $('#editSettingMedia').val(setting.value);

    $('#editSettingValue').addClass('d-none');
    $('#editSettingMediaGroup').addClass('d-none');
    $('#editSettingImageGroup').addClass('d-none');
    if (setting.dataType == 'IMAGE') {
        $('#editSettingImageGroup').removeClass('d-none');
    } else if (setting.dataType == 'MEDIA') {
        $('#editSettingMediaGroup').removeClass('d-none');
    } else {
        $('#editSettingValue').removeClass('d-none');
    }
    var inputType = ezyadmin.dataTypeToInputType(setting.dataType);
    $('#editSettingValue').attr('type', inputType);
    $('#edit-setting').modal('show');
}

ezyadmin.editSetting = function() {
    ezyadmin.saveSetting('edit');
}

// ========== setting delete =============
ezyadmin.deleteSetting = function() {
    $.ajax({
        type: 'delete',
        url: '/api/v1/settings/' + ezyadmin.selectedSettingId,
        success: function () {
            delete ezyadmin.settingById[ezyadmin.selectedSettingId];
            ezyadmin.fetchSettingList('current');
            $('#edit-setting').modal('hide');
        },
        error: function (data, e) {
            $('#edit-setting').modal('hide');
        }
    });
}
</script>
</body>
</html>
