{% extends "base.html" %}

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

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-map-marker-alt text-danger me-2"></i>Manage Venues</h2>
            <a href="{{ url_for('create_venue') }}" class="btn btn-danger">
                <i class="fas fa-plus-circle me-1"></i> Add New Venue
            </a>
        </div>
        
        <p class="text-muted">Manage your permanent venues. These will appear as options when creating events.</p>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-building me-2"></i>My Permanent Venues</h5>
            </div>
            <div class="card-body p-0">
                {% if venues %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Venue Name</th>
                                <th>Constituency</th>
                                <th>Capacity</th>
                                <th>Usage</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for venue in venues %}
                            <tr>
                                <td>
                                    <strong>{{ venue.name }}</strong>
                                    {% if venue.is_default %}
                                    <span class="badge bg-danger ms-1">Default</span>
                                    {% endif %}
                                </td>
                                <td>{{ venue.constituency or '-' }}</td>
                                <td>{{ venue.capacity or '-' }}</td>
                                <td>
                                    <span class="badge bg-secondary">{{ venue.usage_count }} events</span>
                                </td>
                                <td>
                                    {% if venue.is_active %}
                                    <span class="badge bg-success">Active</span>
                                    {% else %}
                                    <span class="badge bg-secondary">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{{ url_for('edit_venue', venue_id=venue.id) }}" class="btn btn-sm btn-outline-danger">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#deleteModal{{ venue.id }}">
                                        <i class="fas fa-trash-alt"></i> Delete
                                    </button>
                                    
                                    <!-- Delete Modal -->
                                    <div class="modal fade" id="deleteModal{{ venue.id }}" tabindex="-1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header bg-danger text-white">
                                                    <h5 class="modal-title">Delete Venue</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>
                                                <div class="modal-body">
                                                    Are you sure you want to delete "<strong>{{ venue.name }}</strong>"?
                                                    <p class="text-muted mt-2 small">This will not affect existing events using this venue.</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <form method="POST" action="{{ url_for('delete_venue', venue_id=venue.id) }}">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                        <button type="submit" class="btn btn-danger">Delete Venue</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="card shadow mt-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-share-alt text-info me-2"></i>Shared Venues (From Other GROs)</h5>
                    </div>
                    <div class="card-body">
                        {% if shared_venues %}
                        <p class="text-muted small mb-3">These venues are used by other GROs in your constituency. Click "Add to My Venues" to use them.</p>
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead>
                                    <tr>
                                        <th>Venue Name</th>
                                        <th>Constituency</th>
                                        <th>Capacity</th>
                                        <th>Usage Count</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for sv in shared_venues %}
                                    <tr>
                                        <td><strong>{{ sv.name }}</strong></td>
                                        <td>{{ sv.constituency or '-' }}</td>
                                        <td>{{ sv.capacity or '-' }}</td>
                                        <td><span class="badge bg-info">{{ sv.total_usage }} events</span></td>
                                        <td>
                                            <form method="POST" action="{{ url_for('add_shared_venue', venue_name=sv.name) }}" style="display: inline;">
                                                <button type="submit" class="btn btn-sm btn-outline-info">
                                                    <i class="fas fa-plus-circle"></i> Add to My Venues
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <p class="text-muted text-center py-3">No shared venues available in your constituency.</p>
                        {% endif %}
                    </div>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-map-marker-alt fa-3x text-muted mb-3"></i>
                    <p class="text-muted mb-0">No venues yet. <a href="{{ url_for('create_venue') }}">Add your first venue</a></p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card shadow">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>Frequently Used Venues</h5>
            </div>
            <div class="card-body">
                {% if frequent_venues %}
                <div class="list-group list-group-flush">
                    {% for fv in frequent_venues %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <span>{{ fv.venue }}</span>
                        <span class="badge bg-danger rounded-pill">{{ fv.usage_count }} events</span>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted text-center py-3">No venue usage data yet.</p>
                {% endif %}
            </div>
        </div>
        
        <div class="card shadow mt-3">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Tips</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Set a <strong>Default Venue</strong> for quick event creation</li>
                    <li class="mb-2"><i class="fas fa-chart-simple me-2"></i> Usage count helps track popular venues</li>
                    <li><i class="fas fa-trash-alt me-2"></i> Deleting a venue doesn't affect past events</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}