{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Make Reseller" %} - Eenos
{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Make Reseller" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Grant an existing hosting account access to reseller tools and subaccount management." %}
            </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 "Make Reseller" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div>
                <div class="eenos-panel-title">{% translate "Eligible Hosting Accounts" %}</div>
                <div class="eenos-panel-subtitle">
                    {% translate "Select an active hosting account and configure its reseller privileges and resource limits." %}
                </div>
            </div>
        </div>
        <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 "Reseller privileges" %}</div>
                <div class="eenos-notice-text">
                    {% translate "The account will retain its existing hosting services and gain access to the reseller interface for creating and managing subaccounts." %}
                </div>
            </div>
        </div>
        <form action=""
              class="login-form"
              name="featurelist"
              id="featurelist"
              method="POST">
            {% csrf_token %}
            <table id="eenos-data-table"
                   class="table table-sm table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>{% translate "User" %}</th>
                        <th>{% translate "Domain" %}</th>
                        <th>{% translate "Current Plan" %}</th>
                        <th class="text-end">{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </form>
    </div>
    <form action=""
          class="option_edit_account d-none"
          id="change_edit_form"
          method="POST">
        {% csrf_token %}
        <input type="hidden" name="make_reseller" id="makereseller">
        <input type="hidden" name="selfown" id="selfown">
        <input type="hidden" name="user" id="ruser">
        <input type="hidden"
               name="reseller_limt"
               class="reseller_limt"
               id="reseller_limt">
        <input type="hidden"
               name="reseller_quota"
               class="reseller_quota"
               id="reseller_quota">
        <input type="hidden"
               name="reseller_bandwidth"
               class="reseller_bandwidth"
               id="reseller_bandwidth">
    </form>
    <div class="modal fade"
         id="makeResellerModal"
         tabindex="-1"
         aria-labelledby="makeResellerModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <form id="resellerEntryForm" class="modal-content eenos-form" novalidate>
                <div class="modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="eenos-modal-icon eenos-modal-icon-primary">
                            <i data-lucide="users-round"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="makeResellerModalLabel">{% translate "Convert Account to Reseller" %}</h5>
                            <div class="text-muted small">{% translate "Configure reseller ownership and resource limits." %}</div>
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-4">
                        <div class="col-12 col-md-6">
                            <div class="eenos-modal-account h-100">
                                <div class="eenos-modal-account-icon">
                                    <i data-lucide="user"></i>
                                </div>
                                <div class="eenos-modal-account-info">
                                    <div class="eenos-modal-label">{% translate "Hosting Account" %}</div>
                                    <div id="makeResellerUser" class="eenos-modal-account-name"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="eenos-modal-info h-100">
                                <div class="eenos-modal-info-icon">
                                    <i data-lucide="globe"></i>
                                </div>
                                <div class="eenos-modal-info-content">
                                    <div class="eenos-modal-info-label">{% translate "Domain" %}</div>
                                    <div id="makeResellerDomain" class="eenos-modal-info-value"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" type="checkbox" id="resellerSelfOwn">
                        <label class="form-check-label fw-medium" for="resellerSelfOwn">{% translate "Allow reseller to own this account" %}</label>
                        <div class="form-text">
                            {% translate "When enabled, the converted account is included under its own reseller ownership." %}
                        </div>
                    </div>
                    <div class="row g-4">
                        <div class="col-12 col-lg-4">
                            <label for="resellerLimitValue" class="form-label fw-medium">{% translate "Subaccount Limit" %}</label>
                            <div class="d-flex gap-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input reseller-limit-option"
                                           type="radio"
                                           name="reseller_limit_option"
                                           id="resellerLimitUnlimited"
                                           value="unlimited"
                                           checked>
                                    <label class="form-check-label" for="resellerLimitUnlimited">{% translate "Unlimited" %}</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input reseller-limit-option"
                                           type="radio"
                                           name="reseller_limit_option"
                                           id="resellerLimitCustom"
                                           value="custom">
                                    <label class="form-check-label" for="resellerLimitCustom">{% translate "Limit" %}</label>
                                </div>
                            </div>
                            <input type="number"
                                   class="form-control"
                                   id="resellerLimitValue"
                                   min="1"
                                   disabled
                                   placeholder="{% translate 'Number of accounts' %}"
                                   data-parsley-required-message="{% translate 'Enter the maximum number of subaccounts.' %}">
                        </div>
                        <div class="col-12 col-lg-4">
                            <label for="resellerQuotaValue" class="form-label fw-medium">{% translate "Disk Quota" %}</label>
                            <div class="d-flex gap-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input reseller-quota-option"
                                           type="radio"
                                           name="reseller_quota_option"
                                           id="resellerQuotaUnlimited"
                                           value="unlimited"
                                           checked>
                                    <label class="form-check-label" for="resellerQuotaUnlimited">{% translate "Unlimited" %}</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input reseller-quota-option"
                                           type="radio"
                                           name="reseller_quota_option"
                                           id="resellerQuotaCustom"
                                           value="custom">
                                    <label class="form-check-label" for="resellerQuotaCustom">{% translate "Limit" %}</label>
                                </div>
                            </div>
                            <div class="input-group">
                                <input type="number"
                                       class="form-control"
                                       id="resellerQuotaValue"
                                       min="1"
                                       disabled
                                       placeholder="{% translate 'Disk quota' %}"
                                       data-parsley-required-message="{% translate 'Enter the reseller disk quota.' %}">
                                <span class="input-group-text">MB</span>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <label for="resellerBandwidthValue" class="form-label fw-medium">{% translate "Bandwidth Limit" %}</label>
                            <div class="d-flex gap-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input reseller-bandwidth-option"
                                           type="radio"
                                           name="reseller_bandwidth_option"
                                           id="resellerBandwidthUnlimited"
                                           value="unlimited"
                                           checked>
                                    <label class="form-check-label" for="resellerBandwidthUnlimited">{% translate "Unlimited" %}</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input reseller-bandwidth-option"
                                           type="radio"
                                           name="reseller_bandwidth_option"
                                           id="resellerBandwidthCustom"
                                           value="custom">
                                    <label class="form-check-label" for="resellerBandwidthCustom">{% translate "Limit" %}</label>
                                </div>
                            </div>
                            <div class="input-group">
                                <input type="number"
                                       class="form-control"
                                       id="resellerBandwidthValue"
                                       min="1"
                                       disabled
                                       placeholder="{% translate 'Bandwidth limit' %}"
                                       data-parsley-required-message="{% translate 'Enter the reseller bandwidth limit.' %}">
                                <span class="input-group-text">MB</span>
                            </div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning mt-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Privilege change" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "This account will gain reseller access and permission to create subaccounts within the limits configured above." %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i> {% translate "Cancel" %}
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" id="makeResellerConfirm">
                        <i data-lucide="users-round"></i> {% translate "Make Reseller" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
  $(function () {
    let selectedUser = "";

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

    function escapeHtml(value) {
      return $("<div>").text(value || "").html();
    }

    function resetLimit(optionName, unlimitedId, inputId) {
      $(`input[name="${optionName}"][value="unlimited"]`).prop("checked", true);
      $(inputId)
        .val("")
        .prop("disabled", true)
        .removeAttr("required");
    }

    function bindLimitOptions(optionName, inputId) {
      $(`input[name="${optionName}"]`).on("change", function () {
        const custom = $(`input[name="${optionName}"]:checked`).val() === "custom";
        const $input = $(inputId);

        $input
          .prop("disabled", !custom)
          .prop("required", custom);

        if (custom) {
          $input.trigger("focus");
        } else {
          $input.val("");
          $input.parsley().reset();
        }
      });
    }

    function limitValue(optionName, inputId) {
      return $(`input[name="${optionName}"]:checked`).val() === "unlimited"
        ? "unlimited"
        : $(inputId).val();
    }

    bindLimitOptions("reseller_limit_option", "#resellerLimitValue");
    bindLimitOptions("reseller_quota_option", "#resellerQuotaValue");
    bindLimitOptions("reseller_bandwidth_option", "#resellerBandwidthValue");

    const currentUser = "{{ request.session.user|escapejs }}";
    const table = $("#eenos-data-table").DataTable({
      responsive: {
        details: {
          renderer: DataTable.Responsive.renderer.listHiddenNodes()
        }
      },
      processing: true,
      pageLength: 25,
      lengthMenu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, "{% translate 'All' %}"]
      ],
      ajax: {
        url: "{% url 'hosting_users_data' %}",
        type: "GET",
        dataSrc: function (json) {
          return (json.data || []).filter(function (row) {
            return row.status === "active" && !row.is_reseller && String(row.username || "") !== currentUser;
          });
        }
      },
      order: [[0, "asc"]],
      columns: [
        {
          data: "username",
          width: "180px",
          className: "text-nowrap",
          responsivePriority: 1,
          render: function (data, type) {
            return type === "display"
              ? `<span class="fw-semibold">${escapeHtml(data) || "-"}</span>`
              : data;
          }
        },
        {
          data: "domain",
          responsivePriority: 2,
          render: function (data, type) {
            if (type !== "display") return data;
            if (!data) return '<span class="text-muted">-</span>';
            const domain = escapeHtml(data);
            return `<a href="https://${domain}" target="_blank" rel="noopener noreferrer">${domain}</a>`;
          }
        },
        {
          data: "package",
          responsivePriority: 3,
          render: function (data, type) {
            if (type !== "display") return data;
            return data
              ? `<span class="badge bg-light text-dark border fw-medium">${escapeHtml(data)}</span>`
              : '<span class="text-muted">-</span>';
          }
        },
        {
          data: null,
          orderable: false,
          searchable: false,
          width: "70px",
          className: "text-end text-nowrap",
          responsivePriority: 1,
          render: function (data, type, row) {
            if (type !== "display") return "";
            const user = escapeHtml(row.username || "");
            const domain = escapeHtml(row.domain || "");
            return `<div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-primary make_reseller" value="${user}" data-domain="${domain}" title="{% translate 'Make Reseller' %}" aria-label="{% translate 'Make Reseller' %}"><i data-lucide="users-round"></i></button></div>`;
          }
        }
      ],
      language: {
        loadingRecords: "&nbsp;",
        processing: '{% translate "Loading..." %}',
        emptyTable: "{% translate 'No eligible hosting accounts are available.' %}",
        zeroRecords: "{% translate 'No matching eligible accounts found.' %}",
        search: "{% translate 'Search:' %}",
        lengthMenu: "{% translate 'Show' %} _MENU_",
        info: "{% translate 'Showing _START_ to _END_ of _TOTAL_ eligible accounts' %}"
      },
      drawCallback: function () {
        if (typeof lucide !== "undefined") lucide.createIcons();
      }
    });

    table.on("responsive-display", function () {
      if (typeof lucide !== "undefined") lucide.createIcons();
    });

    $(document).on("click", ".make_reseller", function () {
      selectedUser = String($(this).val() || "");
      $("#makeResellerUser").text(selectedUser);
      $("#makeResellerDomain").text($(this).data("domain") || "-");
      $("#resellerSelfOwn").prop("checked", false);
      resetLimit("reseller_limit_option", "#resellerLimitUnlimited", "#resellerLimitValue");
      resetLimit("reseller_quota_option", "#resellerQuotaUnlimited", "#resellerQuotaValue");
      resetLimit("reseller_bandwidth_option", "#resellerBandwidthUnlimited", "#resellerBandwidthValue");
      $("#resellerEntryForm").parsley().reset();
      makeResellerModal.show();
    });

    $("#makeResellerConfirm").on("click", function () {
      const parsleyForm = $("#resellerEntryForm").parsley();
      parsleyForm.validate();
      if (!parsleyForm.isValid()) return;

      $("#makereseller").val("yes");
      $("#selfown").val($("#resellerSelfOwn").is(":checked") ? "on" : "off");
      $("#ruser").val(selectedUser);
      $("#reseller_limt").val(limitValue("reseller_limit_option", "#resellerLimitValue"));
      $("#reseller_quota").val(limitValue("reseller_quota_option", "#resellerQuotaValue"));
      $("#reseller_bandwidth").val(limitValue("reseller_bandwidth_option", "#resellerBandwidthValue"));
      $("#change_edit_form").trigger("submit");
    });
  });
    </script>
{% endblock %}