<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header(#{firewallRule.add.title})" />
    <style>
        .notice-alert {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .notice-alert i {
            color: #f0ad4e;
            margin-right: 8px;
        }
        .notice-alert strong {
            color: #856404;
        }
        .notice-list {
            margin: 5px 0 0 0;
            padding-left: 25px;
            color: #856404;
        }
        .notice-list li {
            margin: 3px 0;
        }
        /* 隐藏字段时的过渡效果 */
        .form-group-hidden {
            display: none;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <!-- 提示信息区域 -->
    <div class="notice-alert">
        <i class="fa fa-exclamation-triangle"></i>
        <strong th:text="#{firewallRule.notice.title}">：</strong>
        <ul class="notice-list">
            <li th:text="#{firewallRule.notice.freeswitch}"></li>
            <li th:text="#{firewallRule.notice.ssh}"></li>
        </ul>
    </div>

    <form class="form-horizontal m" id="form-firewall-add" th:object="${firewallRule}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{firewallRule.form.protocol}"></label>
                <div class="col-sm-8">
                    <select name="protocol" id="protocol" th:field="*{protocol}" class="form-control" required>
                        <option value="udp" th:text="#{firewallRule.protocol.udp}"></option>
                        <option value="tcp" th:text="#{firewallRule.protocol.tcp}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{firewallRule.form.portStart}"></label>
                <div class="col-sm-8">
                    <input name="portStart" id="portStart" th:field="*{portStart}" class="form-control" type="number" min="1" max="65535" step="1" th:attr="placeholder=#{firewallRule.placeholder.portStart}" required>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{firewallRule.form.portEnd}"></label>
                <div class="col-sm-8">
                    <input name="portEnd" id="portEnd" th:field="*{portEnd}" class="form-control" type="number" min="1" max="65535" step="1" th:attr="placeholder=#{firewallRule.placeholder.portEnd}" required>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required" th:text="#{firewallRule.form.enableFromSource}"></label>
                <div class="col-sm-8">
                    <label class="radio-box">
                        <input type="radio" name="enableFromSource" id="enableFromSourceYes" value="true" th:field="*{enableFromSource}" required>
                        <span th:text="#{firewallRule.boolean.yes}"></span>
                    </label>
                    <label class="radio-box">
                        <input type="radio" name="enableFromSource" id="enableFromSourceNo" value="false" th:field="*{enableFromSource}" required>
                        <span th:text="#{firewallRule.boolean.no}"></span>
                    </label>
                </div>
            </div>
        </div>
        <!-- fromSource 字段容器，初始状态根据 enableFromSource 值决定 -->
        <div class="col-xs-12" id="fromSourceContainer" th:classappend="*{enableFromSource} != true ? 'form-group-hidden' : ''">
            <div class="form-group">
                <label class="col-sm-3 control-label" th:classappend="*{enableFromSource} == true ? 'is-required' : ''" th:text="#{firewallRule.form.fromSource}"></label>
                <div class="col-sm-8">
                    <input name="fromSource" id="fromSource" th:field="*{fromSource}" class="form-control" type="text"
                           th:attr="placeholder=#{firewallRule.placeholder.fromSource}"
                           th:required="*{enableFromSource} == true">
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "system/firewalld";

    // 切换 fromSource 字段的显示/隐藏和必填状态
    function toggleFromSource() {
        var isEnabled = $('input[name="enableFromSource"]:checked').val() === 'true';
        var $container = $('#fromSourceContainer');
        var $input = $('#fromSource');
        var $label = $container.find('label.control-label');

        if (isEnabled) {
            // 显示并设为必填
            $container.removeClass('form-group-hidden');
            $input.prop('required', true);
            $label.addClass('is-required');
        } else {
            // 隐藏并设为非必填，清空值
            $container.addClass('form-group-hidden');
            $input.prop('required', false);
            $label.removeClass('is-required');
            $input.val(''); // 清空输入值
        }
    }

    // 页面加载时初始化
    $(function() {
        // 绑定单选按钮变化事件
        $('input[name="enableFromSource"]').on('change', toggleFromSource);

        // 初始化状态
        toggleFromSource();
    });

    // 添加自定义验证规则
    $.validator.addMethod("integer", function(value, element) {
        return this.optional(element) || /^\d+$/.test(value);
    }, [[#{firewallRule.validation.integer}]]);

    $.validator.addMethod("portRange", function(value, element) {
        var portStart = parseInt($("#portStart").val(), 10);
        var portEnd = parseInt($("#portEnd").val(), 10);
        if (isNaN(portStart) || isNaN(portEnd)) {
            return true;
        }
        return portStart <= portEnd;
    }, [[#{firewallRule.validation.portRange}]]);

    $("#form-firewall-add").validate({
        focusCleanup: true,
        rules: {
            portStart: {
                required: true,
                integer: true,
                range: [1, 65535],
                portRange: true
            },
            portEnd: {
                required: true,
                integer: true,
                range: [1, 65535],
                portRange: true
            },
            fromSource: {
                required: function() {
                    return $('input[name="enableFromSource"]:checked').val() === 'true';
                }
            }
        },
        messages: {
            portStart: {
                required: [[#{firewallRule.validation.portStart.required}]],
                range: [[#{firewallRule.validation.port.range}]]
            },
            portEnd: {
                required: [[#{firewallRule.validation.portEnd.required}]],
                range: [[#{firewallRule.validation.port.range}]]
            },
            fromSource: {
                required: [[#{firewallRule.placeholder.fromSource}]]
            }
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-firewall-add').serialize());
        }
    }
</script>
</body>
</html>