{% extends 'base.html' %}

{% block title %}Settings{% endblock %}

{% block content %}
<div class='content-header'>
    <div class='container-fluid'>
        <div class='row mb-2'>
            <div class='col-sm-6'>
                <h1 class='m-0'>Settings</h1>
            </div>
        </div>
    </div>
</div>

<div class='content'>
    <div class='container-fluid'>
        <div class='row'>
            <div class='col-lg-12'>
                <div class='card card-primary card-outline card-tabs'>
                    <div class='card-header p-0 pt-1 border-bottom-0'>
                        <ul class='nav nav-pills' id='custom-tabs-three-tab' role='tablist'
                            style="margin-left: 20px; margin-top: 10px;">
                            <li class='nav-item'>
                                <a class='nav-link active' id='subs-tab' data-toggle='pill' href='#subs' role='tab'
                                    aria-controls='subs' aria-selected='false'><i class="fas fa-link"></i>
                                    Subscriptions</a>
                            </li>
                            <li class='nav-item'>
                                <a class='nav-link' id='telegram-tab' data-toggle='pill' href='#telegram' role='tab'
                                    aria-controls='telegram' aria-selected='true'><i class="fab fa-telegram"></i>
                                    Telegram
                                    Bot</a>
                            </li>
                            <li class='nav-item'>
                                <a class='nav-link' id='port-tab' data-toggle='pill' href='#port' role='tab'
                                    aria-controls='port' aria-selected='false'><i class="fas fa-server"></i> Change
                                    Port</a>
                            </li>
                            <li class='nav-item'>
                                <a class='nav-link' id='sni-tab' data-toggle='pill' href='#sni' role='tab'
                                    aria-controls='sni' aria-selected='false'><i class="fas fa-shield-alt"></i> Change
                                    SNI</a>
                            </li>
                            <li class='nav-item'>
                                <a class='nav-link' id='ip-tab' data-toggle='pill' href='#change_ip' role='tab'
                                    aria-controls='change_ip' aria-selected='false'><i class="fas fa-network-wired"></i>
                                    Change IP</a>
                            </li>
                            <!-- New Backup Tab -->
                            <li class='nav-item'>
                                <a class='nav-link' id='backup-tab' data-toggle='pill' href='#backup' role='tab'
                                    aria-controls='backup' aria-selected='false'><i class="fas fa-download"></i>
                                    Backup</a>
                            </li>
                            <!-- IP Limiter Tab -->
                            <li class='nav-item'>
                                <a class='nav-link' id='ip-limit-tab' data-toggle='pill' href='#ip-limit' role='tab'
                                    aria-controls='ip-limit' aria-selected='false'><i class="fas fa-user-slash"></i>
                                    IP Limit</a>
                            </li>
                        </ul>
                    </div>
                    <div class='card-body' style="margin-left: 25px;">
                        <div class='tab-content' id='custom-tabs-three-tabContent'>

                            <!-- Subscriptions Tab -->
                            <div class='tab-pane fade show active' id='subs' role='tabpanel' aria-labelledby='subs-tab'>
                                <ul class='nav nav-tabs' id='subs-tabs' role='tablist'>
                                    <li class='nav-item'>
                                        <a class='nav-link active' id='singbox-tab' data-toggle='tab' href='#singbox'
                                            role='tab' aria-controls='singbox'
                                            aria-selected='true'><strong>SingBox</strong></a>
                                    </li>
                                    <li class='nav-item'>
                                        <a class='nav-link' id='normal-tab' data-toggle='tab' href='#normal' role='tab'
                                            aria-controls='normal' aria-selected='false'><strong>Normal</strong></a>
                                    </li>
                                </ul>
                                <div class='tab-content' id='subs-tabs-content'>
                                    <br>
                                    <!-- SingBox Sub Tab -->
                                    <div class='tab-pane fade show active' id='singbox' role='tabpanel'
                                        aria-labelledby='singbox-tab'>
                                        <form id="singbox">
                                            <div class='form-group'>
                                                <label for='singbox_domain'>Domain:</label>
                                                <input type='text' class='form-control' id='singbox_domain'
                                                    placeholder='Enter Domain'>
                                                <div class="invalid-feedback">
                                                    Please enter a valid domain (without http:// or https://).
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label for='singbox_port'>Port:</label>
                                                <input type='text' class='form-control' id='singbox_port'
                                                    placeholder='Enter Port'>
                                                <div class="invalid-feedback">
                                                    Please enter a valid port number.
                                                </div>
                                            </div>
                                            <button id="singbox_start" type='button' class='btn btn-success'>
                                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
                                                Start
                                            </button>
                                            <button id="singbox_stop" type='button' class='btn btn-danger'
                                                style="display: none;">Stop</button>

                                        </form>
                                    </div>

                                    <!-- Normal Sub Tab -->
                                    <div class='tab-pane fade' id='normal' role='tabpanel' aria-labelledby='normal-tab'>
                                        <form id="normal">
                                            <div class='form-group'>
                                                <label for='normal_domain'>Domain:</label>
                                                <input type='text' class='form-control' id='normal_domain'
                                                    placeholder='Enter Domain'>
                                                <div class="invalid-feedback">
                                                    Please enter a valid domain (without http:// or https://).
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label for='normal_port'>Port:</label>
                                                <input type='text' class='form-control' id='normal_port'
                                                    placeholder='Enter Port'>
                                                <div class="invalid-feedback">
                                                    Please enter a valid port number.
                                                </div>
                                            </div>
                                            <button id="normal_start" type='button' class='btn btn-success'>
                                               <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
                                                Start
                                            </button>
                                            <button id="normal_stop" type='button' class='btn btn-danger'
                                                style="display: none;">Stop</button>

                                        </form>
                                    </div>
                                </div>
                            </div>


                            <!-- Telegram Bot Tab -->
                            <div class='tab-pane fade' id='telegram' role='tabpanel' aria-labelledby='telegram-tab'>
                                <form id="telegram">
                                    <div class='form-group'>
                                        <label for='telegram_api_token'>API Token:</label>
                                        <input type='text' class='form-control' id='telegram_api_token'
                                            placeholder='Enter API Token'>
                                        <div class="invalid-feedback">
                                            Please enter a valid API Token.
                                        </div>
                                    </div>
                                    <div class='form-group'>
                                        <label for='telegram_admin_id'>Admin ID:</label>
                                        <input type='text' class='form-control' id='telegram_admin_id'
                                            placeholder='Enter Admin ID'>
                                        <div class="invalid-feedback">
                                            Please enter a valid Admin ID.
                                        </div>
                                    </div>
                                    <button id="telegram_start" type='button' class='btn btn-success'>
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>Start</button>
                                    <button id="telegram_stop" type='button' class='btn btn-danger'
                                        style="display: none;">Stop</button>

                                </form>
                            </div>

                            <!-- Port Tab -->
                            <div class='tab-pane fade' id='port' role='tabpanel' aria-labelledby='port-tab'>

                                <form id="port">
                                    <div class='form-group'>
                                        <label for='hysteria_port'>Port:</label>
                                        <input type='text' class='form-control' id='hysteria_port'
                                            placeholder='Enter Port'>
                                        <div class="invalid-feedback">
                                            Please enter a valid port number.
                                        </div>
                                    </div>
                                    <button id="port_change" type='button' class='btn btn-primary'>Save</button>
                                </form>
                            </div>

                            <!-- SNI Tab -->
                            <div class='tab-pane fade' id='sni' role='tabpanel' aria-labelledby='sni-tab'>

                                <form id="sni">
                                    <div class='form-group'>
                                        <label for='sni_domain'>Domain:</label>
                                        <input type='text' class='form-control' id='sni_domain'
                                            placeholder='Enter Domain'>
                                        <div class="invalid-feedback">
                                            Please enter a valid domain (without http:// or https://).
                                        </div>
                                    </div>
                                    <button id="sni_change" type='button' class='btn btn-primary'>Save</button>
                                </form>
                            </div>

                            <!-- Change IP Tab -->
                            <div class='tab-pane fade' id='change_ip' role='tabpanel' aria-labelledby='ip-tab'>
                                <form id="change_ip">
                                    <div class='form-group'>
                                        <label for='ipv4'>IPv4:</label>
                                        <input type='text' class='form-control' id='ipv4' placeholder='Enter IPv4'
                                            value="{{ ipv4 or '' }}">
                                        <div class="invalid-feedback">
                                            Please enter a valid IPv4 address.
                                        </div>
                                    </div>
                                    <div class='form-group'>
                                        <label for='ipv6'>IPv6:</label>
                                        <input type='text' class='form-control' id='ipv6' placeholder='Enter IPv6'
                                            value="{{ ipv6 or '' }}">
                                        <div class="invalid-feedback">
                                            Please enter a valid IPv6 address.
                                        </div>
                                    </div>
                                    <button id="ip_change" type='button' class='btn btn-primary'>Save</button>
                                </form>
                            </div>
                            <!-- Backup Tab (New) -->
                            <div class='tab-pane fade' id='backup' role='tabpanel' aria-labelledby='backup-tab'>
                                <div class="form-group">
                                     <label for="backup_file">Upload Backup:</label>
                                     <input type="file" class="form-control-file" id="backup_file" accept=".zip">
                                 </div>
                                <button id="upload_backup" type='button' class='btn btn-success'>Upload</button>
                                 <button id="download_backup" type='button' class='btn btn-primary'>Download Backup</button>

                                <div class="progress mt-3" style="display: none;">
                                  <div id="backup_progress_bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>

                               <div id="backup_status" class="mt-2"></div>  <!-- Status messages -->
                            </div>

                            <!-- IP Limit Tab (New) -->
                            <div class='tab-pane fade' id='ip-limit' role='tabpanel' aria-labelledby='ip-limit-tab'>
                                <ul class='nav nav-tabs' id='ip-limit-tabs' role='tablist'>
                                    <li class='nav-item'>
                                        <a class='nav-link active' id='ip-limit-service-tab' data-toggle='tab' href='#ip-limit-service'
                                            role='tab' aria-controls='ip-limit-service'
                                            aria-selected='true'><strong>Service Control</strong></a>
                                    </li>
                                    <li class='nav-item ip-limit-config-tab-li' style="display: none;">
                                        <a class='nav-link' id='ip-limit-config-tab' data-toggle='tab' href='#ip-limit-config-content' role='tab'
                                            aria-controls='ip-limit-config-content' aria-selected='false'><strong>Configuration</strong></a>
                                    </li>
                                </ul>
                                <div class='tab-content' id='ip-limit-tabs-content'>
                                    <br>
                                    <!-- IP Limit Service Control Sub Tab -->
                                    <div class='tab-pane fade show active' id='ip-limit-service' role='tabpanel'
                                        aria-labelledby='ip-limit-service-tab'>
                                        <form id="ip_limit_service_form">
                                            <button id="ip_limit_start" type='button' class='btn btn-success'>
                                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
                                                Start
                                            </button>
                                            <button id="ip_limit_stop" type='button' class='btn btn-danger' style="display: none;">Stop</button>
                                        </form>
                                    </div>

                                    <!-- IP Limit Configuration Sub Tab -->
                                    <div class='tab-pane fade' id='ip-limit-config-content' role='tabpanel' aria-labelledby='ip-limit-config-tab'>
                                        <form id="ip_limit_config">
                                            <div class='form-group'>
                                                <label for='block_duration'>Block Duration (seconds):</label>
                                                <input type='text' class='form-control' id='block_duration'
                                                    placeholder='Enter Block Duration' value="60">
                                                <div class="invalid-feedback">
                                                    Please enter a valid positive number for block duration.
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label for='max_ips'>Max IPs per User:</label>
                                                <input type='text' class='form-control' id='max_ips'
                                                    placeholder='Enter Max IPs per User' value="1">
                                                <div class="invalid-feedback">
                                                    Please enter a valid positive number for max IPs.
                                                </div>
                                            </div>
                                            <button id="ip_limit_change_config" type='button' class='btn btn-primary'>Save Configuration</button>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"
    integrity="sha512-yFjZbTYRCJodnuyGlsKamNE/LlEaEA/3apsIOPr7/l+jCMq9Dn9x5qyuAGqgpr4/NBZ95p8yrl/sLhJvoazg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>

    $(document).ready(function () {
        initUI();

        function isValidDomain(domain) {
            if (!domain) return false;
            const lowerDomain = domain.toLowerCase();
            return !lowerDomain.startsWith("http://") && !lowerDomain.startsWith("https://");
        }

        function isValidPort(port) {
            if (!port) return false;
            return /^[0-9]+$/.test(port) && parseInt(port) > 0 && parseInt(port) <= 65535;
        }
        function isValidIPorDomain(input) {
            if (!input) return true;

            const ipV4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
            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,2}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,3}){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,5}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,6}){1,6})|:((:[0-9a-fA-F]{1,7}){1,7}|:))$/;
            const domainRegex = /^(?!\-)(?:[a-zA-Z\d\-]{0,62}[a-zA-Z\d]\.){1,126}(?!\d+)[a-zA-Z\d]{1,63}$/;
            const lowerInput = input.toLowerCase();

            if (ipV4Regex.test(input)) return true;
            if (ipV6Regex.test(input)) return true;
            if (domainRegex.test(lowerInput) && !lowerInput.startsWith("http://") && !lowerInput.startsWith("https://")) return true;

            return false;
        }

        function isValidPositiveNumber(value) {
            if (!value) return false;
            return /^[0-9]+$/.test(value) && parseInt(value) > 0;
        }


        function confirmAction(actionName, callback) {
            Swal.fire({
                title: `Are you sure?`,
                text: `Do you really want to ${actionName}?`,
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, proceed!",
                cancelButtonText: "Cancel"
            }).then((result) => {
                if (result.isConfirmed) {
                    callback();
                }
            });
        }

        function sendRequest(url, type, data, successMessage, buttonSelector, showReload = true) {
            $.ajax({
                url: url,
                type: type,
                contentType: "application/json",
                data: data ? JSON.stringify(data) : null,
                beforeSend: function() {
                    if (buttonSelector) {
                        $(buttonSelector).prop('disabled', true);
                         $(buttonSelector + ' .spinner-border').show();
                    }
                },
                success: function (response) {
                    Swal.fire("Success!", successMessage, "success");
                     if (showReload) {
                        Swal.fire("Success!", successMessage, "success").then(() => {
                                location.reload();
                        });
                    }

                    console.log(response);
                },
                error: function (xhr, status, error) {
                   let errorMessage = "Something went wrong.";
                    if (xhr.responseJSON && xhr.responseJSON.detail) {
                        errorMessage = xhr.responseJSON.detail;
                    }
                    Swal.fire("Error!", errorMessage, "error");
                    console.error(error);
                },
                complete: function() {
                    if (buttonSelector) {
                        $(buttonSelector).prop('disabled', false);
                        $(buttonSelector + ' .spinner-border').hide();
                    }
                }
            });
        }

        function validateForm(formId) {
            let isValid = true;
            $(`#${formId} .form-control`).each(function () {
                const input = $(this);
                const id = input.attr('id');

                if (id.includes('domain')) {
                    if (!isValidDomain(input.val())) {
                        input.addClass('is-invalid');
                        isValid = false;
                    } else {
                        input.removeClass('is-invalid');
                    }
                } else if (id.includes('port')) {
                    if (!isValidPort(input.val())) {
                        input.addClass('is-invalid');
                        isValid = false;
                    } else {
                        input.removeClass('is-invalid');
                    }
                } else if (id === 'ipv4' || id === 'ipv6') {
                    if (!isValidIPorDomain(input.val())) {
                        input.addClass('is-invalid');
                        isValid = false;
                    } else {
                        input.removeClass('is-invalid');
                    }
                } else if (id === 'block_duration' || id === 'max_ips') {
                    if (!isValidPositiveNumber(input.val())) {
                        input.addClass('is-invalid');
                        isValid = false;
                    } else {
                        input.removeClass('is-invalid');
                    }
                }

                 else {

                    if (!input.val().trim()) {
                        input.addClass('is-invalid');
                        isValid = false;
                    } else {
                        input.removeClass('is-invalid');
                    }
                }

            });
            return isValid;
        }

    function initUI() {
        $.ajax({
            url: "{{ url_for('server_services_status_api') }}",
            type: "GET",
            success: function (data) {
                updateServiceUI(data);
            },
            error: function () {
                console.error("Failed to fetch service status.");
            }
        });


        function updateServiceUI(data) {
            const servicesMap = {
                "hysteria_telegram_bot": "#telegram",
                "hysteria_singbox": "#singbox",
                "hysteria_normal_sub": "#normal",
                "hysteria_iplimit": "#ip-limit-service"
            };

            Object.keys(servicesMap).forEach(service => {
                let selector = servicesMap[service];
                let isRunning = data[service];
                let serviceName = service.replace("hysteria_", "");

                if (isRunning) {
                    $(selector + " input, " + selector + " label").remove();
                    $(selector + " .btn-success").hide();
                    $(selector).prepend(`<div class='alert alert-info'>Service is running. You can stop it if needed.</div>`);
                    $(selector + " .btn-danger").show();

                     if (service === "hysteria_singbox") {
                         $("#singbox_start").prop('disabled', true);
                     }
                     if(service === "hysteria_telegram_bot"){
                         $("#telegram_start").prop('disabled', true);
                     }
                    if(service === "hysteria_normal_sub"){
                       $("#normal_start").prop('disabled', true);
                    }
                    if(service === "hysteria_iplimit"){
                       $("#ip_limit_start").hide();
                       $("#ip_limit_stop").show();
                       $(".ip-limit-config-tab-li").show();
                        if (!$("#ip-limit-config-tab").hasClass('active')) {
                            $('#ip-limit-service-tab').tab('show');
                        }


                    }

                } else {
                    $(selector + " input, " + selector + " label").show();
                    $(selector + " .btn-success").show();
                    $(selector + " .btn-danger").hide();
                    $(selector + " .alert-info").remove();
                     if (service === "hysteria_singbox") {
                         $("#singbox_start").prop('disabled', false);
                     }
                      if(service === "hysteria_telegram_bot"){
                         $("#telegram_start").prop('disabled', false);
                     }
                     if(service === "hysteria_normal_sub"){
                       $("#normal_start").prop('disabled', false);
                    }
                     if(service === "hysteria_iplimit"){
                       $("#ip_limit_start").show();
                       $("#ip_limit_stop").hide();
                       $(".ip-limit-config-tab-li").hide();
                       $('#ip-limit-service-tab').tab('show');

                    }
                }
            });
        }



        $.ajax({
            url: "{{ url_for('get_ip_api') }}",
            type: "GET",
            success: function (data) {
                $("#ipv4").val(data.ipv4 || "");
                $("#ipv6").val(data.ipv6 || "");

                $("#ipv4").attr("placeholder", "Enter IPv4 or Domain");
                $("#ipv6").attr("placeholder", "Enter IPv6 or Domain");


            },
            error: function () {
                console.error("Failed to fetch IP addresses.");
                $("#ipv4").attr("placeholder", "Enter IPv4 or Domain");
                $("#ipv6").attr("placeholder", "Enter IPv6 or Domain");
            }
        });

        $.ajax({
            url: "{{ url_for('get_port_api') }}",
            type: "GET",
            success: function (data) {
                $("#hysteria_port").val(data.port || "");
            },
            error: function () {
                console.error("Failed to fetch port.");
            }
        });

        $.ajax({
            url: "{{ url_for('get_sni_api') }}",
            type: "GET",
            success: function (data) {
                $("#sni_domain").val(data.sni || "");
            },
            error: function () {
                console.error("Failed to fetch SNI domain.");
            }
        });
    }
        function startTelegram() {
            if (!validateForm('telegram')) return;
            const apiToken = $("#telegram_api_token").val();
            const adminId = $("#telegram_admin_id").val();
            confirmAction("start the Telegram bot", function () {
                sendRequest(
                    "{{ url_for('telegram_start_api') }}",
                    "POST",
                    { token: apiToken, admin_id: adminId },
                    "Telegram bot started successfully!",
                    "#telegram_start"
                );
            });
        }

        function stopTelegram() {
            confirmAction("stop the Telegram bot", function () {
                sendRequest(
                    "{{ url_for('telegram_stop_api') }}",
                    "DELETE",
                    null,
                    "Telegram bot stopped successfully!",
                    null
                );
            });
        }

        function startSingbox() {
            if (!validateForm('singbox')) return;
            const domain = $("#singbox_domain").val();
            const port = $("#singbox_port").val();
            confirmAction("start SingBox", function () {
                sendRequest(
                    "{{ url_for('singbox_start_api') }}",
                    "POST",
                    { domain: domain, port: port },
                    "SingBox started successfully!",
                    "#singbox_start"
                );
            });
        }

        function stopSingbox() {
            confirmAction("stop SingBox", function () {
                sendRequest(
                    "{{ url_for('singbox_stop_api') }}",
                    "DELETE",
                    null,
                    "SingBox stopped successfully!",
                     null
                );
            });
        }

        function startNormal() {
            if (!validateForm('normal')) return;
            const domain = $("#normal_domain").val();
            const port = $("#normal_port").val();
            confirmAction("start the normal subscription", function () {
                sendRequest(
                    "{{ url_for('normal_sub_start_api') }}",
                    "POST",
                    { domain: domain, port: port },
                    "Normal subscription started successfully!",
                    "#normal_start"
                );
            });
        }

        function stopNormal() {
            confirmAction("stop the normal subscription", function () {
                sendRequest(
                    "{{ url_for('normal_sub_stop_api') }}",
                    "DELETE",
                    null,
                    "Normal subscription stopped successfully!",
                    null

                );
            });
        }

        function changePort() {
            if (!validateForm('port')) return;
            const port = $("#hysteria_port").val();
            const baseUrl = "{{ url_for('set_port_api', port='PORT_PLACEHOLDER') }}";
            const url = baseUrl.replace("PORT_PLACEHOLDER", port);
            confirmAction("change the port", function () {
                sendRequest(url, "GET", null, "Port changed successfully!",null);
            });
        }

        function changeSNI() {
            if (!validateForm('sni')) return;
            const domain = $("#sni_domain").val();
            const baseUrl = "{{ url_for('set_sni_api', sni='SNI_PLACEHOLDER') }}";
            const url = baseUrl.replace("SNI_PLACEHOLDER", domain);
            confirmAction("change the SNI", function () {
                sendRequest(url, "GET", null, "SNI changed successfully!",null);
            });
        }

        function saveIP() {
            if (!validateForm('change_ip')) return;
            confirmAction("save the new IP", function () {
                sendRequest(
                    "{{ url_for('edit_ip_api') }}",
                    "POST",
                    {
                        ipv4: $("#ipv4").val() || null,
                        ipv6: $("#ipv6").val() || null
                    },
                    "New IP saved successfully!",
                    null
                );
            });
        }
        function downloadBackup() {
            window.location.href = "{{ url_for('backup_api') }}";
        }
        function uploadBackup() {
            var fileInput = document.getElementById('backup_file');
            var file = fileInput.files[0];
            if (!file) {
                Swal.fire("Error!", "Please select a file to upload.", "error");
                return;
            }

            if (file.name.split('.').pop() !== 'zip') {
               Swal.fire("Error!", "Only zip file.", "error");
               return;
            }


            confirmAction("upload the backup", function() {
            var formData = new FormData();
            formData.append('file', file);

            var progressBar = document.getElementById('backup_progress_bar');
            var progressContainer = progressBar.parentElement;
            var statusDiv = document.getElementById('backup_status');

            progressContainer.style.display = 'block';
            progressBar.style.width = '0%';
            progressBar.setAttribute('aria-valuenow', 0);
            statusDiv.innerText = 'Uploading...';

            $.ajax({
                url: "{{ url_for('restore_api') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = (evt.loaded / evt.total) * 100;
                            progressBar.style.width = percentComplete + '%';
                            progressBar.setAttribute('aria-valuenow', percentComplete);
                        }
                    }, false);
                    return xhr;
                },
                success: function(response) {
                    statusDiv.innerText = 'Backup restored successfully!';
                    statusDiv.className = 'mt-2 text-success';
                    Swal.fire("Success!", "Backup restored successfully!", "success").then(() => {
                            location.reload();
                        });
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    statusDiv.innerText = 'Error restoring backup.';
                    statusDiv.className = 'mt-2 text-danger';
                     Swal.fire("Error!", xhr.responseJSON.detail, "error");
                    console.error(error);
                },
                 complete: function() {
                    setTimeout(function(){ progressContainer.style.display = 'none'; }, 1000);
                }
            });
          });
        }
        function startIPLimit() {
             sendRequest(
                    "{{ url_for('start_ip_limit_api') }}",
                    "POST",
                    null,
                    "IP Limit service started successfully!",
                    "#ip_limit_start"
                );
        }

        function stopIPLimit() {
             sendRequest(
                    "{{ url_for('stop_ip_limit_api') }}",
                    "POST",
                    null,
                    "IP Limit service stopped successfully!",
                    null
                );
        }

        function configIPLimit() {
            if (!validateForm('ip_limit_config')) return;
            const blockDuration = $("#block_duration").val();
            const maxIps = $("#max_ips").val();
            sendRequest(
                "{{ url_for('config_ip_limit_api') }}",
                "POST",
                { block_duration: blockDuration, max_ips: maxIps },
                "IP Limit configuration saved successfully!",
                "#ip_limit_change_config",
                 false
            );
        }


        $("#telegram_start").on("click", startTelegram);
        $("#telegram_stop").on("click", stopTelegram);
        $("#singbox_start").on("click", startSingbox);
        $("#singbox_stop").on("click", stopSingbox);
        $("#normal_start").on("click", startNormal);
        $("#normal_stop").on("click", stopNormal);
        $("#port_change").on("click", changePort);
        $("#sni_change").on("click", changeSNI);
        $("#ip_change").on("click", saveIP);
        $("#download_backup").on("click", downloadBackup);
        $("#upload_backup").on("click", uploadBackup);
        $("#ip_limit_start").on("click", startIPLimit);
        $("#ip_limit_stop").on("click", stopIPLimit);
        $("#ip_limit_change_config").on("click", configIPLimit);


        $('#singbox_domain, #normal_domain, #sni_domain').on('input', function () {
            if (isValidDomain($(this).val())) {
                $(this).removeClass('is-invalid');
            } else {
                $(this).addClass('is-invalid');
            }
        });

        $('#singbox_port, #normal_port, #hysteria_port').on('input', function () {
            if (isValidPort($(this).val())) {
                $(this).removeClass('is-invalid');
            } else {
                $(this).addClass('is-invalid');
            }
        });
        $('#ipv4, #ipv6').on('input', function () {
            if (isValidIPorDomain($(this).val())) {
                $(this).removeClass('is-invalid');
            } else {
                $(this).addClass('is-invalid');
            }
        });

        $('#telegram_api_token, #telegram_admin_id').on('input', function () {
            if ($(this).val().trim() !== "") {
                $(this).removeClass('is-invalid');
            } else {
                $(this).addClass('is-invalid');
            }
        });
        $('#block_duration, #max_ips').on('input', function () {
            if (isValidPositiveNumber($(this).val())) {
                $(this).removeClass('is-invalid');
            } else {
                $(this).addClass('is-invalid');
            }
        });
    });
</script>
{% endblock %}