{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% block content %}
    <!-- Page Header -->
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Tweak Settings" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Configure global settings that control automated actions, security behavior, reseller features, and backup operations." %}</div>
        </div>
    </div>
    <!-- Breadcrumb -->
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Preferences" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Tweak Settings" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <!-- Settings Overview -->
    <div class="eenos-notice eenos-notice-info mb-4">
        <div class="eenos-notice-icon">
            <i data-lucide="settings-2"></i>
        </div>
        <div class="eenos-notice-content">
            <div class="eenos-notice-title">{% translate "Eenos Tweak Settings" %}</div>
            <div class="eenos-notice-text">{% translate "Configure global settings that control account suspension, SSL enforcement, reseller capabilities, and backup restoration features." %}</div>
        </div>
    </div>
    <form action="" method="POST" class="eenos-form" id="eenos-form">
        {% csrf_token %}
        <div class="row g-4">
            <!-- ========================================================= -->
            <!-- Basic Tweak Settings -->
            <!-- ========================================================= -->
            <div class="col-lg-6">
                <div class="eenos-card h-100">
                    <div>
                        <div class="d-flex align-items-start gap-3 mb-4">
                            <div class="flex-shrink-0">
                                <i data-lucide="sliders-horizontal"></i>
                            </div>
                            <div>
                                <div class="eenos-panel-title">{% translate "Basic Tweak" %}</div>
                                <div class="eenos-panel-subtitle">{% translate "Configure common account and service behavior." %}</div>
                            </div>
                        </div>
                        <!-- User Suspend Over Quota -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="quotasuspend_on">{% translate "User Suspend Over Quota" %}</label>
                                    <div class="form-text mt-0">{% translate "Automatically suspend user accounts when their disk usage exceeds the allocated quota." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="quotasuspend"
                                                   value="on"
                                                   class="form-check-input quotasuspend_on"
                                                   id="quotasuspend_on" />
                                            <label class="form-check-label" for="quotasuspend_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="quotasuspend"
                                                   value="off"
                                                   class="form-check-input quotasuspend_off"
                                                   id="quotasuspend_off" />
                                            <label class="form-check-label" for="quotasuspend_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- User Suspend Over Bandwidth -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="bandwidthsuspend_on">{% translate "User Suspend Over Bandwidth" %}</label>
                                    <div class="form-text mt-0">{% translate "Automatically suspend user accounts when their monthly bandwidth usage exceeds the allocated limit." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="bandwidthsuspend"
                                                   value="on"
                                                   class="form-check-input bandwidthsuspend_on"
                                                   id="bandwidthsuspend_on" />
                                            <label class="form-check-label" for="bandwidthsuspend_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="bandwidthsuspend"
                                                   value="off"
                                                   class="form-check-input bandwidthsuspend_off"
                                                   id="bandwidthsuspend_off" />
                                            <label class="form-check-label" for="bandwidthsuspend_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Reseller Suspend Over Quota -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="resellerquotasuspend_on">{% translate "Reseller Suspend Over Quota" %}</label>
                                    <div class="form-text mt-0">{% translate "Automatically suspend reseller accounts when their disk usage exceeds the allocated quota." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerquotasuspend"
                                                   value="on"
                                                   class="form-check-input resellerquotasuspend_on"
                                                   id="resellerquotasuspend_on" />
                                            <label class="form-check-label" for="resellerquotasuspend_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerquotasuspend"
                                                   value="off"
                                                   class="form-check-input resellerquotasuspend_off"
                                                   id="resellerquotasuspend_off" />
                                            <label class="form-check-label" for="resellerquotasuspend_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Reseller Suspend Over Bandwidth -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="resellerbandwidthsuspend_on"> {% translate "Reseller Suspend Over Bandwidth" %} </label>
                                    <div class="form-text mt-0">{% translate "Automatically suspend reseller accounts when their bandwidth usage exceeds the allocated limit." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerbandwidthsuspend"
                                                   value="on"
                                                   class="form-check-input resellerbandwidthsuspend_on"
                                                   id="resellerbandwidthsuspend_on" />
                                            <label class="form-check-label" for="resellerbandwidthsuspend_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerbandwidthsuspend"
                                                   value="off"
                                                   class="form-check-input resellerbandwidthsuspend_off"
                                                   id="resellerbandwidthsuspend_off" />
                                            <label class="form-check-label" for="resellerbandwidthsuspend_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Force SSL -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="forcessl_on">{% translate "Use SSL For Eenos Services" %}</label>
                                    <div class="form-text mt-0">{% translate "Force Eenos control panel and service connections to use HTTPS for secure communication." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="forcessl"
                                                   value="on"
                                                   class="form-check-input forcessl_on"
                                                   id="forcessl_on" />
                                            <label class="form-check-label" for="forcessl_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="forcessl"
                                                   value="off"
                                                   class="form-check-input forcessl_off"
                                                   id="forcessl_off" />
                                            <label class="form-check-label" for="forcessl_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Unknown Control Panel Backups -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="alianrestore_on"> {% translate "Restore Backups From Unknown Control Panels" %} </label>
                                    <div class="form-text mt-0">{% translate "Allow Eenos to restore compatible account backups created by other hosting control panels." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="alianrestore"
                                                   value="on"
                                                   class="form-check-input alianrestore_on"
                                                   id="alianrestore_on" />
                                            <label class="form-check-label" for="alianrestore_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="alianrestore"
                                                   value="off"
                                                   class="form-check-input alianrestore_off"
                                                   id="alianrestore_off" />
                                            <label class="form-check-label" for="alianrestore_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ========================================================= -->
            <!-- Advanced Tweak Settings -->
            <!-- ========================================================= -->
            <div class="col-lg-6">
                <div class="eenos-card h-100">
                    <div>
                        <div class="d-flex align-items-start gap-3 mb-4">
                            <div class="flex-shrink-0">
                                <i data-lucide="settings"></i>
                            </div>
                            <div>
                                <div class="eenos-panel-title">{% translate "Advanced Tweaks" %}</div>
                                <div class="eenos-panel-subtitle">{% translate "Configure reseller capabilities and advanced backup behavior." %}</div>
                            </div>
                        </div>
                        <!-- Reseller Branding -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="resellerbranding_on">{% translate "Reseller Branding" %}</label>
                                    <div class="form-text mt-0">{% translate "Allow resellers to customize the branding and appearance of their hosting environment." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerbranding"
                                                   value="on"
                                                   class="form-check-input resellerbranding_on"
                                                   id="resellerbranding_on" />
                                            <label class="form-check-label" for="resellerbranding_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerbranding"
                                                   value="off"
                                                   class="form-check-input resellerbranding_off"
                                                   id="resellerbranding_off" />
                                            <label class="form-check-label" for="resellerbranding_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Multi Level Reselling -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="resellerchain_on">{% translate "Multi Level Reselling" %}</label>
                                    <div class="form-text mt-0">{% translate "Allow resellers to create and manage additional reseller accounts under their own reseller hierarchy." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerchain"
                                                   value="on"
                                                   class="form-check-input resellerchain_on"
                                                   id="resellerchain_on" />
                                            <label class="form-check-label" for="resellerchain_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerchain"
                                                   value="off"
                                                   class="form-check-input resellerchain_off"
                                                   id="resellerchain_off" />
                                            <label class="form-check-label" for="resellerchain_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Reseller Pool Restore -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="resellerpoolrestore_on"> {% translate "Restore Backup From Reseller Pools and Schedules" %} </label>
                                    <div class="form-text text-danger mt-0">{% translate "Allow resellers to restore backups from their configured storage pools and backup schedules. Enable this only when required." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerpoolrestore"
                                                   value="on"
                                                   class="form-check-input resellerpoolrestore_on"
                                                   id="resellerpoolrestore_on" />
                                            <label class="form-check-label" for="resellerpoolrestore_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="resellerpoolrestore"
                                                   value="off"
                                                   class="form-check-input resellerpoolrestore_off"
                                                   id="resellerpoolrestore_off" />
                                            <label class="form-check-label" for="resellerpoolrestore_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- User Pool Restore -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="userpoolrestore_on"> {% translate "Restore Backup From User Pools and Schedules" %} </label>
                                    <div class="form-text text-danger mt-0">{% translate "Allow users to restore backups from their configured storage pools and backup schedules. Enable this only when required." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="userpoolrestore"
                                                   value="on"
                                                   class="form-check-input userpoolrestore_on"
                                                   id="userpoolrestore_on" />
                                            <label class="form-check-label" for="userpoolrestore_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="userpoolrestore"
                                                   value="off"
                                                   class="form-check-input userpoolrestore_off"
                                                   id="userpoolrestore_off" />
                                            <label class="form-check-label" for="userpoolrestore_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- User Backup Generator -->
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-md-8">
                                    <label class="form-label mb-1" for="userlivebackup_on">{% translate "User Backup Generator" %}</label>
                                    <div class="form-text mt-0">{% translate "Allow users to create on-demand live backups of their accounts and download them when required." %}</div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="userlivebackup"
                                                   value="on"
                                                   class="form-check-input userlivebackup_on"
                                                   id="userlivebackup_on" />
                                            <label class="form-check-label" for="userlivebackup_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="userlivebackup"
                                                   value="off"
                                                   class="form-check-input userlivebackup_off"
                                                   id="userlivebackup_off" />
                                            <label class="form-check-label" for="userlivebackup_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- Form Actions -->
        <!-- ============================================================= -->
        <div class="d-flex align-items-center gap-2 mt-4">
            <button type="button" class="btn btn-primary save_settings" name="save">
                <i data-lucide="save" class="me-1"></i>
                {% translate "Save Settings" %}
            </button>
            <button type="button" class="btn btn-outline-secondary reset" name="reset">
                <i data-lucide="rotate-ccw" class="me-1"></i>
                {% translate "Reset To Default" %}
            </button>
        </div>
        <input type="hidden" name="savesettings" id="savesettings" />
    </form>
    <!-- ============================================================= -->
    <!-- Reset Form -->
    <!-- ============================================================= -->
    <form action="" method="POST" class="alert-reset" id="alert-reset">
        {% csrf_token %}
        <input type="hidden" name="reset" id="reset" />
    </form>
    <!-- ============================================================= -->
    <!-- Save Confirmation Modal -->
    <!-- ============================================================= -->
    <div class="modal fade"
         id="saveSettingsModal"
         tabindex="-1"
         aria-labelledby="saveSettingsModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveSettingsModalLabel">
                        <i data-lucide="save" class="me-2"></i>
                        {% translate "Save Tweak Settings" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">{% translate "Do you wish to save the current tweak settings?" %}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-primary" id="confirmSaveSettings">
                        <i data-lucide="save" class="me-1"></i>
                        {% translate "Save" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================= -->
    <!-- Reset Confirmation Modal -->
    <!-- ============================================================= -->
    <!-- Reset Confirmation Modal -->
    <div class="modal fade"
         id="resetSettingsModal"
         tabindex="-1"
         aria-labelledby="resetSettingsModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resetSettingsModalLabel">
                        <i data-lucide="rotate-ccw" class="me-2"></i>
                        {% translate "Reset Tweak Settings" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">{% translate "Do you wish to reset all tweak settings to their default values?" %}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-secondary" id="confirmResetSettings">
                        <i data-lucide="rotate-ccw" class="me-1"></i>
                        {% translate "Reset to Default" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
  document.addEventListener("DOMContentLoaded", function () {
    /*
     * Current backend settings.
     *
     * Keep the backend values in one object so the radio controls
     * can be initialized consistently without repeating template
     * conditions for every setting.
     */

    const settings = {
      quotasuspend: "{{ settings.quotasuspend|default:'off'|escapejs }}",
      bandwidthsuspend: "{{ settings.bandwidthsuspend|default:'off'|escapejs }}",
      resellerquotasuspend: "{{ settings.resellerquotasuspend|default:'off'|escapejs }}",
      resellerbandwidthsuspend: "{{ settings.resellerbandwidthsuspend|default:'off'|escapejs }}",
      forcessl: "{{ settings.forcessl|default:'on'|escapejs }}",
      alianrestore: "{{ settings.alianrestore|default:'off'|escapejs }}",
      resellerbranding: "{{ settings.resellerbranding|default:'on'|escapejs }}",
      resellerchain: "{{ settings.resellerchain|default:'off'|escapejs }}",
      resellerpoolrestore: "{{ settings.resellerpoolrestore|default:'off'|escapejs }}",
      userpoolrestore: "{{ settings.userpoolrestore|default:'off'|escapejs }}",
      userlivebackup: "{{ settings.userlivebackup|default:'on'|escapejs }}",
    };

    /*
     * Initialize radio controls from the backend settings.
     */

    Object.entries(settings).forEach(function ([name, value]) {
      const selector = 'input[name="' + name + '"][value="' + value + '"]';
      const input = document.querySelector(selector);

      if (input) {
        input.checked = true;
      }
    });

    /*
     * Save settings.
     *
     * Validate the form first. Only show the confirmation modal
     * when the form passes validation.
     */

    document.querySelectorAll(".save_settings").forEach(function (button) {
      button.addEventListener("click", function () {
        const form = $("#eenos-form").parsley();

        form.validate();

        if (!form.isValid()) {
          return;
        }

        const modalElement = document.getElementById("saveSettingsModal");

        const modal = bootstrap.Modal.getOrCreateInstance(modalElement);

        modal.show();
      });
    });

    /*
     * Confirm save.
     */

    const confirmSaveButton = document.getElementById("confirmSaveSettings");

    if (confirmSaveButton) {
      confirmSaveButton.addEventListener("click", function () {
        document.getElementById("savesettings").value = "yes";

        document.getElementById("eenos-form").submit();
      });
    }

    /*
     * Reset settings.
     */

    document.querySelectorAll(".reset").forEach(function (button) {
      button.addEventListener("click", function () {
        const modalElement = document.getElementById("resetSettingsModal");

        const modal = bootstrap.Modal.getOrCreateInstance(modalElement);

        modal.show();
      });
    });

    /*
     * Confirm reset.
     */

    const confirmResetButton = document.getElementById("confirmResetSettings");

    if (confirmResetButton) {
      confirmResetButton.addEventListener("click", function () {
        document.getElementById("reset").value = "yes";

        document.getElementById("alert-reset").submit();
      });
    }
  });
    </script>
{% endblock %}