{% load i18n %}
<div class="system-setting-form">
    <form action="" id="id_systemSettingForm" class="layui-form" lay-filter="systemSettingForm" >
    {% csrf_token %}
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="height: 100px">
                    <div class="layui-row layui-col-space15" id="system_settings_id">
                        <div class="layui-col-md12" style="padding-top: 0;">
                            <div class="layui-card-body" style="height: 100px">
                                <div class="layui-card-header"><i class="fa fa-globe"></i><span style="padding-left: 5px">{% trans 'System_settings_domain_address' %}</span></div>
                                <div class="layui-card-body" style="margin: 0 0 0 10px">
                                    <div class="layui-form-item layui-col-space15">
                                        <div class="layui-inline" style="padding-left: 47px; position: relative; top: 11px">
                                            <div class="layui-inline" style="margin-right: 0px;">
                                               Domain Name/ IP: <input type="text" name="domain_address" id="domain_address">
                                            </div>
                                            <div class="layui-inline layui-word-aux">domain name/domain ip</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" >
            <div class="layui-input-block layui-inline">
                <button class="layui-btn" id="systemsubmit" lay-submit="" lay-filter="system_Submit">{% trans 'btn_submit' %}</button>
            </div>
            <div class="layui-inline" id="id_domain_clear" style="margin-top: 30px; margin-left: 10px;">
            </div>
        </div>
    </form>
</div>
<style>
    #system_settings_id {
        background: white;
        padding-bottom: 0px;
    }
    span.form_label {
        color: #333;
    }
    #systemsubmit {
        margin-top: 30px;
        margin-left: -80px;
    }
</style>
<script>
    layui.use('form', function () {
        var form = layui.form, $ = layui.jquery ;
        var maxHeight = window.innerHeight - 140;
        $('.system-setting-form').css({
            'height': maxHeight,
            'overflow-y': 'auto',
            'overflow-x':'hidden'
        });

        form.render();
        form.on('submit(system_Submit)', function(data){
            var csrf = data.field['csrfmiddlewaretoken'];
            var value = {
                sys_setting: true
                ,domain_address: data.field['domain_address']
            };
            var loadIndex = layer.load();
            const domain_address = function (val) {
                try {
                    const url = new URL(val);
                    const ipv4Regex = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
                    const ipv6Regex = /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0-1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0-1}[0-9]){0,1}[0-9]))$/;
                    const urlRegex = /^(((http|https):\/\/|)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,6}(:[0-9]{1,5})?(\/.*)?)$/;
                    const port = url.port ? parseInt(url.port) : null;
                    if (port && (port <= 0 || port > 65535)) {
                        return false;
                    }
                    if ((ipv4Regex.test(url.hostname) || ipv6Regex.test(url.hostname))) {
                        return true;
                    }
                    if (url.hostname && urlRegex.test(url.hostname)) {
                        return true;
                    }
                    return false;
                } catch (e) {
                    return false;
                }
            };
            const domainAddress = $("#domain_address");
            const domain_val = domainAddress.val();
            if (!domain_val) {
                layer.close(loadIndex);
                layer.msg('Please Enter Valid Domain Name or IP');
                return false
            } else if(domain_val && !domain_address(domain_val)) {
                layer.close(loadIndex);
                layer.msg('Invalid Domain Name or Domain IP');
                return false
            } else {
                $.ajax({
                    url: "/base/api/systemSetting/"
                    ,type: "POST"
                    ,data: {'name': 'domain_address', value: JSON.stringify(value), csrfmiddlewaretoken: csrf}
                    ,dataType: "json"
                    ,success: function(response, xhr){
                        layer.close(loadIndex);
                        layer.msg(gettext('save_successful'), {icon: 6});
                        document.getElementById('id_domain_clear').innerHTML= "<button class='layui-btn' id='id_delDomain_btn' lay-submit='' lay-filter='delDomain'>{% trans 'clear_system_settings' %}</button>"
                        layer.close(loadIndex);
                    }
                    ,error: function(xhr, error, e){
                        layer.close(loadIndex);
                        if(xhr.responseJSON.value){
                            layer.msg(gettext(xhr.responseJSON.value[0]), {icon: 5});
                        }else{
                            layer.msg(gettext('save_failed'), {icon: 5});
                        }
                    }
                });
                return false
            }
        });
        form.on('submit(delDomain)', function (data) {
            var loadIndex = layer.load();
            layer.confirm("{% trans 'are_you_sure_to_delete_the_selected_item' %}", {
                title:gettext('layer_title'),
                btn: [gettext('btn_confirm'), gettext('btn_cancel')],
            }, function (index){
                $.ajax({
                    url: "/base/api/systemSetting/delDomain/",
                    type: 'GET',
                    success: function (response, xhr) {
                        layer.msg(gettext('action_notification_successful'), {icon: 6});
                        $("form").find('input[type="text"]').each(function(){
                            $(this).val("");
                        });
                        document.getElementById('id_domain_clear').innerHTML= ""
                        layer.close(loadIndex);
                    }, error: function (xhr, error, e) {
                        layer.msg(gettext('action_notification_failed'), {icon: 5});
                        layer.close(loadIndex);
                    }
                })
            });
            layer.close(loadIndex);
            return false;
        });
        $.ajax({
            url: "/base/api/systemSetting/?name=domain_address"
            , type: "GET"
            , dataType: "json"
            , success: function (response, xhr) {
                var val = response.data[0];
                if (val) {
                    val_dict = JSON.parse(val.value);
                    form.val('systemSettingForm', val_dict);
                    document.getElementById('id_domain_clear').innerHTML= "<button class='layui-btn' id='id_delDomain_btn' lay-submit='' lay-filter='delDomain'>{% trans 'clear_system_settings' %}</button>"
                }
            }
            , error: function (xhr, error, e) {
            }
        });
    });
</script>