{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Create User" %} - Eenos
{% endblock title %}
{% 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>
        <span>{% translate "User Accounts" %}</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 "Create User" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    {% if havepackages %}
        <form action=""
              class="eenos-form create_user"
              method="POST"
              name="createuser"
              id="create_form">
            {% csrf_token %}
            <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>
            <div class="row g-4 mb-4">
                <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">
                            <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>
                            <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>
                            <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"
                                               minlength="8"
                                               autocomplete="new-password"
                                               value=""
                                               data-parsley-required="true"
                                               data-parsley-required-message="{% translate 'Please enter a password.' %}"
                                               data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}">
                                        <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>
                                        <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>
                                    <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>
                            <div>
                                <label for="repassword" class="form-label">{% translate "Re-enter Password" %}</label>
                                <input type="password"
                                       class="form-control"
                                       id="repassword"
                                       name="repassword"
                                       minlength="8"
                                       autocomplete="new-password"
                                       value=""
                                       data-parsley-required="true"
                                       data-parsley-required-message="{% translate 'Please re-enter the password.' %}"
                                       data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}"
                                       data-parsley-equalto="#password"
                                       data-parsley-equalto-message="{% translate 'Passwords do not match.' %}">
                            </div>
                            <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>
                            <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 package in packages %}
                                                <option value="{{ package }}">{{ package }}</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>
                <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, and mail delivery settings." %}
                            </div>
                        </div>
                        <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>
                        <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.' %}">
                                {% for usertheme in themes %}
                                    <option value="{{ usertheme }}"
                                            {% if usertheme == "default" %} selected{% endif %}>{{ usertheme }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <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">
                                <div class="form-check">
                                    <input type="radio"
                                           name="mailserver"
                                           value="local"
                                           class="form-check-input disablethis mailserver_default"
                                           id="mailserver_local"
                                           required
                                           data-parsley-required-message="{% translate 'Please select a mail delivery option.' %}">
                                    <label class="form-check-label" for="mailserver_local">{% translate "Local" %}</label>
                                </div>
                                <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>
            <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>
                {% if request.session.tweaksettings.resellerchain == "on" %}
                    <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>
                    <div class="reseller_div ps-3 ps-md-4 border-start">
                        <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>
                        <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="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <div class="form-check mb-0">
                                            <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>
                                    <div class="col-auto">
                                        <div class="form-check mb-0">
                                            <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>
                                    </div>
                                    <div class="col-auto">
                                        <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>
                            </div>
                            <input type="hidden"
                                   name="reseller_limt"
                                   value=""
                                   class="reseller_limt"
                                   id="reseller_limt">
                        </div>
                        <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="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <div class="form-check mb-0">
                                            <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>
                                    <div class="col-auto">
                                        <div class="form-check mb-0">
                                            <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>
                                    <div class="col-auto">
                                        <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>
                            </div>
                            <input type="hidden"
                                   name="reseller_quota"
                                   value=""
                                   class="reseller_quota"
                                   id="reseller_quota">
                        </div>
                        <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="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <div class="form-check mb-0">
                                            <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>
                                    <div class="col-auto">
                                        <div class="form-check mb-0">
                                            <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>
                                    <div class="col-auto">
                                        <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>
                            </div>
                            <input type="hidden"
                                   name="reseller_bandwidth"
                                   value=""
                                   class="reseller_bandwidth"
                                   id="reseller_bandwidth">
                        </div>
                    </div>
                    <hr class="my-4">
                {% endif %}
                <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>
                <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>
                <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>
            <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>
        <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>
    {% else %}
        <div class="eenos-card">
            <div class="eenos-card-header">
                <div>
                    <div class="eenos-panel-title">{% translate "No Hosting Packages Available" %}</div>
                    <div class="eenos-panel-subtitle">{% translate "Create a hosting package before adding your first hosting account." %}</div>
                </div>
                <i data-lucide="package-plus" class="eenos-card-action-icon"></i>
            </div>
            <a href="{% url 'addpkg' %}" class="btn btn-primary">
                <i data-lucide="plus"></i>
                {% translate "Create Hosting Package" %}
            </a>
        </div>
    {% endif %}
{% endblock content %}
{% block extra_js %}
    <script>
        $(function () {
          const limitFields = [
            {
              name: "reseller_limt_option",
              input: ".reseller_limt_value",
              unlimited: ".reseller_limt_unlimited",
              message: "{% translate 'Please enter an account limit.' %}"
            },
            {
              name: "reseller_quota_option",
              input: ".reseller_quota_value",
              unlimited: ".reseller_quota_unlimited",
              message: "{% translate 'Please enter a disk quota.' %}"
            },
            {
              name: "reseller_bandwidth_option",
              input: ".reseller_bandwidth_value",
              unlimited: ".reseller_bandwidth_unlimited",
              message: "{% translate 'Please enter a bandwidth limit.' %}"
            }
          ];

          limitFields.forEach(function (field) {
            const $input = $(field.input);
            $(field.unlimited).prop("checked", true);
            $input.prop("disabled", true);

            $(`input[name="${field.name}"]`).on("change", function () {
              const enabled = $(this).hasClass("enablethis");
              $input.prop("disabled", !enabled);

              if (enabled) {
                $input
                  .attr("data-parsley-required", "true")
                  .attr("data-parsley-required-message", field.message)
                  .parsley()
                  .refresh();
                $input.trigger("focus");
              } else {
                $input.removeAttr("data-parsley-required").parsley().reset();
              }
            });
          });

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

          $('input[name="reseller"]').on("change", function () {
            const enabled = $(this).is(":checked");
            $("#chk_resellerself, .reseller_options").prop("disabled", !enabled);
            $(".reseller_div").toggle(enabled);

            if (enabled) {
              limitFields.forEach(function (field) {
                $(`input[name="${field.name}"]:checked`).trigger("change");
              });
            } else {
              $(".reseller_limt_value, .reseller_quota_value, .reseller_bandwidth_value")
                .removeAttr("data-parsley-required")
                .each(function () {
                  $(this).parsley().reset();
                });
            }
          });

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

          $(".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;

            if ($("#chk_reseller").is(":checked")) {
              const selectedValue = function (name, input) {
                return $(`input[name="${name}"]:checked`).val() === "unlimited"
                  ? "unlimited"
                  : $(input).val().trim();
              };

              $("#reseller_limt").val(selectedValue("reseller_limt_option", "#reseller_limt_value"));
              $("#reseller_quota").val(selectedValue("reseller_quota_option", "#reseller_quota_value"));
              $("#reseller_bandwidth").val(selectedValue("reseller_bandwidth_option", "#reseller_bandwidth_value"));
            }

            $("#confirmAccountDomain").text($("#domain").val().trim());
            bootstrap.Modal.getOrCreateInstance(document.getElementById("createAccountModal")).show();
          });

          $("#confirmCreateAccount").on("click", function () {
            $("#createacct").val("yes");
            $("#create_form").trigger("submit");
          });
        });
    </script>
{% endblock extra_js %}