<div class="row tile">
    <div class="col-md-12 col-md-auto">
        <div class="ibox float-e-margins">
            <h3 class="ibox-title" langtag="page-add"></h3>
            <div class="ibox-content">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label font-bold" langtag="word-scheme"></label>
                        <div class="col-sm-12">
                            <span class="help-block m-b-none font-bold" langtag="word-usecase"></span>:
                            <span id="usecase">
                                <span id="casetcp" langtag="info-casetcp"></span>
                                <span id="caseudp" langtag="info-caseudp"></span>
                                <span id="casehttpProxy" langtag="info-casehttpproxy"></span>
                                <span id="casesocks5" langtag="info-casesocks5"></span>
                                <span id="casemixProxy" langtag="info-casemixproxy"></span>
                                <span id="casesecret" langtag="info-casesecret"></span>
                                <span id="casep2p" langtag="info-casep2p"></span>
                                <span id="casefile" langtag="info-casefile"></span>
                            </span>
                            <select class="form-control selectpicker" id="type" name="type">
                                <option value="tcp" langtag="scheme-tcp"></option>
                                <option value="udp" langtag="scheme-udp"></option>
                                <option value="mixProxy" langtag="scheme-mixProxy"></option>
                                {{/*<option value="httpProxy" langtag="scheme-httpProxy"></option>*/}}
                                {{/*<option value="socks5" langtag="scheme-socks5"></option>*/}}
                                <option value="secret" langtag="scheme-secret"></option>
                                <option value="p2p" langtag="scheme-p2p"></option>
                                {{/*<option value="file" langtag="scheme-file"></option>*/}}
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="client_id">
                        <label class="control-label font-bold" langtag="word-clientid"></label>
                        <div class="col-sm-12">
                            <select class="form-control" name="client_id" data-live-search="true"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label font-bold" langtag="word-remark"></label>
                        <div class="col-sm-12">
                            <input class="form-control" langtag="info-unrestricted" name="remark" placeholder="" type="text">
                        </div>
                    </div>
                    {{if eq true .allow_multi_ip}}
                    <div class="form-group" id="server_ip">
                        <label class="control-label font-bold" langtag="word-serverip"></label>
                        <div class="col-sm-12">
                            <input class="form-control" langtag="info-suchasip" name="server_ip" placeholder="" type="text" value="0.0.0.0">
                        </div>
                    </div>
                    {{end}}
                    <div class="form-group" id="port">
                        <label class="control-label font-bold" langtag="word-serverport"></label>
                        <div class="col-sm-12">
                            <input class="form-control" langtag="info-suchasport" name="port" placeholder="" type="text">
                        </div>
                    </div>
                    <div class="form-group" id="mix_proxy">
                        <label class="control-label font-bold" langtag="scheme-mixproxy"></label>
                        <div class="col-sm-12">
						    <input name="enable_http" type="checkbox" value="1" checked>
                            <span class="help-block m-b-none" langtag="word-enablehttpproxy"></span>
                        </div>
                        <div class="col-sm-12">
						    <input name="enable_socks5" type="checkbox" value="1" checked>
                            <span class="help-block m-b-none" langtag="word-enablesocks5proxy"></span>
                        </div>
                    </div>
                    <div class="form-group" id="dest_acl_mode">
                        <label class="control-label font-bold" langtag="word-destacl"></label>
                        <div class="col-sm-12">
                            <select class="form-control selectpicker" name="dest_acl_mode">
                                <option langtag="word-disable" value="0"></option>
                                <option langtag="word-whitelist" value="1"></option>
                                <option langtag="word-blacklist" value="2"></option>
                            </select>
                            <span class="help-block m-b-none" langtag="info-destacl"></span>
                        </div>
                    </div>
                    <div class="form-group" id="dest_acl_rules">
                        <label class="control-label font-bold" langtag="word-destaclrules"></label>
                        <div class="col-sm-12">
                            <textarea class="form-control" name="dest_acl_rules" rows="5" placeholder=""></textarea>
                            <span class="help-block m-b-none" langtag="info-destaclrules"></span>
                        </div>
                    </div>
                    {{if eq true .allow_flow_limit}}
                    <div class="form-group" id="flow_limit">
                        <label class="control-label font-bold" langtag="word-flowlimit"></label>
                        <div class="col-sm-12">
                            <input class="form-control" langtag="info-unrestricted" name="flow_limit" placeholder="" type="text">
                            <span class="help-block m-b-none" langtag="word-unit"></span>: M
                        </div>
                    </div>
                    {{end}}
                    {{if eq true .allow_time_limit}}
                    <div class="form-group" id="time_limit">
                        <label class="control-label font-bold" langtag="word-timelimit"></label>
                        <div class="col-sm-12">
                            <input class="form-control" id="time_limit_input" langtag="info-unrestricted" name="time_limit" placeholder="" type="datetime-local">
                            <span class="help-block m-b-none" langtag="info-timelimit"></span>
                        </div>
                    </div>
                    {{end}}
                    <div class="form-group" id="proxy_protocol">
                        <label class="control-label font-bold" langtag="word-proxyprotocol"></label>
                        <div class="col-sm-12">
                            <select class="form-control selectpicker" name="proxy_protocol">
                                <option langtag="word-disable" value="0"></option>
                                <option langtag="word-proxyprotocolv1" value="1"></option>
                                <option langtag="word-proxyprotocolv2" value="2"></option>
                            </select>
                        </div>
                    </div>
                    {{if and .allow_local_proxy (or .isAdmin .allow_user_local)}}
                    <div class="form-group" id="local_proxy">
                        <label class="control-label font-bold" langtag="word-proxytolocal"></label>
                        <div class="col-sm-12">
                            <select class="form-control" name="local_proxy">
                                <option langtag="word-no" value="0"></option>
                                <option langtag="word-yes" value="1"></option>
                            </select>
                        </div>
                    </div>
                    {{end}}
                    <div class="form-group" id="auth">
                        <label class="control-label font-bold" langtag="word-auth"></label>
                        <div class="col-sm-12">
                            <textarea class="form-control" langtag="info-suchasauth" name="auth" placeholder="" rows="4"></textarea>
                            <span class="help-block m-b-none" langtag="info-targetauth"></span>
                        </div>
                    </div>
                    <div class="form-group" id="target_type">
                        <label class="control-label font-bold" langtag="word-targettype"></label>
                        <div class="col-sm-12">
                            <select class="form-control selectpicker" name="target_type">
                                <option value="all">ALL</option>
                                <option value="tcp">TCP</option>
                                <option value="udp">UDP</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="target">
                        <label class="control-label font-bold" langtag="word-target"></label>
                        <div class="col-sm-12">
                            <textarea class="form-control" langtag="info-suchasiplist" name="target" placeholder="" rows="4"></textarea>
                            <span class="help-block m-b-none" langtag="info-targettunnel"></span>
                        </div>
                    </div>
                    <div class="form-group" id="local_path">
                        <label class="control-label font-bold" langtag="word-localpath"></label>
                        <div class="col-sm-12">
                            <input class="form-control" langtag="info-suchaslocalpath" name="local_path" placeholder="" type="text">
                        </div>
                    </div>
                    <div class="form-group" id="strip_pre">
                        <label class="control-label font-bold" langtag="word-stripprefix"></label>
                        <div class="col-sm-12">
                            <input class="form-control" langtag="info-suchasstripprefix" name="strip_pre" placeholder="" type="text">
                        </div>
                    </div>
                    <div class="form-group" id="password">
                        <label class="control-label font-bold" langtag="word-identificationkey"></label>
                        <div class="col-sm-12">
                            <input class="form-control" langtag="word-identificationkey" name="password" placeholder="" type="text">
                            <span class="help-block m-b-none" langtag="info-identificationkey"></span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-lg-12 col-sm-offset-2">
                            <button class="btn btn-secondary" onclick="goback()" type="button">
                                <i class="fa fa-fw fa-lg fa-window-close"></i> <span langtag="word-cancel"></span>
                            </button>
                            <button class="btn btn-success" onclick="submitform('add', '{{.web_base_url}}/index/add', $('form').serializeArray())" type="button">
                                <i class="fa fa-fw fa-lg fa-check-circle"></i> <span langtag="word-add"></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    var arr = []
    arr["all"] = ["auth", "port", "target", "password", "flow_reset", "flow_limit", "time_limit", "mix_proxy", "local_path", "strip_pre", "proxy_protocol", "local_proxy", "client_id", "server_ip"]
    arr["tcp"] = ["port", "target", "proxy_protocol", "local_proxy", "client_id", "server_ip", "flow_reset", "flow_limit", "time_limit"]
    arr["udp"] = ["port", "target", "proxy_protocol", "local_proxy", "client_id", "server_ip", "flow_reset", "flow_limit", "time_limit"]
    arr["mixProxy"] = ["auth", "port", "client_id", "server_ip", "mix_proxy", "dest_acl_mode", "dest_acl_rules", "flow_reset", "flow_limit", "time_limit"]
    //arr["socks5"] = ["auth", "port", "client_id", "server_ip", "flow_reset", "flow_limit", "time_limit"]
    //arr["httpProxy"] = ["auth", "port", "client_id", "server_ip", "flow_reset", "flow_limit", "time_limit"]
    arr["secret"] = ["target_type", "target", "password", "client_id", "server_ip", "flow_reset", "flow_limit", "time_limit", "local_proxy"]
    arr["p2p"] = ["target_type", "target", "password", "client_id", "server_ip", "flow_reset", "flow_limit", "time_limit", "local_proxy"]
    arr["file"] = ["port", "local_path", "strip_pre", "client_id", "server_ip", "flow_reset", "flow_limit", "time_limit"]

    function resetForm() {
        $(".form-group[id]").css("display", "none");
        $("#usecase span").css("display", "none");
        o = $("#type").val();
        $('#case' + o).css("display", "inline")
        for (var i = 0; i < arr[o].length; i++) {
            $("#" + arr[o][i]).css("display", "block")
        }
        toggleDestAclRules()
    }

    function toggleDestAclRules() {
        if ($("#type").val() != "mixProxy") {
            $("#dest_acl_rules").css("display", "none")
            return
        }
        var modeVal = $("select[name='dest_acl_mode']").val()
        var mode = parseInt(modeVal ? modeVal : "0", 10)
        $("#dest_acl_rules").css("display", mode === 0 ? "none" : "block")
    }

    $(function () {
        $("#type").val(('{{.type}}' == '') ? 'tcp' : '{{.type}}');
        resetForm()
        $("#type").on("change", function () {
            resetForm()
        })
        $("select[name='dest_acl_mode']").on("change", function () {
            toggleDestAclRules()
        })
        $("#use_client").on("change", function () {
            resetForm()
        })
    });

    function getClientList() {
        const clientId = "{{if .t.Client.Id}}{{.t.Client.Id}}{{else}}{{.client_id}}{{end}}"; // 根据优先级选择
        $("select[name='client_id']").selectpicker({
            liveSearch: true,
            source: {
                data: function (callback, page) {
                    $.ajax({
                        method: 'POST',
                        url: "{{.web_base_url}}/client/list",
                        dataType: 'json',
                        data: { order: "asc", offset: 0, limit: 0 },
                        success: function(response) {
                            // 转换数据格式（必须包含 `value` 和 `text`）
                            const results = $.map(response.rows, function(item) {
                                let displayText = item.Remark ? item.Id + ' · ' + item.Remark : item.Id.toString();
                                return {
                                    value: item.Id,     // 选项的 value
                                    text: displayText,  // 选项的显示文本
                                    selected: item.Id == clientId // 默认选中
                                };
                            });
                            callback(results); // 返回给 selectpicker
                        },
                        error: function() {
                            callback([]); // 出错时返回空数组
                        }
                    });
                },
                search: function (callback, page, searchTerm) {
                    let data = { search: searchTerm, order: "asc", offset: 0, limit: 0 };
                    $.ajax({
                        method: 'POST',
                        url: "{{.web_base_url}}/client/list",
                        data: data,
                        dataType: 'json',
                        success: function(response) {
                            // 转换数据格式（必须包含 `value` 和 `text`）
                            const results = $.map(response.rows, function(item) {
                                let displayText = item.Remark ? item.Id + ' · ' + item.Remark : item.Id.toString();
                                return {
                                    value: item.Id,    // 选项的 value
                                    text: displayText, // 选项的显示文本
                                    selected: item.Id == clientId // 默认选中
                                };
                            });
                            callback(results); // 返回给 selectpicker
                        },
                        error: function() {
                            callback([]); // 出错时返回空数组
                        }
                    });
                }
            }
        });
    }

    function internationalized(current) {
        $.fn.selectpicker.defaults = {
            noneSelectedText: languages['content']['bootstrap-select']['noneSelectedText'][current],
            noneResultsText: languages['content']['bootstrap-select']['noneResultsText'][current]
        };
        getClientList();
    }
</script>
