{% extends "base.html" %} {% load i18n %} {% block title %} {% translate "Packages" %} - Eenos {% endblock %} {% block content %}
<!-- =========================================================
     PAGE HEADER
========================================================= -->
<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>
<!-- =========================================================
     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>
    <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Packages" %}</span>
</nav>
<!-- =========================================================
     ALERTS
========================================================= -->
{% include "includes/form_alerts.html" %}
<!-- =========================================================
     PACKAGES
========================================================= -->
<div class="eenos-card">
    <!-- =====================================================
     CARD HEADER
====================================================== -->
    <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 available on this server." %}</div>
        </div>
    </div>
    <!-- =====================================================
     PACKAGE TABLE
====================================================== -->
    <table id="eenos-data-table" class="table table-hover align-middle w-100">
        <thead>
            <tr>
                <th>{% translate "Package Name" %}</th>
                <th>{% translate "Owner" %}</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>
<!-- =========================================================
     DELETE PACKAGE FORM
========================================================= -->
<form action="" class="pkg_form" id="pkg_form" method="POST">
    {% csrf_token %}
    <input type="hidden" name="delete_package" id="delete_pkg" />
    <input type="hidden" name="delete" id="delete" />
</form>
<!-- =========================================================
     EDIT PACKAGE FORM
========================================================= -->
<form action="{% url 'editpkg' %}"
      class="pkg_edit"
      id="pkg_edit"
      method="POST">
    {% csrf_token %}
    <input type="hidden" name="package_name" id="package_name" />
    <input type="hidden" name="edit_package_list" id="edit_package" />
</form>
<!-- =========================================================
     DELETE PACKAGE MODAL
========================================================= -->
<!-- =========================================================
     DELETE PACKAGE MODAL
========================================================= -->
<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">
            <!-- Header -->
            <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>
            <!-- Body -->
            <div class="modal-body">
                <div class="eenos-modal-description mb-4">
                    {% translate "You are about to permanently delete this hosting package." %}
                </div>
                <!-- Package -->
                <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>
                <!-- Warning -->
                <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>
            <!-- Footer -->
            <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>
<!-- =========================================================
     EDIT PACKAGE MODAL
========================================================= -->
<!-- =========================================================
     EDIT PACKAGE MODAL
========================================================= -->
<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">
            <!-- Header -->
            <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>
            <!-- Body -->
            <div class="modal-body">
                <div class="eenos-modal-description mb-4">{% translate "You are about to edit the following hosting package." %}</div>
                <!-- Package -->
                <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>
                <!-- Information -->
                <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>
            <!-- Footer -->
            <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>
<!-- =========================================================
     DATATABLE
========================================================= -->
{% endblock %}
{% block extra_js %}
    <script>
  $(function () {

    const $packageList = $("#pkg_form");
    const $packageEdit = $("#pkg_edit");

    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>';
    }

    /*
     * =========================================================
     * FORMAT STORAGE SIZE
     *
     * Package quota and bandwidth values are stored in MB.
     * Convert them into a more readable format for display.
     * =========================================================
     */

    function formatStorage(value) {

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

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

      /*
       * Keep unlimited exactly as it is.
       */

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

      const mb = Number(stringValue);

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

      /*
       * Less than 1024 MB
       */

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

      /*
       * Convert MB to GB
       */

      const gb = mb / 1024;

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

      /*
       * Convert GB to TB
       */

      const tb = gb / 1024;

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


    /*
     * =========================================================
     * FORMAT YES / NO
     * =========================================================
     */

    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 || "-";
    }


    /*
     * =========================================================
     * PACKAGES DATA TABLE
     * =========================================================
     */

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

      responsive: true,

      processing: true,

      pageLength: 25,

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

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

      columns: [

        /*
         * =====================================================
         * SL.NO
         * =====================================================
         */

        /*
        * =====================================================
        * PACKAGE NAME
        * =====================================================
        */

        {
        data: "package_name",

        width: "180px",

        className: "text-nowrap",

        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;
        }
        },


        /*
         * =====================================================
         * OWNER
         * =====================================================
         */

        {
          data: "owner",

          responsivePriority: 4,

          render: function (data, type) {

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

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


        /*
         * =====================================================
         * DISK QUOTA
         *
         * Stored in MB.
         * =====================================================
         */

        {
          data: "quota",

          responsivePriority: 2,

          render: function (data, type) {

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

            return formatStorage(data);
          }
        },


        /*
         * =====================================================
         * BANDWIDTH
         *
         * Stored in MB.
         * =====================================================
         */

        {
          data: "bandwidth",

          responsivePriority: 3,

          render: function (data, type) {

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

            return formatStorage(data);
          }
        },


        /*
         * =====================================================
         * EMAIL
         * =====================================================
         */

        {
          data: "email",

          responsivePriority: 5,

          render: function (data, type) {

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

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

            return data || "-";
          }
        },


        /*
         * =====================================================
         * FTP
         * =====================================================
         */

        {
          data: "ftp",

          responsivePriority: 6,

          render: function (data, type) {

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

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

            return data || "-";
          }
        },


        /*
         * =====================================================
         * DATABASES
         * =====================================================
         */

        {
          data: "sql",

          responsivePriority: 7,

          render: function (data, type) {

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

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

            return data || "-";
          }
        },


        /*
         * =====================================================
         * SHELL
         * =====================================================
         */

        {
          data: "shell",

          responsivePriority: 9,

          render: function (data, type) {

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

            return formatYesNo(data);
          }
        },


        /*
         * =====================================================
         * DEDICATED IP
         * =====================================================
         */

        {
          data: "dedicatedip",

          responsivePriority: 10,

          render: function (data, type) {

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

            return formatYesNo(data);
          }
        },

        /*
        * =====================================================
        * FEATURE
        * =====================================================
        */

        {
        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>
            `;
        }
        },

        /*
         * =====================================================
         * ACTIONS
         * =====================================================
         */

        {
          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}" title="{% translate 'Edit Package' %}" aria-label="{% translate 'Edit Package' %}">
                  <i data-lucide="pencil"></i>
                </button>
            `;


            /*
             * Default package cannot be deleted.
             */

            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;
          }
        }

      ],


      /*
       * =========================================================
       * DATATABLE LANGUAGE
       * =========================================================
       */

      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' %}"
      },


      /*
       * =========================================================
       * DATATABLE DRAW CALLBACK
       *
       * Re-create Lucide icons after every redraw.
       * =========================================================
       */

      drawCallback: function () {

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

    });


    /*
     * =========================================================
     * EDIT PACKAGE
     * =========================================================
     */

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

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

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

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

      editModal.show();
    });


    /*
     * Confirm edit
     */

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

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

      editModal.hide();

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


    /*
     * =========================================================
     * DELETE PACKAGE
     * =========================================================
     */

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

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

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

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

      deleteModal.show();
    });


    /*
     * Confirm delete
     */

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

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

      deleteModal.hide();

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

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