{% extends "base.html" %} {% load i18n %} {% block title %} {% translate "Branding" %} - Eenos {% endblock %} {% block content %}
<div class="eenos-page-header">
    <div>
        <h1 class="eenos-page-title">{% translate "Branding" %}</h1>
        <div class="eenos-page-subtitle">{% translate "Customize your company identity, logos, and navigation links across Eenos interfaces." %}</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 "Preferences" %}</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 "Branding" %}</span>
</nav>
{% include "includes/form_alerts.html" %}
<!-- =====================================================
     BRANDING INFORMATION
====================================================== -->
<div class="eenos-notice eenos-notice-info mb-3">
    <div class="eenos-notice-icon">
        <i data-lucide="palette"></i>
    </div>
    <div class="eenos-notice-content">
        <div class="eenos-notice-title">{% translate "Company Branding" %}</div>
        <div class="eenos-notice-text">{% translate "Configure the company identity, logos, and custom navigation links displayed throughout the reseller and user interfaces." %}</div>
        <div class="mt-2 small">
            <span class="text-muted">{% translate "Branding Scope:" %}</span>
            <strong>{% translate "Reseller and User Interfaces" %}</strong>
        </div>
        <div class="mt-2 small text-muted">{% translate "Resellers can override these branding settings for their own interfaces." %}</div>
    </div>
</div>
<!-- =====================================================
     BRANDING ACTION
====================================================== -->
<!-- =====================================================
     BRANDING ACTION
====================================================== -->
<div class="eenos-card mb-3">
    <div class="d-flex align-items-start justify-content-between">
        <div>
            <div class="eenos-panel-title">{% translate "Current Branding" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Restore the default Eenos branding." %}</div>
        </div>
        <i data-lucide="palette" class="eenos-card-action-icon"></i>
    </div>
    <div class="mt-3">
        <button type="button"
                class="btn btn-outline-danger btn-sm"
                id="removeBranding">
            <i data-lucide="trash-2"></i>
            {% translate "Remove Branding" %}
        </button>
    </div>
</div>
<!-- =====================================================
     SETTINGS CARDS
====================================================== -->
<div class="row g-3">
    <!-- =================================================
         COMPANY DETAILS
    ================================================== -->
    <div class="col-12 col-xl-6">
        <form method="POST" class="eenos-form h-100" id="eenos-form">
            {% csrf_token %}
            <div class="eenos-card h-100">
                <div class="eenos-panel-title">{% translate "Company Details and Logos" %}</div>
                <div class="eenos-panel-subtitle mb-3">{% translate "Configure the company information and logo URLs used by the branded interfaces." %}</div>
                <!-- COMPANY NAME -->
                <div class="mb-3">
                    <label for="company" class="form-label">{% translate "Company Name" %}</label>
                    <input type="text"
                           class="form-control form-control-sm"
                           id="company"
                           name="company"
                           value="{{ settings.company|default:'' }}"
                           autocomplete="off"
                           required
                           data-parsley-required="true"
                           data-parsley-required-message="{% translate 'Please enter the company name.' %}" />
                    <div class="form-text">{% translate "The company name displayed throughout the branded interface." %}</div>
                </div>
                <!-- COMPANY WEBSITE -->
                <div class="mb-3">
                    <label for="website" class="form-label">{% translate "Company Website" %}</label>
                    <input type="url"
                           class="form-control form-control-sm"
                           id="website"
                           name="website"
                           value="{{ settings.website|default:'' }}"
                           autocomplete="off"
                           required
                           data-parsley-required="true"
                           data-parsley-type="url"
                           data-parsley-required-message="{% translate 'Please enter the company website URL.' %}"
                           data-parsley-type-message="{% translate 'Please enter a valid website URL.' %}" />
                    <div class="form-text">{% translate "The website associated with your company branding." %}</div>
                </div>
                <!-- MAIN LOGO -->
                <div class="mb-3">
                    <label for="logo" class="form-label">{% translate "Main Logo URL" %}</label>
                    <input type="url"
                           class="form-control form-control-sm"
                           id="logo"
                           name="logo"
                           value="{{ settings.logo|default:'' }}"
                           autocomplete="off"
                           required
                           data-parsley-required="true"
                           data-parsley-type="url"
                           data-parsley-required-message="{% translate 'Please enter the main logo URL.' %}"
                           data-parsley-type-message="{% translate 'Please enter a valid logo URL.' %}" />
                    <div class="form-text">{% translate "URL of the primary company logo. Recommended dimensions: 80 × 22 pixels." %}</div>
                </div>
                <!-- SMALL LOGO -->
                <div class="mb-3">
                    <label for="logosmall" class="form-label">{% translate "Small Logo URL" %}</label>
                    <input type="url"
                           class="form-control form-control-sm"
                           id="logosmall"
                           name="logosmall"
                           value="{{ settings.logosmall|default:'' }}"
                           autocomplete="off"
                           required
                           data-parsley-required="true"
                           data-parsley-type="url"
                           data-parsley-required-message="{% translate 'Please enter the small logo URL.' %}"
                           data-parsley-type-message="{% translate 'Please enter a valid logo URL.' %}" />
                    <div class="form-text">{% translate "URL of the compact company logo. Recommended dimensions: 33 × 22 pixels." %}</div>
                </div>
                <input type="hidden" name="savebranding" id="savebranding" />
                <div class="eenos-form-actions mt-3">
                    <button type="button" class="btn btn-primary btn-sm" id="saveBranding">
                        <i data-lucide="save"></i>
                        {% translate "Save Branding" %}
                    </button>
                </div>
            </div>
        </form>
    </div>
    <!-- =================================================
         BRANDING MENUS
    ================================================== -->
    <div class="col-12 col-xl-6">
        <form method="POST" class="eenos-form h-100" id="eenos-form-menu">
            {% csrf_token %}
            <div class="eenos-card h-100">
                <div class="eenos-panel-title">{% translate "Branding Menus" %}</div>
                <div class="eenos-panel-subtitle mb-3">{% translate "Add custom navigation links to the reseller and user interfaces." %}</div>
                <!-- MENU NAME -->
                <div class="mb-3">
                    <label for="menu_name" class="form-label">{% translate "Menu Name" %}</label>
                    <input type="text"
                           class="form-control form-control-sm"
                           id="menu_name"
                           name="menu_name"
                           autocomplete="off"
                           required
                           data-parsley-required="true"
                           data-parsley-required-message="{% translate 'Please enter a menu name.' %}" />
                    <div class="form-text">{% translate "The name displayed for the custom navigation link." %}</div>
                </div>
                <!-- MENU URL -->
                <div class="mb-3">
                    <label for="menu_link" class="form-label">{% translate "Menu URL" %}</label>
                    <input type="url"
                           class="form-control form-control-sm"
                           id="menu_link"
                           name="menu_link"
                           autocomplete="off"
                           required
                           data-parsley-required="true"
                           data-parsley-type="url"
                           data-parsley-required-message="{% translate 'Please enter the menu URL.' %}"
                           data-parsley-type-message="{% translate 'Please enter a valid menu URL.' %}" />
                    <div class="form-text">{% translate "The destination URL opened when users select this menu item." %}</div>
                </div>
                <input type="hidden" name="addmenu" id="addmenu" />
                <div class="eenos-form-actions mt-3">
                    <button type="button" class="btn btn-primary btn-sm" id="addMenu">
                        <i data-lucide="plus"></i>
                        {% translate "Add Menu" %}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- =====================================================
     BRANDING MENU LIST
====================================================== -->
<div class="eenos-card mt-3">
    <div class="eenos-panel-title">{% translate "Your Branding Menus" %}</div>
    <div class="eenos-panel-subtitle mb-3">{% translate "View and manage the custom navigation links configured for your branded interfaces." %}</div>
    <table id="eenos-data-table"
           class="table table-sm table-hover align-middle mb-0">
        <thead>
            <tr>
                <th>{% translate "Sl. No." %}</th>
                <th>{% translate "Menu Name" %}</th>
                <th>{% translate "Menu Link" %}</th>
                <th class="text-end">{% translate "Action" %}</th>
            </tr>
        </thead>
    </table>
</div>
<!-- =====================================================
     REMOVE BRANDING FORM
====================================================== -->
<form method="POST" id="branding-remove">
    {% csrf_token %}
    <input type="hidden" name="delbrand" id="delbrand" />
</form>
<!-- =====================================================
     DELETE MENU FORM
====================================================== -->
<form method="POST" id="menuremove">
    {% csrf_token %}
    <input type="hidden" name="delmenu" id="delmenu" />
    <input type="hidden" name="menuid" id="menuid" />
</form>
<!-- =====================================================
     SAVE BRANDING MODAL
====================================================== -->
<div class="modal fade"
     id="saveBrandingModal"
     tabindex="-1"
     aria-labelledby="saveBrandingModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="saveBrandingModalLabel">{% translate "Save Branding" %}</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">{% translate "Are you sure you want to save the current branding settings?" %}</div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary btn-sm"
                        data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                <button type="button" class="btn btn-primary btn-sm" id="confirmSaveBranding">{% translate "Save Branding" %}</button>
            </div>
        </div>
    </div>
</div>
<!-- =====================================================
     ADD MENU MODAL
====================================================== -->
<div class="modal fade"
     id="addMenuModal"
     tabindex="-1"
     aria-labelledby="addMenuModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addMenuModalLabel">{% translate "Add Menu" %}</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">{% translate "Are you sure you want to add this menu item to the branding configuration?" %}</div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary btn-sm"
                        data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                <button type="button" class="btn btn-primary btn-sm" id="confirmAddMenu">{% translate "Add Menu" %}</button>
            </div>
        </div>
    </div>
</div>
<!-- =====================================================
     REMOVE BRANDING MODAL
====================================================== -->
<div class="modal fade"
     id="removeBrandingModal"
     tabindex="-1"
     aria-labelledby="removeBrandingModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="removeBrandingModalLabel">{% translate "Remove Branding" %}</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">{% translate "Are you sure you want to remove the current branding configuration? This will restore the default branding settings." %}</div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary btn-sm"
                        data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                <button type="button"
                        class="btn btn-danger btn-sm"
                        id="confirmRemoveBranding">{% translate "Remove Branding" %}</button>
            </div>
        </div>
    </div>
</div>
<!-- =====================================================
     DELETE MENU MODAL
====================================================== -->
<div class="modal fade"
     id="deleteMenuModal"
     tabindex="-1"
     aria-labelledby="deleteMenuModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteMenuModalLabel">{% translate "Delete Menu" %}</h5>
                <button type="button"
                        class="btn-close"
                        id="closeDeleteMenuModal"
                        data-bs-dismiss="modal"
                        aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">{% translate "Are you sure you want to permanently delete this menu item? This action cannot be undone." %}</div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary btn-sm"
                        id="cancelDeleteMenu"
                        data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                <button type="button" class="btn btn-danger btn-sm" id="confirmDeleteMenu">{% translate "Delete Menu" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
    <script>
  $(function () {
    const saveBrandingModal = new bootstrap.Modal(document.getElementById("saveBrandingModal"));
    const addMenuModal = new bootstrap.Modal(document.getElementById("addMenuModal"));
    const removeBrandingModal = new bootstrap.Modal(document.getElementById("removeBrandingModal"));
    const deleteMenuModal = new bootstrap.Modal(document.getElementById("deleteMenuModal"));

    /*
     * Save branding
     */

    $("#saveBranding").on("click", function () {
      const form = $("#eenos-form").parsley();

      if (!form.validate()) {
        return;
      }

      saveBrandingModal.show();
    });

    $("#confirmSaveBranding").on("click", function () {
      $("#savebranding").val("yes");

      $("#eenos-form").trigger("submit");
    });

    /*
     * Add menu
     */

    $("#addMenu").on("click", function () {
      const form = $("#eenos-form-menu").parsley();

      if (!form.validate()) {
        return;
      }

      addMenuModal.show();
    });

    $("#confirmAddMenu").on("click", function () {
      $("#addmenu").val("yes");

      $("#eenos-form-menu").trigger("submit");
    });

    /*
     * Remove branding
     */

    $("#removeBranding").on("click", function () {
      removeBrandingModal.show();
    });

    $("#confirmRemoveBranding").on("click", function () {
      $("#delbrand").val("yes");

      $("#branding-remove").trigger("submit");
    });

    /*
     * Delete menu
     */

    $(document).on("click", ".delete_menu", function () {
      $("#menuid").val($(this).val());

      deleteMenuModal.show();
    });

    $("#closeDeleteMenuModal, #cancelDeleteMenu").on("click", function () {
      deleteMenuModal.hide();
    });

    document.getElementById("deleteMenuModal").addEventListener("hidden.bs.modal", function () {
      $("#menuid").val("");
    });

    $("#confirmDeleteMenu").on("click", function () {
      $("#delmenu").val("yes");

      $("#menuremove").trigger("submit");
    });

    /*
     * Branding menus
     */
    $("#eenos-data-table").DataTable({
      responsive: true,
      processing: true,
      autoWidth: false,

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

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

      pageLength: 10,

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

      columns: [
        {
          data: "index",
          width: "70px",
          responsivePriority: 4,
        },

        {
          data: "name",
          width: "180px",
          responsivePriority: 1,
        },

        {
          data: "link",
          responsivePriority: 2,

          render: function (data) {
            if (!data) {
              return "";
            }

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

        {
          data: null,
          width: "90px",
          orderable: false,
          searchable: false,
          responsivePriority: 1,

          render: function (data, type, row) {
            return `
                    <div class="eenos-dt-actions">

                        <button type="button" class="btn btn-sm btn-outline-danger delete_menu" value="${row.id}" title="{% translate 'Delete Branding Menu' %}" aria-label="{% translate 'Delete Branding Menu' %}">
                            <i data-lucide="trash-2"></i>
                        </button>

                    </div>
                `;
          },
        },
      ],

      language: {
        loadingRecords: "&nbsp;",

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

        emptyTable: "{% translate 'No branding menus have been configured yet.' %}",

        zeroRecords: "{% translate 'No matching branding menus found.' %}",

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

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

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

      drawCallback: function () {
        if (typeof lucide !== "undefined") {
          lucide.createIcons();
        }
      },
    });
  });
    </script>
{% endblock %}