{% extends "django_program/manage/base.html" %}

{% block title %}Conditions & Discounts{% endblock %}

{% block page_title %}
<h1>Conditions & Discounts</h1>
<p>Automatic discounts, eligibility rules, and pricing conditions</p>
{% endblock %}

{% block page_actions %}
<div style="position:relative;display:inline-block">
  <button class="btn btn-primary" aria-expanded="false" aria-controls="cond-menu" onclick="toggleDropdown('cond-menu', this)" type="button">Add Condition &#9662;</button>
  <div id="cond-menu" role="menu" style="display:none;position:absolute;right:0;top:100%;margin-top:4px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.12);min-width:220px;z-index:50;padding:0.25rem 0">
    {% for ct in condition_types %}
    <a href="{% url 'manage:condition-add' conference.slug ct.slug %}" role="menuitem" style="display:block;padding:0.5rem 1rem;font-size:0.85rem;color:var(--color-text);text-decoration:none;transition:background .1s" onmouseover="this.style.background='var(--color-primary-light)'" onmouseout="this.style.background='transparent'">{{ ct.label }}</a>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block content %}
{% if condition_rows %}
<table class="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Discount</th>
      <th>Scope</th>
      <th>Priority</th>
      <th>Status</th>
      <th>Usage</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for row in condition_rows %}
    <tr>
      <td><strong>{{ row.condition.name }}</strong></td>
      <td><span class="badge badge--other">{{ row.type_label }}</span></td>
      <td>{{ row.discount }}</td>
      <td style="max-width:200px;font-size:0.82rem;color:var(--color-text-muted)">{{ row.scope }}</td>
      <td class="mono">{{ row.condition.priority }}</td>
      <td>
        {% if row.condition.is_active %}
        <span class="badge badge--active">Active</span>
        {% else %}
        <span class="badge badge--inactive">Inactive</span>
        {% endif %}
      </td>
      <td>{{ row.usage }}</td>
      <td>
        <a href="{% url 'manage:condition-edit' conference.slug row.type_slug row.condition.pk %}" class="btn btn-sm btn-secondary">Edit</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<div class="empty-state">
  <p>No conditions or discounts for this conference yet.</p>
  <div style="position:relative;display:inline-block;margin-top:0.5rem">
    <button class="btn btn-primary" aria-expanded="false" aria-controls="cond-menu-empty" onclick="toggleDropdown('cond-menu-empty', this)" type="button">Add First Condition &#9662;</button>
    <div id="cond-menu-empty" role="menu" style="display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:4px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.12);min-width:220px;z-index:50;padding:0.25rem 0">
      {% for ct in condition_types %}
      <a href="{% url 'manage:condition-add' conference.slug ct.slug %}" role="menuitem" style="display:block;padding:0.5rem 1rem;font-size:0.85rem;color:var(--color-text);text-decoration:none;transition:background .1s" onmouseover="this.style.background='var(--color-primary-light)'" onmouseout="this.style.background='transparent'">{{ ct.label }}</a>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

<script>
function toggleDropdown(menuId, btn) {
  var menu = document.getElementById(menuId);
  var isOpen = menu.style.display === 'block';
  menu.style.display = isOpen ? 'none' : 'block';
  btn.setAttribute('aria-expanded', String(!isOpen));
}

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    var menus = document.querySelectorAll('[role="menu"]');
    menus.forEach(function(menu) {
      if (menu.style.display === 'block') {
        menu.style.display = 'none';
        var btn = document.querySelector('[aria-controls="' + menu.id + '"]');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      }
    });
  }
});

document.addEventListener('click', function(e) {
  var menus = document.querySelectorAll('[role="menu"]');
  menus.forEach(function(menu) {
    var btn = document.querySelector('[aria-controls="' + menu.id + '"]');
    if (btn && !btn.contains(e.target) && !menu.contains(e.target)) {
      menu.style.display = 'none';
      btn.setAttribute('aria-expanded', 'false');
    }
  });
});
</script>
{% endblock %}