{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Create User" %} - Eenos
{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Create Account" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Create a new hosting account with its domain, resources, services, and account settings." %}</div>
        </div>
    </div>
    <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 "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'listuser' %}">{% translate "User Accounts" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Create Account" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form action=""
          class="eenos-form create_user"
          method="POST"
          name="createuser"
          id="create_form">
        {% csrf_token %}
        <!-- =========================================================
         ACCOUNT CREATION NOTICE
    ========================================================== -->
        <div class="eenos-notice eenos-notice-info mb-4">
            <div class="eenos-notice-icon">
                <i data-lucide="info"></i>
            </div>
            <div class="eenos-notice-content">
                <div class="eenos-notice-title">{% translate "Hosting Account Creation" %}</div>
                <div class="eenos-notice-text">{% translate "Create a complete hosting account by providing the domain, login credentials, hosting package, and account preferences. The selected package determines the resources and services available to this account." %}</div>
            </div>
        </div>
        <!-- =========================================================
         USER INFORMATION + SETTINGS
    ========================================================== -->
        <div class="row g-4 mb-4">
            <!-- =====================================================
                USER INFORMATION
            ====================================================== -->
            <div class="col-lg-6">
                <div class="eenos-card h-100">
                    <div class="d-flex align-items-start gap-3 mb-4">
                        <div>
                            <div class="eenos-panel-title">{% translate "User Information" %}</div>
                            <div class="eenos-panel-subtitle">
                                {% translate "Enter the domain, account credentials, contact email, and hosting package for this account." %}
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column gap-3">
                        <!-- Domain -->
                        <div>
                            <label for="domain" class="form-label">{% translate "Domain" %}</label>
                            <input class="form-control"
                                   autocomplete="off"
                                   type="text"
                                   value=""
                                   id="domain"
                                   name="domain"
                                   data-parsley-required="true"
                                   data-parsley-required-message="{% translate 'Please enter a domain name.' %}">
                        </div>
                        <!-- User -->
                        <div>
                            <label for="user" class="form-label">{% translate "User Name" %}</label>
                            <input class="form-control"
                                   autocomplete="off"
                                   type="text"
                                   value=""
                                   id="user"
                                   name="user"
                                   data-parsley-required="true"
                                   data-parsley-required-message="{% translate 'Please enter a user name.' %}">
                        </div>
                        <!-- Password -->
                        <div>
                            <label for="password" class="form-label">{% translate "Password" %}</label>
                            <div class="eenos-password-generator">
                                <div class="input-group">
                                    <input type="password"
                                           class="form-control eenos-password-input"
                                           id="password"
                                           name="password"
                                           autocomplete="new-password"
                                           value=""
                                           data-parsley-required="true"
                                           data-parsley-required-message="{% translate 'Please enter a password.' %}">
                                    <!-- Eye -->
                                    <button type="button"
                                            class="btn btn-outline-secondary eenos-password-toggle"
                                            aria-label="{% translate 'Show password' %}"
                                            title="{% translate 'Show password' %}">
                                        <i data-lucide="eye"></i>
                                    </button>
                                    <!-- Password Generator -->
                                    <button type="button"
                                            class="btn btn-outline-primary eenos-password-generate"
                                            aria-label="{% translate 'Generate password' %}"
                                            title="{% translate 'Generate password' %}">
                                        <i data-lucide="refresh-cw"></i>
                                    </button>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <!-- Password Strength -->
                                <div class="eenos-password-strength mt-2">
                                    <div class="progress" style="height: 4px">
                                        <div class="progress-bar eenos-password-strength-progress"
                                             role="progressbar"
                                             style="width: 0%"></div>
                                    </div>
                                    <div class="eenos-password-strength-text small text-muted mt-1"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Re-enter Password -->
                        <div>
                            <label for="repassword" class="form-label">{% translate "Re-enter Password" %}</label>
                            <input type="password"
                                   class="form-control"
                                   id="repassword"
                                   name="repassword"
                                   autocomplete="new-password"
                                   value=""
                                   data-parsley-required="true"
                                   data-parsley-required-message="{% translate 'Please re-enter the password.' %}"
                                   data-parsley-equalto="#password"
                                   data-parsley-equalto-message="{% translate 'Passwords do not match.' %}">
                        </div>
                        <!-- Email -->
                        <div>
                            <label for="email" class="form-label">{% translate "Email" %}</label>
                            <input class="form-control"
                                   autocomplete="off"
                                   type="email"
                                   value=""
                                   id="email"
                                   name="email"
                                   data-parsley-required="true"
                                   data-parsley-required-message="{% translate 'Please enter an email address.' %}"
                                   data-parsley-type="email"
                                   data-parsley-type-message="{% translate 'Please enter a valid email address.' %}">
                        </div>
                        <!-- Hosting Package -->
                        <div>
                            <label for="selectpkg" class="form-label">{% translate "Hosting Package" %}</label>
                            <div class="d-flex gap-2 align-items-start">
                                <div class="flex-grow-1">
                                    <select class="form-select eenos-select-search"
                                            name="package"
                                            id="selectpkg"
                                            data-parsley-required="true"
                                            data-parsley-required-message="{% translate 'Please select a hosting package.' %}">
                                        <option value="">{% translate "Select Hosting Package" %}</option>
                                        {% for feature in features %}
                                            <option value="{{ feature }}">{{ feature }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <a href="{% url 'addpkg' %}"
                                   class="btn btn-outline-primary flex-shrink-0">
                                    <i data-lucide="plus"></i>
                                    {% translate "New Package" %}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =====================================================
                SETTINGS
            ====================================================== -->
            <div class="col-lg-6">
                <div class="eenos-card h-100">
                    <div class="mb-4">
                        <div class="eenos-panel-title">{% translate "Account Settings" %}</div>
                        <div class="eenos-panel-subtitle">
                            {% translate "Configure the account language, theme, network access, and mail delivery settings." %}
                        </div>
                    </div>
                    <!-- Language -->
                    <div class="mb-4">
                        <label for="language" class="form-label">{% translate "Language" %}</label>
                        {% get_current_language as LANGUAGE_CODE %}
                        <select class="form-select eenos-select-search"
                                name="language"
                                id="language"
                                data-parsley-required="true"
                                data-parsley-required-message="{% translate 'Please select a language.' %}">
                            {% get_available_languages as LANGUAGES %}
                            {% for lang in LANGUAGES %}
                                {% if lang.0 == LANGUAGE_CODE %}
                                    <option value="{{ lang.0 }}" selected>{{ lang.1 }} ({{ lang.0 }})</option>
                                {% else %}
                                    <option value="{{ lang.0 }}">{{ lang.1 }} ({{ lang.0 }})</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <!-- Theme -->
                    <div class="mb-4">
                        <label for="theme" class="form-label">{% translate "Theme" %}</label>
                        <select class="form-select eenos-select-search"
                                name="theme"
                                id="theme"
                                data-parsley-required="true"
                                data-parsley-required-message="{% translate 'Please select a theme.' %}">
                            <option value="default">default</option>
                        </select>
                    </div>
                    <!-- Network Configuration -->
                    <div class="pt-3 mb-4 border-top">
                        <div class="eenos-panel-title fs-6 mb-1">{% translate "Network Configuration" %}</div>
                        <div class="eenos-panel-subtitle mb-3">
                            {% translate "Select the dedicated IP addresses to assign to this hosting account, if available." %}
                        </div>
                        <!-- IPv4 -->
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="ipv4" id="chk_ipv4">
                            <label class="form-check-label" for="chk_ipv4">
                                {% translate "Assign Dedicated IPv4" %}
                                <span class="text-muted">({% translate "if available" %})</span>
                            </label>
                        </div>
                        <!-- IPv6 -->
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="ipv6" id="chk_ipv6">
                            <label class="form-check-label" for="chk_ipv6">
                                {% translate "Assign Dedicated IPv6" %}
                                <span class="text-muted">({% translate "if available" %})</span>
                            </label>
                        </div>
                    </div>
                    <!-- Shell Access -->
                    <div class="pt-3 mb-4 border-top">
                        <div class="eenos-panel-title fs-6 mb-1">{% translate "System Access" %}</div>
                        <div class="eenos-panel-subtitle mb-3">{% translate "Allow the account to access the server through a shell." %}</div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="shell" id="chk_shell">
                            <label class="form-check-label" for="chk_shell">{% translate "Shell Access" %}</label>
                        </div>
                    </div>
                    <!-- Mail Exchanger -->
                    <div class="pt-3 border-top">
                        <div class="eenos-panel-title fs-6 mb-1">{% translate "Mail Delivery" %}</div>
                        <div class="eenos-panel-subtitle mb-3">
                            {% translate "Choose whether email for this domain is delivered locally or through a remote mail server." %}
                        </div>
                        <div class="d-flex gap-4">
                            <!-- Local -->
                            <div class="form-check">
                                <input type="radio"
                                       name="mailserver"
                                       value="local"
                                       class="form-check-input disablethis mailserver_default"
                                       id="mailserver_local">
                                <label class="form-check-label" for="mailserver_local">{% translate "Local" %}</label>
                            </div>
                            <!-- Remote -->
                            <div class="form-check">
                                <input type="radio"
                                       name="mailserver"
                                       value="remote"
                                       class="form-check-input enablethis"
                                       id="mailserver_remote">
                                <label class="form-check-label" for="mailserver_remote">{% translate "Remote" %}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- =========================================================
         ADDITIONAL SETTINGS
    ========================================================== -->
        <div class="eenos-card mb-4">
            <div class="mb-4">
                <div class="eenos-panel-title">{% translate "Additional Settings" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Configure reseller capabilities, DNS behavior, and email authentication for this hosting account." %}</div>
            </div>
            <!-- Reseller -->
            <div class="form-check mb-4">
                <input class="form-check-input"
                       type="checkbox"
                       name="reseller"
                       id="chk_reseller">
                <label class="form-check-label" for="chk_reseller">{% translate "Make this account a reseller" %}</label>
            </div>
            <!-- Reseller Options -->
            <div class="reseller_div ps-4 border-start">
                <!-- Self Own Account -->
                <div class="row align-items-center g-3 mb-3">
                    <div class="col-md-6">
                        <label for="chk_resellerself" class="form-label mb-0">{% translate "Self-own Account" %}</label>
                        <div class="small text-muted">{% translate "Allow this reseller to modify its own hosting account." %}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="resellerself"
                                   id="chk_resellerself">
                        </div>
                    </div>
                </div>
                <!-- Account Limit -->
                <div class="row align-items-center g-3 mb-3">
                    <div class="col-md-6">
                        <label for="reseller_limt_value" class="form-label mb-0">{% translate "Account Limit" %}</label>
                        <div class="small text-muted">{% translate "Set the maximum number of hosting accounts this reseller can create." %}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <div class="form-check">
                                <input type="radio"
                                       name="reseller_limt_option"
                                       value="unlimited"
                                       class="form-check-input reseller_limt_option reseller_options disablethis reseller_limt_off reseller_limt_unlimited"
                                       id="reseller_limit_unlimited">
                                <label class="form-check-label" for="reseller_limit_unlimited">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="reseller_limt_option"
                                       value="on"
                                       class="form-check-input reseller_limt_option reseller_options enablethis reseller_limt_on"
                                       id="reseller_limit_on">
                                <label class="form-check-label" for="reseller_limit_on">{% translate "Limit" %}</label>
                            </div>
                            <input class="form-control reseller_limt_value reseller_options_value"
                                   type="number"
                                   min="1"
                                   value="10"
                                   name="reseller_limt_value"
                                   id="reseller_limt_value"
                                   style="max-width:120px">
                        </div>
                    </div>
                    <input type="hidden"
                           name="reseller_limt"
                           value=""
                           class="reseller_limt"
                           id="reseller_limt">
                </div>
                <!-- Disk Quota -->
                <div class="row align-items-center g-3 mb-3 reseller_options">
                    <div class="col-md-6">
                        <label for="reseller_quota_value" class="form-label mb-0">{% translate "Disk Quota" %}</label>
                        <div class="small text-muted">{% translate "Limit the amount of disk space available to accounts managed by this reseller." %}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <div class="form-check">
                                <input type="radio"
                                       name="reseller_quota_option"
                                       value="unlimited"
                                       class="form-check-input reseller_quota_option reseller_options disablethis reseller_quota_off reseller_quota_unlimited"
                                       id="reseller_quota_unlimited">
                                <label class="form-check-label" for="reseller_quota_unlimited">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="reseller_quota_option"
                                       value="on"
                                       class="form-check-input reseller_quota_option reseller_options enablethis reseller_quota_on"
                                       id="reseller_quota_on">
                                <label class="form-check-label" for="reseller_quota_on">{% translate "Limit" %}</label>
                            </div>
                            <div class="input-group" style="max-width:160px">
                                <input class="form-control reseller_quota_value reseller_options_value"
                                       type="number"
                                       min="1"
                                       value="10240"
                                       name="reseller_quota_value"
                                       id="reseller_quota_value">
                                <span class="input-group-text">MB</span>
                            </div>
                        </div>
                    </div>
                    <input type="hidden"
                           name="reseller_quota"
                           value=""
                           class="reseller_quota"
                           id="reseller_quota">
                </div>
                <!-- Bandwidth -->
                <div class="row align-items-center g-3 mb-3 reseller_options">
                    <div class="col-md-6">
                        <label for="reseller_bandwidth_value" class="form-label mb-0">{% translate "Bandwidth Limit" %}</label>
                        <div class="small text-muted">{% translate "Limit the bandwidth available to accounts managed by this reseller." %}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <div class="form-check">
                                <input type="radio"
                                       name="reseller_bandwidth_option"
                                       value="unlimited"
                                       class="form-check-input reseller_bandwidth_option reseller_options disablethis reseller_bandwidth_off reseller_bandwidth_unlimited"
                                       id="reseller_bandwidth_unlimited">
                                <label class="form-check-label" for="reseller_bandwidth_unlimited">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="reseller_bandwidth_option"
                                       value="on"
                                       class="form-check-input reseller_bandwidth_option reseller_options enablethis reseller_bandwidth_on"
                                       id="reseller_bandwidth_on">
                                <label class="form-check-label" for="reseller_bandwidth_on">{% translate "Limit" %}</label>
                            </div>
                            <div class="input-group" style="max-width:160px">
                                <input class="form-control reseller_bandwidth_value reseller_options_value"
                                       type="number"
                                       min="1"
                                       value="102400"
                                       name="reseller_bandwidth_value"
                                       id="reseller_bandwidth_value">
                                <span class="input-group-text">MB</span>
                            </div>
                        </div>
                    </div>
                    <input type="hidden"
                           name="reseller_bandwidth"
                           value=""
                           class="reseller_bandwidth"
                           id="reseller_bandwidth">
                </div>
            </div>
            <hr class="my-4">
            <!-- Registrar NS -->
            <div class="form-check mb-3">
                <input class="form-check-input"
                       type="checkbox"
                       name="use_registrar_ns"
                       id="chk_ns">
                <label class="form-check-label" for="chk_ns">{% translate "Use domain registrar name servers from the WHOIS database when available." %}</label>
            </div>
            <!-- DKIM -->
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" name="dkim" id="chk_dkim">
                <label class="form-check-label" for="chk_dkim">{% translate "Enable DomainKeys Identified Mail (DKIM)" %}</label>
            </div>
            <!-- SPF -->
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="spf" id="chk_spf">
                <label class="form-check-label" for="chk_spf">{% translate "Enable Sender Policy Framework (SPF)" %}</label>
            </div>
        </div>
        <!-- =========================================================
         CREATE ACCOUNT ACTION
    ========================================================== -->
        <div class="mb-4">
            <button type="button" class="btn btn-primary createacct" name="create">
                <i data-lucide="user-plus"></i>
                {% translate "Create Account" %}
            </button>
        </div>
        <input type="hidden" name="createaact" id="createacct">
    </form>
    <!-- =========================================================
     CREATE ACCOUNT CONFIRMATION MODAL
========================================================== -->
    <div class="modal fade"
         id="createAccountModal"
         tabindex="-1"
         aria-labelledby="createAccountModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createAccountModalLabel">
                        <i data-lucide="user-plus" class="me-2"></i>
                        {% translate "Create New Account" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">
                        {% translate "You are about to create the hosting account for" %}
                        <strong id="confirmAccountDomain"></strong>.
                    </p>
                    <div class="eenos-notice eenos-notice-info">
                        <div class="eenos-notice-icon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Ready to Create Account" %}</div>
                            <div class="eenos-notice-text">{% translate "The account will be created using the selected hosting package and account settings. Please confirm to continue." %}</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button"
                            class="btn btn-success btn-sm"
                            id="confirmCreateAccount">
                        <i data-lucide="user-plus"></i>
                        {% translate "Create Account" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>

$(function () {

    /*
     * ---------------------------------------------------------
     * Reseller defaults
     * ---------------------------------------------------------
     */

    $(".reseller_limt_unlimited").prop("checked", true);
    $(".reseller_limt_value").prop("disabled", true);

    $(".reseller_quota_unlimited").prop("checked", true);
    $(".reseller_quota_value").prop("disabled", true);

    $(".reseller_bandwidth_unlimited").prop("checked", true);
    $(".reseller_bandwidth_value").prop("disabled", true);


    /*
 * ---------------------------------------------------------
 * Reseller account limit
 * ---------------------------------------------------------
 */

$('input[name="reseller_limt_option"]').on("change", function () {

    const enabled = $(this).hasClass("enablethis");
    const $input = $(".reseller_limt_value");

    $input.prop("disabled", !enabled);

    if (enabled) {
        $input.attr("data-parsley-required", "true");
        $input.attr(
            "data-parsley-required-message",
            "{% translate 'Please enter an account limit.' %}"
        );

        $input.parsley().refresh();

        $input.trigger("focus");

    } else {

        $input.removeAttr("data-parsley-required");
        $input.parsley().reset();
    }
});


/*
 * ---------------------------------------------------------
 * Reseller disk quota
 * ---------------------------------------------------------
 */

$('input[name="reseller_quota_option"]').on("change", function () {

    const enabled = $(this).hasClass("enablethis");
    const $input = $(".reseller_quota_value");

    $input.prop("disabled", !enabled);

    if (enabled) {
        $input.attr("data-parsley-required", "true");
        $input.attr(
            "data-parsley-required-message",
            "{% translate 'Please enter a disk quota.' %}"
        );

        $input.parsley().refresh();

        $input.trigger("focus");

    } else {

        $input.removeAttr("data-parsley-required");
        $input.parsley().reset();
    }
});


/*
 * ---------------------------------------------------------
 * Reseller bandwidth
 * ---------------------------------------------------------
 */

$('input[name="reseller_bandwidth_option"]').on("change", function () {

    const enabled = $(this).hasClass("enablethis");
    const $input = $(".reseller_bandwidth_value");

    $input.prop("disabled", !enabled);

    if (enabled) {
        $input.attr("data-parsley-required", "true");
        $input.attr(
            "data-parsley-required-message",
            "{% translate 'Please enter a bandwidth limit.' %}"
        );

        $input.parsley().refresh();

        $input.trigger("focus");

    } else {

        $input.removeAttr("data-parsley-required");
        $input.parsley().reset();
    }
});

    /*
    * ---------------------------------------------------------
    * Reseller options
    * ---------------------------------------------------------
    */

    $(".reseller_div").hide();

    $("#chk_resellerself").prop("disabled", true);
    $(".reseller_options").prop("disabled", true);

    $('input[name="reseller"]').on("change", function () {

        const enabled = $(this).is(":checked");

        $("#chk_resellerself").prop("disabled", !enabled);
        $(".reseller_options").prop("disabled", !enabled);

        if (enabled) {

            $(".reseller_div").show();

        } else {

            $(".reseller_div").hide();

            /*
            * Remove conditional Parsley requirements.
            */

            $(".reseller_limt_value, .reseller_quota_value, .reseller_bandwidth_value")
                .removeAttr("data-parsley-required")
                .each(function () {
                    $(this).parsley().reset();
                });
        }
    });


    /*
     * Account defaults
     */

    $(".mailserver_default").prop("checked", true);

    $("#chk_dkim").prop("checked", true);
    $("#chk_spf").prop("checked", true);


    /*
     * Create account
     */

    $(".createacct").on("click", function (event) {
        event.preventDefault();

        const $form = $("#create_form");

        if (!$form.length) {
            return;
        }

        const parsleyForm = $form.parsley();

        parsleyForm.validate();

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

        $("#confirmAccountDomain")
            .text($("#domain").val().trim());

        const modal = bootstrap.Modal.getOrCreateInstance(
            document.getElementById("createAccountModal")
        );

        modal.show();
    });


    /*
     * Confirm account creation
     */

    $("#confirmCreateAccount").on("click", function () {
        $("#createacct").val("yes");
        $("#create_form").trigger("submit");
    });

});

    </script>
{% endblock %}