{% extends "base.html" %}

{% block title %}Events - Grassroots Events{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>Events Management</h2>
        <p class="text-muted">Manage your grassroots events</p>
    </div>
</div>

<div class="card shadow mb-4">
    <div class="card-header bg-white">
        <h5 class="mb-0"><i class="fas fa-filter text-danger me-2"></i>Quick Filters</h5>
    </div>
    <div class="card-body">
        <div class="btn-group" role="group">
            <a href="{{ url_for('events', status='upcoming') }}" class="btn btn-outline-danger {% if status == 'upcoming' %}active{% endif %}">
                <i class="fas fa-calendar-week me-1"></i> Upcoming (12 months)
            </a>
            <a href="{{ url_for('events', status='past') }}" class="btn btn-outline-secondary">
                <i class="fas fa-history me-1"></i> Past Events
            </a>
            <a href="{{ url_for('events', status='all') }}" class="btn btn-outline-secondary">
                <i class="fas fa-list me-1"></i> All Events
            </a>
        </div>
        
        {% if current_user.is_organising_gro %}
        <div class="form-check form-switch d-inline-block ms-3">
            <input class="form-check-input" type="checkbox" id="myOnlySwitch" {% if my_only %}checked{% endif %} 
                   onchange="window.location.href='{{ url_for('events', my_only='true' if not my_only else 'false', status=status) }}'">
            <label class="form-check-label" for="myOnlySwitch">
                <i class="fas fa-user me-1"></i> My Events Only
            </label>
        </div>
        {% endif %}
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-8">
        <form method="GET" class="row g-2">
            <div class="col-auto">
                <select name="status" class="form-select">
                    <option value="upcoming" {% if status == 'upcoming' %}selected{% endif %}>Upcoming</option>
                    <option value="past" {% if status == 'past' %}selected{% endif %}>Past</option>
                    <option value="cancelled" {% if status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                </select>
            </div>
            <div class="col">
                <input type="text" name="search" class="form-control" placeholder="Search events..." value="{{ search }}">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ url_for('events') }}" class="btn btn-secondary">Reset</a>
            </div>
        </form>
    </div>
    <div class="col-md-4 text-end">
        {% if current_user.can_manage_events %}
        <a href="{{ url_for('create_event') }}" class="btn btn-success">
            <i class="fas fa-plus"></i> Create Event
        </a>
        {% endif %}
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                {% if events %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Event Name</th>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Venue</th>
                                    <th>GRO</th>
                                    <th>GRA</th>
                                    <th>Participants</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for event in events %}
                                <tr>
                                    <td>{{ event.name }}</td>
                                    <td>{{ event.event_date.strftime('%Y-%m-%d') }}</td>
                                    <td>{{ event.start_time.strftime('%H:%M') }} - {{ event.end_time.strftime('%H:%M') }}</td>
                                    <td>{{ event.venue }}</td>
                                    <td>{{ event.organising_gro }}</td>
                                    <td>
                                        {% if event.gra_attending %}
                                            <span class="badge bg-info">GRA Attending</span>
                                            {% if event.gra_attending_confirmed %}
                                                <span class="badge bg-success">Confirmed</span>
                                            {% else %}
                                                <span class="badge bg-warning">Pending</span>
                                            {% endif %}
                                            {% if event.gra_start_time or event.gra_end_time %}
                                                <div class="small text-muted mt-1">
                                                    {% if event.gra_start_time %}{{ event.gra_start_time.strftime('%H:%M') }}{% endif %}
                                                    {% if event.gra_end_time %} - {{ event.gra_end_time.strftime('%H:%M') }}{% endif %}
                                                </div>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ event.expected_participants }}</td>
                                    <td>
                                        {% if event.status == 'scheduled' %}
                                            {% if event.event_date < today %}
                                                <span class="badge bg-secondary">Past Due</span>
                                            {% else %}
                                                <span class="badge bg-success">Scheduled</span>
                                            {% endif %}
                                        {% elif event.status == 'completed' %}
                                            <span class="badge bg-secondary">Completed</span>
                                        {% elif event.status == 'cancelled' %}
                                            <span class="badge bg-danger">Cancelled</span>
                                        {% endif %}
                                    </td>
                                    <td class="action-buttons">
                                        <a href="{{ url_for('edit_event', event_id=event.id) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                        {% if event.can_edit(current_user) %}
                                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ event.id }}">
                                            <i class="fas fa-trash-alt"></i> Cancel
                                        </button>
                                        
                                        <!-- Delete Modal -->
                                        <div class="modal fade" id="deleteModal{{ event.id }}" tabindex="-1">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header bg-danger text-white">
                                                        <h5 class="modal-title">Cancel Event</h5>
                                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        Are you sure you want to cancel "<strong>{{ event.name }}</strong>"?
                                                    </div>
                                                    <div class="modal-footer">
                                                        <form method="POST" action="{{ url_for('delete_event', event_id=event.id) }}">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, Go Back</button>
                                                            <button type="submit" class="btn btn-danger">Yes, Cancel Event</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% else %}
                                        <span class="text-muted small">View only</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-muted text-center py-4">No events found matching your criteria.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}