{% extends 'admin/base_site.html' %}
{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}
{% block nav_events %}active{% endblock %}

{% block topbar_actions %}
<a href="{% url 'admin_events:event_list' %}" class="btn btn-outline btn-sm">&larr; Back to Events</a>
{% endblock %}

{% block content %}
<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="grid-2 mb-3">
    <div>
      <div class="card mb-3">
        <div class="card-body">
          <p class="panel-section-title mb-3">Basic Info</p>
          <div class="form-group">
            <label class="form-label">Title *</label>
            <input type="text" name="title" value="{{ event.title|default:'' }}" class="form-input" required>
          </div>
          <div class="form-group">
            <label class="form-label">Description *</label>
            <textarea name="description" rows="5" class="form-input" required>{{ event.description|default:'' }}</textarea>
          </div>
          <div class="grid-2">
            <div class="form-group">
              <label class="form-label">Category</label>
              <select name="category" class="form-input form-select">
                <option value="">- None -</option>
                {% for cat in categories %}
                <optgroup label="{{ cat.title }}">
                  <option value="{{ cat.id }}" {% if event.category_id == cat.id %}selected{% endif %}>{{ cat.title }}</option>
                  {% for child in cat.children.all %}
                  <option value="{{ child.id }}" {% if event.category_id == child.id %}selected{% endif %}>&nbsp;&nbsp;&#8627; {{ child.title }}</option>
                  {% endfor %}
                </optgroup>
                {% endfor %}
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Event Type</label>
              <select name="event_type" class="form-input form-select">
                <option value="offline" {% if event.event_type == 'offline' %}selected{% endif %}>Offline</option>
                <option value="online"  {% if event.event_type == 'online'  %}selected{% endif %}>Online</option>
                <option value="hybrid"  {% if event.event_type == 'hybrid'  %}selected{% endif %}>Hybrid</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">Status</label>
            <select name="status" class="form-input form-select">
              <option value="draft"     {% if event.status == 'draft'     %}selected{% endif %}>Draft</option>
              <option value="published" {% if event.status == 'published' %}selected{% endif %}>Published</option>
              <option value="cancelled" {% if event.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
              <option value="completed" {% if event.status == 'completed' %}selected{% endif %}>Completed</option>
            </select>
          </div>
        </div>
      </div>

      <!-- Tags -->
      <div class="card mb-3">
        <div class="card-body">
          <p class="panel-section-title mb-2">Tags</p>
          <p class="form-hint mb-2">Select tags to categorise this event.</p>
          <div class="tag-picker" id="tagPicker">
            {% for tag in all_tags %}
            <label class="tag-option {% if tag.id in selected_tag_ids %}selected{% endif %}"
                   style="--tag-color:{{ tag.color }}" title="{{ tag.name }}">
              <input type="checkbox" name="tags" value="{{ tag.id }}"
                     {% if tag.id in selected_tag_ids %}checked{% endif %}
                     class="tag-checkbox">
              <span class="tag-dot" style="background:{{ tag.color }}"></span>
              {{ tag.name }}
            </label>
            {% empty %}
            <p class="text-sm text-muted">No tags yet. <a href="{% url 'admin_events:tag_create' %}" class="link-accent">Create one</a>.</p>
            {% endfor %}
          </div>
        </div>
      </div>

      <div class="card mb-3">
        <div class="card-body">
          <p class="panel-section-title mb-3">Date &amp; Location</p>
          <div class="grid-2">
            <div class="form-group">
              <label class="form-label">Start *</label>
              <input type="datetime-local" name="start_date" value="{{ event.start_date|date:'Y-m-d\TH:i'|default:'' }}" class="form-input" required>
            </div>
            <div class="form-group">
              <label class="form-label">End *</label>
              <input type="datetime-local" name="end_date" value="{{ event.end_date|date:'Y-m-d\TH:i'|default:'' }}" class="form-input" required>
            </div>
            <div class="form-group">
              <label class="form-label">City</label>
              <input type="text" name="city" value="{{ event.city|default:'' }}" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">Venue</label>
              <input type="text" name="venue" value="{{ event.venue|default:'' }}" class="form-input">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">Address</label>
            <textarea name="address" rows="2" class="form-input">{{ event.address|default:'' }}</textarea>
          </div>
          <div class="form-group">
            <label class="form-label">Online Link</label>
            <input type="url" name="online_link" value="{{ event.online_link|default:'' }}" class="form-input">
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="card mb-3">
        <div class="card-body">
          <p class="panel-section-title mb-3">Tickets &amp; Capacity</p>
          <div class="form-group">
            <label class="form-label">Max Capacity <span class="text-muted">(0 = unlimited)</span></label>
            <input type="number" name="max_capacity" value="{{ event.max_capacity|default:0 }}" class="form-input" min="0">
          </div>
          <div class="form-group">
            <label class="form-label">Ticket Price (&#8377;)</label>
            <input type="number" name="ticket_price" value="{{ event.ticket_price|default:0 }}" class="form-input" min="0" step="0.01">
          </div>
          <div class="form-group">
            <div class="flex items-center gap-2">
              <input type="checkbox" name="is_free" id="is_free" {% if event.is_free or not event %}checked{% endif %}>
              <label for="is_free" class="form-label mb-0">Free Event</label>
            </div>
          </div>
          <div class="form-group">
            <div class="flex items-center gap-2">
              <input type="checkbox" name="is_featured" id="is_featured" {% if event.is_featured %}checked{% endif %}>
              <label for="is_featured" class="form-label mb-0">Featured</label>
            </div>
          </div>
        </div>
      </div>
      <div class="card mb-3">
        <div class="card-body">
          <p class="panel-section-title mb-3">Organiser</p>
          <div class="form-group mb-0">
            <label class="form-label">Organiser User ID</label>
            <input type="number" name="organiser_id" value="{{ event.organiser_id|default:'' }}" class="form-input" placeholder="Leave blank = you">
            <p class="form-hint">Enter a user ID to assign organiser. Blank = yourself.</p>
          </div>
          {% if event %}<div class="alert alert-info mt-2 text-sm">Current: <strong>{{ event.organiser.username }}</strong> (ID: {{ event.organiser_id }})</div>{% endif %}
        </div>
      </div>
      <div class="card mb-3">
        <div class="card-body">
          <p class="panel-section-title mb-3">Banner</p>
          {% if event %}
            {% with banner=event.get_banner %}
            {% if banner %}
            <div class="mb-2">
              <img src="{{ banner.file.url }}" alt="Banner" style="width:100%;max-height:160px;object-fit:cover;border-radius:8px;">
            </div>
            {% endif %}
            {% endwith %}
          {% endif %}
          <input type="file" name="banner" accept="image/*" class="form-input">
        </div>
      </div>
      <div class="flex gap-2">
        <button type="submit" class="btn btn-gradient">{{ action }} Event</button>
        <a href="{% url 'admin_events:event_list' %}" class="btn btn-outline">Cancel</a>
      </div>
    </div>
  </div>
</form>

<script>
document.querySelectorAll('.tag-option').forEach(label=>{
  label.addEventListener('click',()=>{
    const cb=label.querySelector('.tag-checkbox');
    cb.checked=!cb.checked;
    label.classList.toggle('selected',cb.checked);
  });
});
</script>
{% endblock %}