{% extends "admin_base.html" %}
{% block title %}Our Team | Nexora Admin{% endblock %}
{% block content %}
<div class="admin-head">
  <p class="eyebrow">Team</p>
  <h1>Our Team</h1>
  <p>Create sections (e.g. Youngsters, Volunteers), add team members, and configure animated rows.</p>
</div>

{% if can('team_create') %}
<section class="admin-panel">
  <h2><i class="fas fa-plus"></i> Add Section</h2>
  <form class="admin-form" method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="team-create-grid">
      <div class="team-create-fields">
        <label>Section Title<input name="title" placeholder="e.g. Youngsters" required></label>
        <label>Description <span class="field-hint">(optional)</span><input name="description" placeholder="Brief description of this group"></label>
        <label>Number of Rows
          <select name="num_rows" data-row-select>
            <option value="1">1 row</option>
            <option value="2" selected>2 rows</option>
            <option value="3">3 rows</option>
            <option value="4">4 rows</option>
            <option value="5">5 rows</option>
          </select>
        </label>
      </div>
      <div class="team-create-rows">
        <div class="row-config-grid">
          {% for i in range(5) %}
          <div class="row-config-item" style="{% if i > 1 %}display:none{% endif %}" data-row-config="{{ i }}">
            <strong>Row {{ i + 1 }}</strong>
            <label>Direction
              <select name="row_dir_{{ i }}">
                <option value="ltr">Left → Right</option>
                <option value="rtl">Right → Left</option>
              </select>
            </label>
            <label>Speed (sec)
              <input type="number" name="row_speed_{{ i }}" value="30" min="10" max="120">
            </label>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    <button class="btn primary" type="submit"><i class="fas fa-plus"></i> Create Section</button>
  </form>
</section>
{% endif %}

{% if team_data %}
<section class="admin-panel">
  <h2><i class="fas fa-users"></i> Team Sections</h2>
  {% for item in team_data %}
  {% set sec = item.section %}
  {% set members = item.members %}
  {% set rows = item.rows %}
  <div class="team-section-card" data-section-id="{{ sec.id }}">
    <div class="team-section-head">
      <div>
        <h3>{{ sec.title }}</h3>
        {% if sec.description %}<p class="field-hint">{{ sec.description }}</p>{% endif %}
      </div>
      <span class="badge {{ 'paid' if sec.active else 'unpaid' }}">{{ 'Visible' if sec.active else 'Hidden' }}</span>
    </div>

    {% if can('team_update') or can('team_delete') %}
    <div class="team-section-actions">
      <button class="btn outline small" type="button" data-toggle-section-edit><i class="fas fa-pen"></i> Edit Section</button>
      <form method="post" action="{{ url_for('reorder_team_section', sec_id=sec.id) }}" style="display:inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="direction" value="up">
        <button class="btn outline small" type="submit"><i class="fas fa-arrow-up"></i></button>
      </form>
      <form method="post" action="{{ url_for('reorder_team_section', sec_id=sec.id) }}" style="display:inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="direction" value="down">
        <button class="btn outline small" type="submit"><i class="fas fa-arrow-down"></i></button>
      </form>
      <form method="post" action="{{ url_for('delete_team_section', sec_id=sec.id) }}" data-confirm="Delete entire section '{{ sec.title }}' and all its members?" style="display:inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="danger-link" type="submit"><i class="fas fa-trash"></i> Delete</button>
      </form>
    </div>
    {% endif %}

    <form method="post" action="{{ url_for('edit_team_section', sec_id=sec.id) }}" class="admin-inline-edit team-section-edit-form" hidden>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <label>Title<input name="title" value="{{ sec.title }}" required></label>
      <label>Description<input name="description" value="{{ sec.description }}"></label>
      <label class="check"><input type="checkbox" name="active" {% if sec.active %}checked{% endif %}> Show on website</label>
      <label>Number of Rows
        <select name="num_rows" data-row-select>
          {% for n in range(1, 6) %}
          <option value="{{ n }}" {% if rows|length == n %}selected{% endif %}>{{ n }} row{{ 's' if n > 1 }}</option>
          {% endfor %}
        </select>
      </label>
      <div class="row-config-grid">
        {% for n in range(5) %}
        <div class="row-config-item" style="{% if n >= rows|length and n > 1 %}display:none{% endif %}" data-row-config="{{ n }}">
          <strong>Row {{ n + 1 }}</strong>
          <label>Direction
            <select name="row_dir_{{ n }}">
              <option value="ltr" {% if n < rows|length and rows[n].direction == 'ltr' %}selected{% endif %}>Left → Right</option>
              <option value="rtl" {% if n < rows|length and rows[n].direction == 'rtl' %}selected{% endif %}>Right → Left</option>
            </select>
          </label>
          <label>Speed (sec)
            <input type="number" name="row_speed_{{ n }}" value="{{ rows[n].speed if n < rows|length else 30 }}" min="10" max="120">
          </label>
          <label class="check"><input type="checkbox" name="row_enabled_{{ n }}" {% if n < rows|length and rows[n].enabled %}checked{% endif %}> Enabled</label>
        </div>
        {% endfor %}
      </div>
      {% if can('team_update') %}<button class="btn primary small" type="submit"><i class="fas fa-floppy-disk"></i> Save Changes</button>{% endif %}
    </form>

    <div class="team-members-area">
      {% if can('team_delete') %}
      <h4><i class="fas fa-user-plus"></i> Add Member</h4>
      <form method="post" action="{{ url_for('add_team_member', sec_id=sec.id) }}" enctype="multipart/form-data" class="admin-form mini-form team-add-member-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="team-add-member-grid">
          <label>Name<input name="name" placeholder="Member name" required></label>
          <label>Photo<input type="file" name="image" accept="image/*"></label>
        </div>
        <button class="btn primary small" type="submit"><i class="fas fa-plus"></i> Add</button>
      </form>
      {% endif %}

      {% if members %}
      <div class="admin-card-grid team-member-grid">
        {% for member in members %}
        <article class="mini-admin-card team-member-admin-card" data-member-id="{{ member.id }}">
          <div class="team-member-admin-thumb">
            {% set tm_img = img(member.image) if member.image else '' %}
            {% if tm_img %}
            <img class="thumb contain" src="{{ url_for('serve_media', filename=tm_img) }}" alt="{{ member.name }}">
            {% else %}
            <div class="thumb logo-fallback" style="font-size:22px;">{{ member.name[:2] | upper }}</div>
            {% endif %}
          </div>
          <div class="team-member-admin-info">
            <strong>{{ member.name }}</strong>
            <span class="badge {{ 'paid' if member.active else 'unpaid' }}">{{ 'Visible' if member.active else 'Hidden' }}</span>
          </div>
          {% if can('team_create') %}
          <div class="team-member-admin-actions">
            <button class="btn outline small" type="button" data-toggle-edit><i class="fas fa-pen"></i></button>
            <form method="post" action="{{ url_for('reorder_team_member', member_id=member.id) }}" style="display:inline">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <input type="hidden" name="direction" value="up">
              <button class="btn outline small" type="submit"><i class="fas fa-arrow-up"></i></button>
            </form>
            <form method="post" action="{{ url_for('reorder_team_member', member_id=member.id) }}" style="display:inline">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <input type="hidden" name="direction" value="down">
              <button class="btn outline small" type="submit"><i class="fas fa-arrow-down"></i></button>
            </form>
            <form method="post" action="{{ url_for('toggle_team_member', member_id=member.id) }}" style="display:inline">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button class="btn outline small" type="submit" style="color:var(--brand);"><i class="fas fa-eye"></i> {{ 'Hide' if member.active else 'Show' }}</button>
            </form>
            <form method="post" action="{{ url_for('delete_team_member', member_id=member.id) }}" data-confirm="Delete {{ member.name }}?" style="display:inline">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button class="danger-link" type="submit"><i class="fas fa-trash"></i></button>
            </form>
          </div>
          {% endif %}

          <form method="post" action="{{ url_for('edit_team_member', member_id=member.id) }}" enctype="multipart/form-data" class="admin-inline-edit" hidden>
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <label>Name<input name="name" value="{{ member.name }}" required></label>
            <label>Replace Photo <span class="field-hint">(keeps current if blank)</span><input type="file" name="image" accept="image/*"></label>
            <label class="check"><input type="checkbox" name="active" {% if member.active %}checked{% endif %}> Show on website</label>
            {% if can('team_update') %}<button class="btn primary small" type="submit"><i class="fas fa-floppy-disk"></i> Save</button>{% endif %}
          </form>
        </article>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty"><i class="fas fa-users"></i> No members added yet.</div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</section>
{% else %}
<div class="empty"><i class="fas fa-users"></i>No team sections created yet. Add your first section above.</div>
{% endif %}

<script>
document.querySelectorAll("[data-row-select]").forEach(sel => {
  sel.addEventListener("change", function() {
    const form = this.closest("form");
    if (!form) return;
    const grid = form.querySelector(".row-config-grid");
    if (!grid) return;
    const n = parseInt(this.value);
    grid.querySelectorAll("[data-row-config]").forEach(item => {
      const idx = parseInt(item.dataset.rowConfig);
      item.style.display = idx < n ? "" : "none";
    });
  });
});

document.querySelectorAll("[data-toggle-section-edit]").forEach(btn => {
  btn.addEventListener("click", function() {
    const card = btn.closest(".team-section-card");
    if (!card) return;
    const form = card.querySelector(".team-section-edit-form");
    if (!form) return;
    const willOpen = form.hidden;
    form.hidden = !willOpen;
    btn.classList.toggle("active", willOpen);
    btn.innerHTML = willOpen
      ? '<i class="fas fa-xmark"></i> Close'
      : '<i class="fas fa-pen"></i> Edit Section';
  });
});
</script>
{% endblock %}