{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Branding" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Branding" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Customize the control panel identity and provide useful links for your customers." %}
            </div>
        </div>
        <button type="button" class="btn btn-outline-danger" id="remove-branding">
            <i data-lucide="trash-2"></i>
            {% translate "Remove Branding" %}
        </button>
    </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 "Eenos" %}</span>
        <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 "My Branding" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row g-4 mt-1">
        <div class="col-12">
            <div class="eenos-card">
                <div class="eenos-card-header">
                    <div>
                        <div class="eenos-panel-title">{% translate "Company Details and Logos" %}</div>
                        <div class="eenos-panel-subtitle">
                            {% translate "Use your company name, website, and hosted logo images throughout the customer interface." %}
                        </div>
                    </div>
                    <i data-lucide="palette" class="eenos-card-action-icon"></i>
                </div>
                <form method="post" class="eenos-form" id="branding-form">
                    {% csrf_token %}
                    <input type="hidden" name="savebranding" id="savebranding" value="" />
                    <div class="row g-4">
                        <div class="col-12 col-lg-6">
                            <label for="company" class="form-label">{% translate "Company Name" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="company"
                                   name="company"
                                   value="{{ settings.company|default:'' }}"
                                   maxlength="1024"
                                   autocomplete="organization"
                                   required
                                   placeholder="{% translate 'Enter your company name' %}"
                                   data-parsley-required-message="{% translate 'Please enter the company name.' %}" />
                            <div class="form-text">{% translate "Displayed as the company identity in customer-facing areas." %}</div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <label for="website" class="form-label">{% translate "Company Website" %}</label>
                            <input type="url"
                                   class="form-control"
                                   id="website"
                                   name="website"
                                   value="{{ settings.website|default:'' }}"
                                   autocomplete="url"
                                   required
                                   placeholder="https://example.com"
                                   data-parsley-type="url"
                                   data-parsley-required-message="{% translate 'Please enter the company website.' %}"
                                   data-parsley-type-message="{% translate 'Please enter a valid company website URL.' %}" />
                        </div>
                        <div class="col-12 col-lg-6">
                            <label for="logo" class="form-label">{% translate "Main Logo URL" %}</label>
                            <input type="url"
                                   class="form-control"
                                   id="logo"
                                   name="logo"
                                   value="{{ settings.logo|default:'' }}"
                                   autocomplete="url"
                                   required
                                   placeholder="https://example.com/logo.png"
                                   data-parsley-type="url"
                                   data-parsley-required-message="{% translate 'Please enter the main logo URL.' %}"
                                   data-parsley-type-message="{% translate 'Please enter a valid main logo URL.' %}" />
                            <div class="form-text">{% translate "Recommended maximum logo size: 80 × 22 pixels." %}</div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <label for="logosmall" class="form-label">{% translate "Small Logo URL" %}</label>
                            <input type="url"
                                   class="form-control"
                                   id="logosmall"
                                   name="logosmall"
                                   value="{{ settings.logosmall|default:'' }}"
                                   autocomplete="url"
                                   required
                                   placeholder="https://example.com/logo-small.png"
                                   data-parsley-type="url"
                                   data-parsley-required-message="{% translate 'Please enter the small logo URL.' %}"
                                   data-parsley-type-message="{% translate 'Please enter a valid small logo URL.' %}" />
                            <div class="form-text">{% translate "Recommended maximum logo size: 33 × 22 pixels." %}</div>
                        </div>
                    </div>
                    <div class="eenos-card-footer justify-content-start">
                        <button type="button" class="btn btn-primary" id="save-branding">
                            <i data-lucide="save"></i>
                            {% translate "Save Branding" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-12">
            <div class="eenos-card">
                <div class="eenos-card-header">
                    <div>
                        <div class="eenos-panel-title">{% translate "Add Branding Menu" %}</div>
                        <div class="eenos-panel-subtitle">
                            {% translate "Add a company link to the reseller and customer control panel menus." %}
                        </div>
                    </div>
                    <i data-lucide="link" class="eenos-card-action-icon"></i>
                </div>
                <form method="post" class="eenos-form" id="branding-menu-form">
                    {% csrf_token %}
                    <input type="hidden" name="addmenu" id="addmenu" value="" />
                    <div class="row g-4">
                        <div class="col-12 col-lg-6">
                            <label for="menu_name" class="form-label">{% translate "Menu Name" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="menu_name"
                                   name="menu_name"
                                   maxlength="50"
                                   autocomplete="off"
                                   required
                                   placeholder="{% translate 'Enter a menu name' %}"
                                   data-parsley-required-message="{% translate 'Please enter the menu name.' %}" />
                        </div>
                        <div class="col-12 col-lg-6">
                            <label for="menu_link" class="form-label">{% translate "Menu URL" %}</label>
                            <input type="url"
                                   class="form-control"
                                   id="menu_link"
                                   name="menu_link"
                                   autocomplete="url"
                                   required
                                   placeholder="https://example.com/support"
                                   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>
                    </div>
                    <div class="eenos-card-footer justify-content-start">
                        <button type="button" class="btn btn-primary" id="add-branding-menu">
                            <i data-lucide="plus"></i>
                            {% translate "Add Menu" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-12">
            <div class="eenos-card">
                <div class="eenos-card-header">
                    <div>
                        <div class="eenos-panel-title">{% translate "Branding Menus" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Manage the custom links currently available to your customers." %}</div>
                    </div>
                    <i data-lucide="list" class="eenos-card-action-icon"></i>
                </div>
                <div class="table-responsive">
                    <table id="eenos-data-table"
                           class="table table-sm table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>{% translate "No." %}</th>
                                <th>{% translate "Menu Name" %}</th>
                                <th>{% translate "Menu URL" %}</th>
                                <th class="text-end">{% translate "Action" %}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <form method="post" id="remove-branding-form">
        {% csrf_token %}
        <input type="hidden" name="delbrand" id="delbrand" value="" />
    </form>
    <form method="post" id="remove-menu-form">
        {% csrf_token %}
        <input type="hidden" name="delmenu" id="delmenu" value="" />
        <input type="hidden" name="menuid" id="menuid" value="" />
    </form>
    <div class="modal fade"
         id="brandingConfirmModal"
         tabindex="-1"
         aria-labelledby="brandingConfirmModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center gap-2"
                        id="brandingConfirmModalLabel">
                        <i data-lucide="circle-help"></i>
                        <span id="branding-confirm-title"></span>
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0" id="branding-confirm-message"></p>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-primary" id="branding-confirm-action">
                        <i data-lucide="check"></i>
                        <span id="branding-confirm-action-text"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="deleteMenuModal"
         tabindex="-1"
         aria-labelledby="deleteMenuModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center gap-2"
                        id="deleteMenuModalLabel">
                        <i data-lucide="trash-2"></i>
                        {% translate "Delete Branding Menu" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-warning mb-3">
                        <div class="eenos-notice-icon" aria-hidden="true">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "This action cannot be undone" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "The selected link will be removed from the reseller and customer control panel menus." %}
                            </div>
                        </div>
                    </div>
                    <div class="small text-muted mb-1">{% translate "Menu to delete" %}</div>
                    <div class="fw-semibold" id="delete-menu-name"></div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Keep Menu" %}</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete-menu">
                        <i data-lucide="trash-2"></i>
                        {% translate "Delete Menu" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_js %}
    <script>
      (function ($) {
        "use strict";
        $(function () {
          const confirmElement = document.getElementById("brandingConfirmModal");
          const confirmModal = bootstrap.Modal.getOrCreateInstance(confirmElement);
          const deleteMenuElement = document.getElementById("deleteMenuModal");
          const deleteMenuModal = bootstrap.Modal.getOrCreateInstance(deleteMenuElement);
          let confirmCallback = null;

          function showConfirmation(title, message, actionText, destructive, callback) {
            $("#branding-confirm-title").text(title);
            $("#branding-confirm-message").text(message);
            $("#branding-confirm-action-text").text(actionText);
            $("#branding-confirm-action").toggleClass("btn-primary", !destructive).toggleClass("btn-danger", destructive);
            confirmCallback = callback;
            confirmModal.show();
          }

          $("#branding-confirm-action").on("click", function () {
            if (confirmCallback) confirmCallback();
          });

          $("#eenos-data-table").DataTable({
            responsive: true,
            processing: true,
            autoWidth: false,
            order: [[1, "asc"]],
            ajax: {
              url: "{% url 'branding_menus_data' %}",
              type: "GET",
              dataSrc: "data"
            },
            pageLength: 25,
            lengthMenu: [
              [10, 25, 50, -1],
              [10, 25, 50, "{% translate 'All' %}"]
            ],
            columns: [
              {
                data: "index",
                width: "70px",
                responsivePriority: 4
              },
              {
                data: "name",
                width: "180px",
                responsivePriority: 1,
                render: $.fn.dataTable.render.text()
              },
              {
                data: "link",
                responsivePriority: 2,
                render: function (data, type) {
                  if (type !== "display") return data;
                  const link = String(data || "");
                  const safeLink = $("<div>").text(link).html();
                  return '<a href="' + safeLink + '" target="_blank" rel="noopener noreferrer">' + safeLink + '</a>';
                }
              },
              {
                data: "menu_id",
                width: "90px",
                orderable: false,
                searchable: false,
                responsivePriority: 1,
                render: function (data, type, row) {
                  if (type !== "display") return data;
                  const menuId = $("<div>").text(String(data || "")).html();
                  const menuName = $("<div>").text(String(row.name || "")).html();
                  return '<div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-danger delete_menu" value="' + menuId + '" data-menu-name="' + menuName + '" 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();
            }
          });

          $("#save-branding").on("click", function () {
            const form = $("#branding-form").parsley();
            form.validate();
            if (!form.isValid()) return;
            showConfirmation("{% translate 'Save Branding' %}", "{% translate 'Save these company branding settings?' %}", "{% translate 'Save' %}", false, function () {
              $("#savebranding").val("yes");
              document.getElementById("branding-form").submit();
            });
          });

          $("#add-branding-menu").on("click", function () {
            const form = $("#branding-menu-form").parsley();
            form.validate();
            if (!form.isValid()) return;
            showConfirmation("{% translate 'Add Menu' %}", "{% translate 'Add this link to the customer control panel menus?' %}", "{% translate 'Add Menu' %}", false, function () {
              $("#addmenu").val("yes");
              document.getElementById("branding-menu-form").submit();
            });
          });

          $(document).on("click", ".delete_menu", function () {
            $("#menuid").val($(this).val());
            $("#delete-menu-name").text($(this).attr("data-menu-name"));
            deleteMenuModal.show();
          });

          $("#confirm-delete-menu").on("click", function () {
            $("#delmenu").val("yes");
            document.getElementById("remove-menu-form").submit();
          });

          deleteMenuElement.addEventListener("hidden.bs.modal", function () {
            $("#delmenu, #menuid").val("");
            $("#delete-menu-name").text("");
          });

          $("#remove-branding").on("click", function () {
            showConfirmation("{% translate 'Remove Branding' %}", "{% translate 'Remove all company branding settings?' %}", "{% translate 'Remove Branding' %}", true, function () {
              $("#delbrand").val("yes");
              document.getElementById("remove-branding-form").submit();
            });
          });
        });
      })(jQuery);
    </script>
{% endblock extra_js %}