{{ template "page/head_start" .}}
<!-- <link rel="stylesheet" href="{{ .base_path }}assets/jquery/jquery.modal.min.css" /> -->
<link rel="stylesheet" href="{{ .base_path }}assets/bootstrap/bootstrap.min.css">
{{ template "page/head_end" .}} {{ template
"page/body_start" .}}
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' settings-page'">
    <a-sidebar></a-sidebar>
    <a-layout id="content-layout">
        <a-layout-content>
            <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
                <transition name="list" appear>
                    <a-alert type="error" v-if="confAlerts.length>0 && loadingStates.fetched"
                        :style="{ marginBottom: '10px' }" message='{{ i18n "secAlertTitle" }}' color="red" show-icon
                        slot="description">
                        <b>{{ i18n "secAlertConf" }}</b>
                        <ul>
                            <li v-for="a in confAlerts">[[ a ]]</li>
                        </ul>
                        </template>
                    </a-alert>
                </transition>
                <transition name="list" appear>
                    <template>
                        <div class="row" v-cloak>
                            <div class="col-md-12">
                                <div class="card-header">
                                    <h3 class="card-title">Server Management</h3>
                                    <div class="card-tools">
                                        <button class="btn btn-primary" @click="showAddModal">Add Server</button>
                                    </div>
                                    <div class="card-tools">
                                        <template #extra>
                                            <a-button-group>
                                                <a-button icon="sync" @click="manualRefresh"
                                                    :loading="refreshing"></a-button>
                                                <a-popover placement="bottomRight" trigger="click"
                                                    :overlay-class-name="themeSwitcher.currentTheme">
                                                    <template #title>
                                                        <div class="ant-custom-popover-title">
                                                            <a-switch v-model="isRefreshEnabled" @change="toggleRefresh"
                                                                size="small"></a-switch>
                                                            <span>{{ i18n "pages.inbounds.autoRefresh" }}</span>
                                                        </div>
                                                    </template>
                                                    <template #content>
                                                        <a-space direction="vertical">
                                                            <span>{{ i18n "pages.inbounds.autoRefreshInterval" }}</span>
                                                            <a-select v-model="refreshInterval"
                                                                :disabled="!isRefreshEnabled" :style="{ width: '100%' }"
                                                                @change="changeRefreshInterval"
                                                                :dropdown-class-name="themeSwitcher.currentTheme">
                                                                <a-select-option v-for="key in [5,10,30,60]"
                                                                    :value="key*1000">[[ key ]]s</a-select-option>
                                                            </a-select>
                                                        </a-space>
                                                    </template>
                                                    <a-button icon="down"></a-button>
                                                </a-popover>
                                            </a-button-group>
                                        </template>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Name</th>
                                                <th>Address</th>
                                                <th>Port</th>
                                                <th>Status</th>
                                                <th>Enabled</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template v-if="servers.length>0">
                                                <tr v-for="(server, index) in servers">
                                                    <td>[[ index + 1 ]]</td>
                                                    <td>[[ server.name ]]</td>
                                                    <td>[[ server.address ]]</td>
                                                    <td>[[ server.port ]]</td>
                                                    <td>
                                                        <a-col :sm="12" :md="5">
                                                            <a-custom-statistic
                                                                title='{{ i18n "pages.inbounds.onlineClients" }}'
                                                                :value="onlineClients.length"
                                                                :style="{ marginTop: isMobile ? '10px' : 0 }">
                                                                <template #prefix>
                                                                    <a-icon type="team"></a-icon>
                                                                </template>
                                                                <template #suffix>
                                                                    <a-popover title='{{ i18n "online" }}'
                                                                        :overlay-class-name="themeSwitcher.currentTheme">
                                                                        <template slot="content">
                                                                            <div v-for="clientEmail in onlineClients">
                                                                                <span>[[ clientEmail ]]</span>
                                                                            </div>
                                                                        </template>
                                                                        <a-tag color="blue"
                                                                            v-if="onlineClients.length">[[
                                                                            onlineClients.length ]]</a-tag>
                                                                    </a-popover>
                                                                </template>
                                                            </a-custom-statistic>
                                                        </a-col>
                                                    </td>
                                                    <td><span v-if="server.enable"
                                                            class="badge bg-success">Yes</span><span v-else
                                                            class="badge bg-danger">No</span>
                                                    </td>
                                                    <td><button class="btn btn-info btn-sm"
                                                            @click="showEditModal(server)">Edit</button>
                                                            <button class="btn btn-danger btn-sm"
                                                            @click="deleteServer(server.id)">Delete</button>
                                                        <button class="btn btn-sm btn-secondary"
                                                        @click="syncServer(server)">Sync</button></td>
                                                </tr>
                                            </template>
                                            <tr v-else>
                                                <td colspan="6" class="text-center">No servers found</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>


                    </template>
                </transition>
                <transition>
                    <template>
                        <!-- Add/Edit Modal -->
                        <div class="modal fade" data-backdrop="false" id="serverModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">[[ modal.title ]]</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <label>Name</label>
                                                <input type="text" class="form-control" v-model="modal.server.name" />
                                            </div>
                                            <div class="form-group">
                                                <label>Address (IP or Domain)</label>
                                                <input type="text" class="form-control"
                                                    v-model="modal.server.address" />
                                            </div>
                                            <div class="form-group">
                                                <label>Port</label>
                                                <input type="number" class="form-control"
                                                    v-model.number="modal.server.port" />
                                            </div>
                                            <!-- secert web path -->
                                            <div class="form-group">
                                                <label>Secret Web Path</label>
                                                <input type="text" class="form-control"
                                                    v-model="modal.server.secretWebPath" />
                                            </div>
                                            <div class="form-group">
                                                <label>API Key</label>
                                                <input type="text" class="form-control" v-model="modal.server.apiKey" />
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input"
                                                    v-model="modal.server.enable" />
                                                <label class="form-check-label">Enabled</label>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                            Close
                                        </button>
                                        <button type="button" class="btn btn-primary" @click="saveServer">
                                            Save
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </transition>

            </a-spin>

        </a-layout-content>

    </a-layout>
</a-layout>


{{template "page/body_scripts" .}} {{template "component/aSidebar" .}}
{{template "component/aThemeSwitch" .}}
<!-- <script src="{{ .base_path }}assets/jquery/jquery.min.js"></script> -->
<!--<script src="{{ .base_path }}assets/jquery/jquery.modal.min.js"></script> -->

<script src="{{ .base_path }}assets/bootstrap/bootstrap.min.js"></script>

<script>
    const app = new Vue({
        delimiters: ["[[", "]]"],
        mixins: [MediaQueryMixin],
        el: "#app",
        data: {
            themeSwitcher,
            onlineClients: [],
            isRefreshEnabled: localStorage.getItem("isRefreshEnabled") === "true" ? true : false,
            refreshing: false,
            refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
            loadingStates: {
                fetched: false,
                spinning: false,
            },
            servers: [],
            modal: {
                title: "",
                server: {
                    name: "",
                    address: "",
                    port: 0,
                    secretWebPath: "",
                    apiKey: "",
                    enable: true,
                },
            },
        },
        methods: {
            loadServers() {
                axios.get('/panel/api/servers/list')
                    .then(response => {
                        this.servers = response.data.obj;
                        this.servers = this.servers.map(s => {
                            s.status = 'Checking...';
                            return s;
                        });
                        if (this.servers.length == 0) {

                        }
                        this.getOnlineUsers();
                    })
                    .catch(error => {
                        alert(error);
                    });
            },
            async manualRefresh() {
                await this.getOnlineUsers();
            },

            async getOnlineUsers() {
                const msg = await HttpUtil.get('/panel/api/servers/onlines');
                if (!msg.success) {
                    return;
                }
                this.onlineClients = msg.obj != null ? msg.obj : [];
            },
            toggleRefresh() {
                localStorage.setItem("isRefreshEnabled", this.isRefreshEnabled);
                if (this.isRefreshEnabled) {
                    this.startDataRefreshLoop();
                }
            },
            changeRefreshInterval() {
                localStorage.setItem("refreshInterval", this.refreshInterval);
            },
            showAddModal() {
                this.modal.title = "Add Server";
                this.modal.server = {
                    name: "",
                    address: "",
                    port: 0,
                    secretWebPath: "",
                    apiKey: "",
                    enable: true,
                };

                const modalEl = document.getElementById('serverModal');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            },
            showEditModal(server) {
                this.modal.title = "Edit Server";
                this.modal.server = Object.assign({}, server);

                const modalEl = document.getElementById('serverModal');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            },
            async startDataRefreshLoop() {
                while (this.isRefreshEnabled) {
                    try {
                        await this.getOnlineUsers();
                    } catch (e) {
                        console.error(e);
                    }
                    await PromiseUtil.sleep(this.refreshInterval);
                }
            },
            saveServer() {
                let url = "/panel/api/servers/add";
                if (this.modal.server.id) {
                    url = `/panel/api/servers/update/${this.modal.server.id}`;
                }
                let secretWebPath = this.modal.server.secretWebPath;
                if (!secretWebPath.startsWith('/')) {
                    secretWebPath = '/' + secretWebPath;
                }
                if (!secretWebPath.endsWith('/')) {
                    secretWebPath = secretWebPath + '/';
                }
                this.modal.server.secretWebPath = secretWebPath;
                console.log(this.modal.server)
                axios
                    .post(url, this.modal.server)
                    .then((response) => {
                        alert(response.data.msg);

                        const modalEl = document.getElementById('serverModal');
                        const modal = bootstrap.Modal.getInstance(modalEl);
                        modal.hide();

                        this.loadServers();
                    })
                    .catch((error) => {
                        alert(error.response.data.msg);
                    });
            },
            syncServer(server) {
                if (!confirm("Are you sure you want to sync inbounds with server \"" + server.name + "\" server?")) {
                    return;
                }
                axios
                    .post(`/panel/api/servers/sync/${server.id}`)
                    .then((response) => {
                        alert(response.data.msg);
                    })
                    .catch((error) => {
                        alert(error.response.data.msg);
                    });
            },
            deleteServer(id) {
                if (!confirm("Are you sure you want to delete this server?")) {
                    return;
                }
                axios
                    .post(`/panel/api/servers/del/${id}`)
                    .then((response) => {
                        alert(response.data.msg);
                        this.loadServers();
                    })
                    .catch((error) => {
                        alert(error.response.data.msg);
                    });
            },
        },
        computed: {
            confAlerts: {
                get: function () {
                    if (!this.allSetting) return [];
                    var alerts = [];
                    if (window.location.protocol !== "https:")
                        alerts.push('{{ i18n "secAlertSSL" }}');
                    if (this.allSetting.webPort === 2053)
                        alerts.push('{{ i18n "secAlertPanelPort" }}');
                    panelPath = window.location.pathname.split("/").length < 4;
                    if (panelPath && this.allSetting.webBasePath == "/")
                        alerts.push('{{ i18n "secAlertPanelURI" }}');
                    if (this.allSetting.subEnable) {
                        subPath =
                            this.allSetting.subURI.length > 0
                                ? new URL(this.allSetting.subURI).pathname
                                : this.allSetting.subPath;
                        if (subPath == "/sub/")
                            alerts.push('{{ i18n "secAlertSubURI" }}');
                    }
                    if (this.allSetting.subJsonEnable) {
                        subJsonPath =
                            this.allSetting.subJsonURI.length > 0
                                ? new URL(this.allSetting.subJsonURI).pathname
                                : this.allSetting.subJsonPath;
                        if (subJsonPath == "/json/")
                            alerts.push('{{ i18n "secAlertSubJsonURI" }}');
                    }
                    return alerts;
                },
            },
        },

        mounted() {
            this.loadServers();
            //if (this.isRefreshEnabled) {
            //    this.startDataRefreshLoop();
            //}
            //else {
            //    this.getOnlineUsers();
            //}
        },
    });
</script>
{{ template "page/body_end" .}}