{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Modify Account" %} - Eenos
{% endblock %}
{% block content %}
    <!-- =====================================================
     PAGE HEADER
====================================================== -->
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Modify Account" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Choose a hosting account to modify its settings." %}</div>
        </div>
    </div>
    <!-- =====================================================
     BREADCRUMB
====================================================== -->
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "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 "Modify Account" %}</span>
    </nav>
    <!-- =====================================================
     FORM ALERTS
====================================================== -->
    {% include "includes/form_alerts.html" %}
    <!-- =====================================================
     MODIFY ACCOUNT LIST
====================================================== -->
    <div class="eenos-card">
        <div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-4">
            <div>
                <div class="eenos-panel-title">{% translate "Modify Hosting Accounts" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Choose an active hosting account to modify its settings." %}</div>
            </div>
        </div>
        <!-- =================================================
         ACCOUNT TABLE
    ================================================== -->
        <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 "Hosting Plan" %}</th>
                    <th>{% translate "Status" %}</th>
                    <th class="text-end">{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- =====================================================
     MODIFY ACCOUNT CONFIRMATION MODAL
====================================================== -->
    <div class="modal fade"
         id="modifyAccountModal"
         tabindex="-1"
         aria-labelledby="modifyAccountModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- Header -->
                <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="settings-2"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="modifyAccountModalLabel">{% translate "Modify Account" %}</h5>
                            <div class="eenos-modal-subtitle">{% translate "Review the hosting account before modifying its settings." %}</div>
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <!-- Body -->
                <div class="modal-body">
                    <!-- Hosting Account -->
                    <div class="eenos-modal-info mb-3">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Hosting Account" %}</div>
                            <div id="modifyAccountUser" class="eenos-modal-info-value"></div>
                        </div>
                    </div>
                    <!-- Domain -->
                    <div class="eenos-modal-info mb-3">
                        <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="modifyAccountDomain" class="eenos-modal-info-value"></div>
                        </div>
                    </div>
                    <!-- Information Notice -->
                    <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 "Modify Account Settings" %}</div>
                            <div class="eenos-notice-text">{% translate "You can modify the hosting account settings, resources, domain configuration, and other account options." %}</div>
                        </div>
                    </div>
                </div>
                <!-- Footer -->
                <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="modifyAccountConfirm">
                        <i data-lucide="settings-2"></i>
                        {% translate "Modify Account" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- =====================================================
     HIDDEN MODIFY FORM
====================================================== -->
    <form action="" id="change_edit_form" method="POST">
        {% csrf_token %}
        <input type="hidden" name="edit_account" id="edit_account">
        <input type="hidden" name="user" id="edit_usr">
    </form>
{% endblock %}
{% block extra_js %}
    <script>
  /*
   * =========================================================
   * Modify Account
   * =========================================================
   */

  $(function () {

    const modifyAccountModal = new bootstrap.Modal(
      document.getElementById("modifyAccountModal")
    );


    /*
     * =========================================================
     * Hosting Accounts DataTable
     * =========================================================
     */

    $("#eenos-data-table").DataTable({

      responsive: true,
      processing: true,

      order: [[0, "asc"]],

      ajax: {
        url: "{% url 'hosting_users_data' %}",
        type: "GET",
        dataSrc: "data"
      },

      pageLength: 25,

      lengthMenu: [
        [10, 25, 50, 100, -1],
        [
          10,
          25,
          50,
          100,
          "{% translate 'All' %}"
        ]
      ],

      columns: [

        {
          data: "username",
          width: "180px",
          className: "text-nowrap",
          responsivePriority: 1,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            return `
              <span class="fw-semibold">
                ${data || "-"}
              </span>
            `;
          }
        },

        {
          data: "domain",
          responsivePriority: 2,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            if (!data) {
              return '<span class="text-muted">-</span>';
            }

            const domain = $("<div>")
              .text(data)
              .html();

            return `
              <a href="https://${domain}" target="_blank" rel="noopener noreferrer">
                ${domain}
              </a>
            `;
          }
        },

        {
          data: "package",
          responsivePriority: 4,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            if (!data) {
              return '<span class="text-muted">-</span>';
            }

            return `
              <span class="badge bg-light text-dark border fw-medium">
                ${data}
              </span>
            `;
          }
        },

        {
          data: "status",
          width: "120px",
          className: "text-nowrap",
          responsivePriority: 3,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            if (data === "suspended") {
              return `
                <span class="eenos-status text-warning">
                  <i data-lucide="pause-circle"></i>
                  <span>
                    {% translate "Suspended" %}
                  </span>
                </span>
              `;
            }

            return `
              <span class="eenos-status text-success">
                <i data-lucide="circle-check"></i>
                <span>
                  {% translate "Active" %}
                </span>
              `;
          }
        },

        /*
         * -----------------------------------------------------
         * Action
         * -----------------------------------------------------
         */

        {
          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 = $("<div>")
              .text(row.username || "")
              .html();

            if (row.status === "suspended") {

              return `
                <div class="eenos-dt-actions">

                  <button type="button" class="btn btn-sm btn-outline-secondary" disabled title="{% translate 'Suspended accounts cannot be modified' %}" aria-label="{% translate 'Suspended accounts cannot be modified' %}">
                    <i data-lucide="pencil"></i>
                  </button>

                </div>
              `;
            }

            return `
              <div class="eenos-dt-actions">

                <button type="button" class="btn btn-sm btn-outline-primary modify_acct" value="${user}" title="{% translate 'Modify Account' %}" aria-label="{% translate 'Modify Account' %}">
                  <i data-lucide="pencil"></i>
                </button>

              </div>
            `;
          }
        }

      ],

      language: {

        loadingRecords: "&nbsp;",

        processing:
          '' +
          "{% translate 'Loading...' %}",

        emptyTable:
          "{% translate 'No hosting accounts have been configured.' %}",

        zeroRecords:
          "{% translate 'No matching hosting accounts found.' %}",

        search:
          "{% translate 'Search:' %}",

        lengthMenu:
          "{% translate 'Show' %} _MENU_",

        info:
          "{% translate 'Showing _START_ to _END_ of _TOTAL_ hosting accounts' %}"
      },

      drawCallback: function () {

        if (typeof lucide !== "undefined") {
          lucide.createIcons();
        }

      }

    });


    /*
     * =========================================================
     * Modify Account
     * =========================================================
     */

    $(document).on("click", ".modify_acct", function () {

      const $button = $(this);

      const user = $button.attr("value");

      if (!user) {
        return;
      }

      /*
       * Get the DataTable row for the clicked button.
       */

      const table = $("#eenos-data-table").DataTable();

      const row = table
        .row($button.closest("tr"))
        .data();

      if (!row) {
        return;
      }

      const domain = row.domain || "";


      /*
       * Populate hidden Django form fields.
       */

      $("#edit_usr").val(user);


      /*
       * Populate confirmation modal.
       */

      $("#modifyAccountUser").text(user);

      $("#modifyAccountDomain").text(domain);


      /*
       * Show modal.
       */

      modifyAccountModal.show();

    });


    /*
     * =========================================================
     * Confirm Modify Account
     * =========================================================
     */

    $("#modifyAccountConfirm").on("click", function () {

      $("#edit_account").val("yes");

      $("#change_edit_form").submit();

    });

  });
    </script>
{% endblock %}