{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Packages" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Packages" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage the hosting packages available for your hosting accounts." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'addpkg' %}" class="btn btn-primary btn-sm text-nowrap">
                <i data-lucide="plus"></i>
                {% translate "Create Package" %}
            </a>
        </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 "Packages" %}</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 "List Packages" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div>
                <div class="eenos-panel-title">{% translate "Available Hosting Packages" %}</div>
                <div class="eenos-panel-subtitle">{% translate "View and manage the hosting packages owned by your reseller account." %}</div>
            </div>
        </div>
        <table id="eenos-data-table" class="table table-hover align-middle w-100">
            <thead>
                <tr>
                    <th>{% translate "Package Name" %}</th>
                    <th>{% translate "Disk Quota" %}</th>
                    <th>{% translate "Bandwidth" %}</th>
                    <th>{% translate "Email" %}</th>
                    <th>{% translate "FTP" %}</th>
                    <th>{% translate "Databases" %}</th>
                    <th>{% translate "Shell" %}</th>
                    <th>{% translate "IP" %}</th>
                    <th>{% translate "Feature" %}</th>
                    <th>{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form action="" class="pkg_form" id="pkg_form" method="POST">
        {% csrf_token %}
        <input type="hidden" name="package_name" id="delete_pkg" />
        <input type="hidden" name="delete" id="delete" />
    </form>
    <div class="modal fade"
         id="deletePackageModal"
         tabindex="-1"
         aria-labelledby="deletePackageModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deletePackageModalLabel">
                        <i data-lucide="trash-2"></i>
                        {% translate "Delete Package" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-description mb-4">
                        {% translate "You are about to permanently delete this hosting package." %}
                    </div>
                    <div class="eenos-modal-field mb-4">
                        <div class="form-label">{% translate "Package" %}</div>
                        <div class="eenos-modal-value">
                            <i data-lucide="package"></i>
                            <span id="deletePackageName"></span>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-danger">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Permanent Action" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "This action cannot be undone. All package configuration associated with this package will be removed." %}
                            </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-danger btn-sm" id="confirmDeletePackage">
                        <i data-lucide="trash-2"></i>
                        {% translate "Delete Package" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="editPackageModal"
         tabindex="-1"
         aria-labelledby="editPackageModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editPackageModalLabel">
                        <i data-lucide="pencil"></i>
                        {% translate "Edit Package" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-description mb-4">{% translate "You are about to edit the following hosting package." %}</div>
                    <div class="eenos-modal-field mb-4">
                        <div class="form-label">{% translate "Package" %}</div>
                        <div class="eenos-modal-value">
                            <i data-lucide="package"></i>
                            <span id="editPackageName"></span>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-info">
                        <div class="eenos-notice-icon">
                            <i data-lucide="settings-2"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Package Configuration" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "You can review and update the package resources and service configuration on the next page." %}
                            </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-primary btn-sm" id="confirmEditPackage">
                        <i data-lucide="pencil"></i>
                        {% translate "Edit Package" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_js %}
    <script>
  $(function () {

    const $packageList = $("#pkg_form");
    let selectedEditUrl = "";

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

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

    function formatUnlimited() {
      return '<span class="badge eenos-badge-neutral p-1" role="img" title="{% translate "Unlimited" %}" aria-label="{% translate "Unlimited" %}"><i data-lucide="infinity" width="14" height="14"></i></span>';
    }

    function formatStorage(value) {

      if (value === null || value === undefined || value === "") {
        return "-";
      }

      const stringValue = String(value).trim();

      if (stringValue.toLowerCase() === "unlimited") {
        return formatUnlimited();
      }

      const mb = Number(stringValue);

      if (Number.isNaN(mb)) {
        return stringValue;
      }

      if (mb < 1024) {
        return `${mb} MB`;
      }

      const gb = mb / 1024;

      if (gb < 1024) {
        return `${Number(gb.toFixed(2))} GB`;
      }

      const tb = gb / 1024;

      return `${Number(tb.toFixed(2))} TB`;
    }


    function formatYesNo(value) {

      const normalized = String(value || "").toLowerCase();

      if (normalized === "yes") {
        return `
          <span class="text-success fw-medium">
            Yes
          </span>
        `;
      }

      if (normalized === "no") {
        return `
          <span class="text-muted">
            No
          </span>
        `;
      }

      return value || "-";
    }


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

      responsive: true,

      processing: true,

      pageLength: 25,

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

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

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

      columns: [

        {
        data: "package_name",

        responsivePriority: 1,

        render: function (data, type, row) {

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

            let html = `
            <div class="d-inline-flex align-items-center align-middle gap-2">
                <span class="fw-semibold">
                ${data || "-"}
                </span>
            `;

            if (row.default) {
            html += `
                <span class="badge bg-light text-dark border">
                {% translate "Default" %}
                </span>
            `;
            }

            html += `
            </div>
            `;

            return html;
        }
        },


        {
          data: "quota",

          responsivePriority: 2,

          render: function (data, type) {

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

            return formatStorage(data);
          }
        },


        {
          data: "bandwidth",

          responsivePriority: 3,

          render: function (data, type) {

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

            return formatStorage(data);
          }
        },


        {
          data: "email",

          responsivePriority: 5,

          render: function (data, type) {

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

            if (
              String(data).toLowerCase() === "unlimited"
            ) {
              return formatUnlimited();
            }

            return data || "-";
          }
        },


        {
          data: "ftp",

          responsivePriority: 6,

          render: function (data, type) {

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

            if (
              String(data).toLowerCase() === "unlimited"
            ) {
              return formatUnlimited();
            }

            return data || "-";
          }
        },


        {
          data: "sql",

          responsivePriority: 7,

          render: function (data, type) {

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

            if (
              String(data).toLowerCase() === "unlimited"
            ) {
              return formatUnlimited();
            }

            return data || "-";
          }
        },


        {
          data: "shell",

          responsivePriority: 9,

          render: function (data, type) {

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

            return formatYesNo(data);
          }
        },


        {
          data: "dedicatedip",

          responsivePriority: 10,

          render: function (data, type) {

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

            return formatYesNo(data);
          }
        },

        {
        data: "feature",

        responsivePriority: 5,

        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: null,

          orderable: false,

          searchable: false,

          width: "110px",

          responsivePriority: 1,

          render: function (data, type, row) {

            const packageName = row.package_name;

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

                <button type="button" class="btn btn-sm btn-outline-secondary edit_package" value="${packageName}" data-edit-url="${row.edit_url}" title="{% translate 'Edit Package' %}" aria-label="{% translate 'Edit Package' %}">
                  <i data-lucide="pencil"></i>
                </button>
            `;


            if (!row.default) {

              actions += `
                <button type="button" class="btn btn-sm btn-outline-danger delete_package" value="${packageName}" title="{% translate 'Delete Package' %}" aria-label="{% translate 'Delete Package' %}">
                  <i data-lucide="trash-2"></i>
                </button>
              `;
            }


            actions += `
              </div>
            `;

            return actions;
          }
        }

      ],


      language: {

        loadingRecords: "&nbsp;",

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

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

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

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

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

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


      drawCallback: function () {

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

    });


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

      const packageName = $(this).val();

      selectedEditUrl = $(this).attr("data-edit-url");

      $("#editPackageName").text(packageName);

      editModal.show();
    });


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

      editModal.hide();

      if (selectedEditUrl) {
        window.location.href = selectedEditUrl;
      }
    });


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

      const packageName = $(this).val();

      $("#delete_pkg").val(packageName);

      $("#deletePackageName").text(packageName);

      deleteModal.show();
    });


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

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

      deleteModal.hide();

      $packageList.trigger("submit");
    });

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