{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Change Account Ownership" %} - Eenos
{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Change Account Ownership" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Transfer hosting accounts between the root administrator and reseller accounts." %}
            </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 "Change Ownership" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Hosting Account Ownership" %}</div>
            <div class="eenos-panel-subtitle">
                {% translate "Select one or more active accounts and assign their management responsibility to a new owner." %}
            </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 "Ownership transfer" %}</div>
                <div class="eenos-notice-text">
                    {% translate "The new owner will manage the selected accounts through the reseller interface. Account services and data remain unchanged." %}
                </div>
            </div>
        </div>
        <div class="mb-3">
            <button type="button" class="btn btn-primary btn-sm bulk_change">
                <i data-lucide="users-round"></i>
                {% translate "Bulk Change Ownership" %}
            </button>
        </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>
                            <input type="checkbox"
                                   class="form-check-input checkAll"
                                   aria-label="{% translate 'Select all accounts on this page' %}">
                        </th>
                        <th>{% translate "User" %}</th>
                        <th>{% translate "Domain" %}</th>
                        <th>{% translate "Current Owner" %}</th>
                        <th>{% translate "Account Type" %}</th>
                        <th class="text-end">{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </form>
    </div>
    <form action=""
          class="option_owner_account d-none"
          id="change_owner_form"
          method="POST">
        {% csrf_token %}
        <input type="hidden" name="change_owner" id="chgowner">
        <input type="hidden" name="owner" id="owner">
        <input type="hidden" name="user" id="chg_usr">
    </form>
    <form action=""
          class="multi-suspend d-none"
          id="multi_owner_form"
          method="POST">
        {% csrf_token %}
        <input type="hidden" name="userlist" id="multiuser">
        <input type="hidden" name="owner" id="mowner">
        <input type="hidden" name="bulk_change" id="multichgowner">
    </form>
    <div class="modal fade"
         id="changeOwnerModal"
         tabindex="-1"
         aria-labelledby="changeOwnerModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="ownerEntryForm" 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="user-cog"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="changeOwnerModalLabel">{% translate "Change Account Owner" %}</h5>
                            <div class="text-muted small">{% translate "Transfer this hosting account to another owner." %}</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="eenos-modal-account mb-3">
                        <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="changeOwnerUser" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <div class="eenos-modal-info mb-4">
                        <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="changeOwnerDomain" class="eenos-modal-info-value"></div>
                        </div>
                    </div>
                    <div class="eenos-plan-change mb-4">
                        <div class="eenos-plan-item">
                            <div class="eenos-plan-icon">
                                <i data-lucide="user-round"></i>
                            </div>
                            <div class="eenos-plan-content">
                                <div class="eenos-modal-label">{% translate "Current Owner" %}</div>
                                <div id="changeOwnerCurrent" class="eenos-plan-name font-monospace"></div>
                            </div>
                        </div>
                        <div class="eenos-plan-arrow">
                            <i data-lucide="arrow-right"></i>
                        </div>
                        <div class="eenos-plan-item">
                            <div class="eenos-plan-icon eenos-plan-icon-primary">
                                <i data-lucide="user-check"></i>
                            </div>
                            <div class="eenos-plan-content">
                                <div class="eenos-modal-label">{% translate "New Owner" %}</div>
                                <div class="text-muted small">{% translate "Select below" %}</div>
                            </div>
                        </div>
                    </div>
                    <label for="newOwner" class="form-label fw-medium">{% translate "New Owner" %}</label>
                    <select class="form-select eenos-select-search"
                            id="newOwner"
                            name="new_owner"
                            required
                            data-parsley-required-message="{% translate 'Please select an owner.' %}">
                        <option value="">{% translate "Select New Owner" %}</option>
                        <option value="root">root</option>
                        {% for r in resellers %}
                            <option value="{{ r }}">{{ r }}</option>
                        {% endfor %}
                    </select>
                    <div class="form-text">{% translate "Select root or the reseller who will manage this account." %}</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="changeOwnerConfirm">
                        <i data-lucide="arrow-right-left"></i> {% translate "Change Owner" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade"
         id="bulkOwnerModal"
         tabindex="-1"
         aria-labelledby="bulkOwnerModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="bulkOwnerEntryForm" 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="bulkOwnerModalLabel">{% translate "Change Multiple Account Owners" %}</h5>
                            <div class="text-muted small">{% translate "Assign all selected accounts to the same owner." %}</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="small text-muted mb-1">{% translate "Selected accounts" %}</div>
                    <div id="bulkOwnerUsers" class="font-monospace text-break mb-4"></div>
                    <label for="bulkNewOwner" class="form-label fw-medium">{% translate "New Owner" %}</label>
                    <select class="form-select eenos-select-search"
                            id="bulkNewOwner"
                            name="bulk_new_owner"
                            required
                            data-parsley-required-message="{% translate 'Please select an owner.' %}">
                        <option value="">{% translate "Select New Owner" %}</option>
                        <option value="root">root</option>
                        {% for r in resellers %}
                            <option value="{{ r }}">{{ r }}</option>
                        {% endfor %}
                    </select>
                    <div class="form-text">{% translate "The selected owner will manage every account listed above." %}</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="bulkOwnerConfirm">
                        <i data-lucide="arrow-right-left"></i> {% translate "Change Ownership" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade"
         id="selectionRequiredModal"
         tabindex="-1"
         aria-labelledby="selectionRequiredModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="selectionRequiredModalLabel">{% translate "Input Error" %}</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">{% translate "Select at least one account before changing ownership." %}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal">{% translate "OK" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
  $(function () {
    const selectedUsers = new Set();
    let selectedUser = "";

    const changeOwnerModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("changeOwnerModal"));
    const bulkOwnerModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("bulkOwnerModal"));
    const selectionRequiredModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("selectionRequiredModal"));

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

    function updateSelectAll() {
      const $visible = $("#eenos-data-table tbody .user-check");
      const checked = $visible.filter(":checked").length;
      $(".checkAll")
        .prop("checked", $visible.length > 0 && checked === $visible.length)
        .prop("indeterminate", checked > 0 && checked < $visible.length);
    }

    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";
          });
        }
      },
      order: [[1, "asc"]],
      columns: [
        {
          data: "username",
          orderable: false,
          searchable: false,
          width: "60px",
          className: "text-nowrap align-middle",
          responsivePriority: 1,
          render: function (data, type) {
            if (type !== "display") return data;
            const user = escapeHtml(data);
            const checked = selectedUsers.has(String(data)) ? " checked" : "";
            return `<input type="checkbox" class="form-check-input user-check mt-0 align-middle" name="user_check" value="${user}" aria-label="{% translate 'Select account' %} ${user}"${checked}>`;
          }
        },
        {
          data: "username",
          width: "180px",
          className: "text-nowrap",
          responsivePriority: 2,
          render: function (data, type) {
            return type === "display" ? `<span class="fw-semibold">${escapeHtml(data) || "-"}</span>` : data;
          }
        },
        {
          data: "domain",
          responsivePriority: 3,
          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: "owner",
          className: "text-nowrap",
          responsivePriority: 4,
          render: function (data, type) {
            return type === "display"
              ? `<span class="font-monospace">${escapeHtml(data) || "root"}</span>`
              : data;
          }
        },
        {
          data: "is_reseller",
          width: "150px",
          className: "text-nowrap",
          responsivePriority: 5,
          render: function (data, type) {
            if (type !== "display") return data;
            return data
              ? '<span class="badge eenos-badge-primary">{% translate "Reseller" %}</span>'
              : '<span class="badge eenos-badge-neutral">{% translate "Hosting" %}</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 || "");
            const owner = escapeHtml(row.owner || "root");
            return `<div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-primary change_owner" value="${user}" data-domain="${domain}" data-owner="${owner}" title="{% translate 'Change Owner' %}" aria-label="{% translate 'Change Owner' %}"><i data-lucide="user-cog"></i></button></div>`;
          }
        }
      ],
      language: {
        loadingRecords: "&nbsp;",
        processing: '{% translate "Loading..." %}',
        emptyTable: "{% translate 'No active hosting accounts are available.' %}",
        zeroRecords: "{% translate 'No matching active accounts found.' %}",
        search: "{% translate 'Search:' %}",
        lengthMenu: "{% translate 'Show' %} _MENU_",
        info: "{% translate 'Showing _START_ to _END_ of _TOTAL_ active accounts' %}"
      },
      drawCallback: function () {
        $("#eenos-data-table tbody .user-check").each(function () {
          $(this).prop("checked", selectedUsers.has(String(this.value)));
        });
        updateSelectAll();
        if (typeof lucide !== "undefined") lucide.createIcons();
      }
    });

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

    $(document).on("change", ".user-check", function () {
      if (this.checked) selectedUsers.add(String(this.value));
      else selectedUsers.delete(String(this.value));
      updateSelectAll();
    });

    $(document).on("change", ".checkAll", function () {
      const checked = this.checked;
      $("#eenos-data-table tbody .user-check").each(function () {
        $(this).prop("checked", checked);
        if (checked) selectedUsers.add(String(this.value));
        else selectedUsers.delete(String(this.value));
      });
      updateSelectAll();
    });

    $(document).on("click", ".change_owner", function () {
      selectedUser = String($(this).val() || "");
      $("#changeOwnerUser").text(selectedUser);
      $("#changeOwnerDomain").text($(this).data("domain") || "-");
      $("#changeOwnerCurrent").text($(this).data("owner") || "root");
      $("#newOwner").val("").trigger("change");
      $("#ownerEntryForm").parsley().reset();
      changeOwnerModal.show();
    });

    $("#changeOwnerConfirm").on("click", function () {
      const parsleyForm = $("#ownerEntryForm").parsley();
      parsleyForm.validate();
      if (!parsleyForm.isValid()) return;
      $("#owner").val($("#newOwner").val());
      $("#chgowner").val("yes");
      $("#chg_usr").val(selectedUser);
      $("#change_owner_form").trigger("submit");
    });

    $(".bulk_change").on("click", function () {
      const users = Array.from(selectedUsers);
      if (!users.length) {
        selectionRequiredModal.show();
        return;
      }
      $("#bulkOwnerUsers").text(users.join(", "));
      $("#bulkNewOwner").val("").trigger("change");
      $("#bulkOwnerEntryForm").parsley().reset();
      bulkOwnerModal.show();
    });

    $("#bulkOwnerConfirm").on("click", function () {
      const parsleyForm = $("#bulkOwnerEntryForm").parsley();
      parsleyForm.validate();
      if (!parsleyForm.isValid()) return;
      $("#multiuser").val(Array.from(selectedUsers).join(","));
      $("#mowner").val($("#bulkNewOwner").val());
      $("#multichgowner").val("yes");
      $("#multi_owner_form").trigger("submit");
    });
  });
    </script>
{% endblock %}