{% extends "base.html" %}

{% block title %}Events Control Center - Eventology{% endblock %}

{% block content %}
<div class="flex-between">
    <div>
        <h1>Events Control Center</h1>
        <p>Coordinate upcoming schedules, import invitees, and manage your tele-calling campaigns.</p>
    </div>
    <button class="btn btn-primary" data-modal-target="create-event-modal">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
        <span>Host New Event</span>
    </button>
</div>

<!-- Events List -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Scheduled Conferences & Galas</h2>
        <input type="text" data-search-input="events-table" class="form-control btn-sm" placeholder="Filter events..." style="max-width: 250px;">
    </div>
    
    <div class="table-container">
        <table id="events-table">
            <thead>
                <tr>
                    <th>Event Details</th>
                    <th>Date & Time</th>
                    <th>Venue Location</th>
                    <th>Total Guests</th>
                    <th>Roster Progress</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% if events %}
                    {% for event in events %}
                    <tr>
                        <td>
                            <strong>{{ event.title }}</strong>
                            <p style="font-size: 0.85rem; color: var(--text-secondary); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                {{ event.description or 'No description provided.' }}
                            </p>
                        </td>
                        <td>{{ event.date|datetimeformat }}</td>
                        <td>{{ event.location or 'Not specified' }}</td>
                        <td>
                            <span class="badge badge-info">{{ event.guests|length }} Invited</span>
                        </td>
                        <td>
                            {% set total = event.guests|length %}
                            {% set yes = event.guests|selectattr('rsvp_status', 'equalto', 'attending')|list|length %}
                            {% set pct = ((yes / total) * 100)|round(0)|int if total > 0 else 0 %}
                            <div style="width: 120px;">
                                <div style="display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 2px;">
                                    <span>RSVPs</span>
                                    <strong>{{ pct }}%</strong>
                                </div>
                                <div class="progress-container" style="height: 6px;">
                                    <div class="progress-bar" style="width: {{ pct }}%; background: var(--status-success);"></div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <a href="{{ url_for('emc.event_detail', event_id=event.id) }}" class="btn btn-secondary btn-sm">
                                <span>Manage Event</span>
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5l7 7-7 7"></path></svg>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 3rem;">
                            <div style="font-size: 2.5rem; margin-bottom: 1rem;">📅</div>
                            <h3>No Events Scheduled</h3>
                            <p style="margin-top: 0.25rem; margin-bottom: 1.5rem;">Create your first event to start assigning invite lists.</p>
                            <button class="btn btn-primary btn-sm" data-modal-target="create-event-modal">Add Event Now</button>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Create Event Modal Overlay -->
<div class="modal-overlay" id="create-event-modal">
    <div class="modal-content">
        <div class="flex-between" style="margin-bottom: 1.5rem;">
            <h2>Configure New Event</h2>
            <button class="btn btn-secondary btn-sm" data-modal-close style="padding: 0.25rem 0.5rem;">✕</button>
        </div>
        
        <form action="{{ url_for('emc.dashboard') }}" method="POST">
            <div class="form-group">
                <label for="event-title">Event Title</label>
                <input type="text" id="event-title" name="title" class="form-control" placeholder="e.g. annual Tech Summit 2026" required>
            </div>
            
            <div class="form-group">
                <label for="event-date">Scheduled Date & Time</label>
                <input type="datetime-local" id="event-date" name="date" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="event-location">Venue/Location</label>
                <input type="text" id="event-location" name="location" class="form-control" placeholder="e.g. Grand Plaza Hall Room B">
            </div>
            
            <div class="form-group">
                <label for="event-desc">Brief Description</label>
                <textarea id="event-desc" name="description" class="form-control" rows="3" placeholder="Outline agenda or VIP instructions..."></textarea>
            </div>
            
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" data-modal-close>Cancel</button>
                <button type="submit" class="btn btn-primary">Create Event</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}