{% extends 'base.html' %}
{% block title %}{{ action }} Event - EventNest{% endblock %}
{% block content %}
<div class="profile-wrap">
  <h1 class="section-title">{{ action }} Event</h1>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}

    <div class="card mb-3">
      <div class="card-body">
        <p class="section-sub-label mb-3">Basic Info</p>
        <div class="form-group">
          <label class="form-label">Event Title <span class="required-star">*</span></label>
          <input type="text" name="title" value="{{ event.title|default:'' }}" class="form-input" required>
        </div>
        <div class="form-group">
          <label class="form-label">Description <span class="required-star">*</span></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">Event Type</label>
            <select name="event_type" class="form-input">
              <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 class="form-group">
            <label class="form-label">Category</label>
            <select name="category" class="form-input">
              <option value="">Select category</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>
      </div>
    </div>

    {% if all_tags %}
    <div class="card mb-3">
      <div class="card-body">
        <p class="section-sub-label mb-2">Tags</p>
        <p class="form-hint mb-2">Select relevant tags for your event.</p>
        <div class="web-tag-picker">
          {% for tag in all_tags %}
          <label class="web-tag-option {% if tag.id in selected_tag_ids %}selected{% endif %}"
                 style="--tc:{{ tag.color }}">
            <input type="checkbox" name="tags" value="{{ tag.id }}"
                   {% if tag.id in selected_tag_ids %}checked{% endif %}
                   class="web-tag-checkbox">
            <span class="web-tag-dot" style="background:{{ tag.color }}"></span>
            {{ tag.name }}
          </label>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}

    <div class="card mb-3">
      <div class="card-body">
        <p class="section-sub-label mb-3">Date &amp; Location</p>
        <div class="grid-2">
          <div class="form-group">
            <label class="form-label">Start Date &amp; Time <span class="required-star">*</span></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 Date &amp; Time <span class="required-star">*</span></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">Full Address</label>
          <textarea name="address" rows="2" class="form-input">{{ event.address|default:'' }}</textarea>
        </div>
        <div class="form-group">
          <label class="form-label">Online Meeting Link</label>
          <input type="url" name="online_link" value="{{ event.online_link|default:'' }}" class="form-input">
        </div>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <p class="section-sub-label mb-3">Tickets &amp; Capacity</p>
        <div class="grid-stats">
          <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">
            <label class="form-label">Free Event?</label>
            <div class="flex items-center gap-1 mt-1">
              <input type="checkbox" name="is_free" id="is_free" {% if event.is_free or not event %}checked{% endif %}>
              <label for="is_free" class="text-sm">Mark as free</label>
            </div>
          </div>
          {% if action == 'Edit' %}
          <div class="form-group">
            <label class="form-label">Status</label>
            <select name="status" class="form-input">
              <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>
            </select>
          </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <p class="section-sub-label mb-2">Banner Image</p>
        {% if event %}
          {% with banner=event.get_banner %}
          {% if banner %}
          <div class="mb-2">
            <img src="{{ banner.file.url }}" alt="Current banner"
                 style="max-height:160px;border-radius:8px;object-fit:cover;width:100%">
          </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 btn-lg">{{ action }} Event</button>
      <a href="{% url 'web_events:organiser_events' %}" class="btn btn-outline btn-lg">Cancel</a>
    </div>
  </form>
</div>

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