{% extends "base.html" %}

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

{% block extra_css %}
<style>
    .stat-card {
        border-radius: 10px;
        transition: transform 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-5px);
    }
    .event-card {
        border-left: 4px solid #dc3545;
        transition: all 0.2s;
    }
    .event-card:hover {
        background-color: #f8f9fa;
        transform: translateX(5px);
    }
    .month-header {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        padding: 10px 15px;
        border-radius: 8px;
        margin-top: 20px;
        margin-bottom: 15px;
    }
    .filter-btn {
        margin: 0 5px;
        border-radius: 20px;
    }
    .filter-btn.active {
        background-color: #dc3545;
        color: white;
    }
    .badge-subdivision {
        background-color: #6c757d;
        color: white;
        font-size: 0.7rem;
    }
    .event-date-badge {
        background-color: #dc3545;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        text-align: center;
        min-width: 60px;
    }
    /* Equal height cards */
    .h-100 {
        height: 100% !important;
    }

    .stat-card .card-body {
        min-height: 120px;
    }

    .stat-card .display-4 {
        font-size: 2.5rem;
        font-weight: 700;
    }

    @media (max-width: 768px) {
        .stat-card .display-4 {
            font-size: 1.75rem;
        }
    }
</style>
{% 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-chart-line text-danger me-2"></i>Dashboard</h2>
            <div>
                <span class="badge bg-secondary me-2">
                    <i class="fas fa-calendar-alt me-1"></i>
                    {{ today.strftime('%B %d, %Y') }}
                </span>
                <span class="badge bg-danger">
                    <i class="fas fa-clock me-1"></i>
                    Next 12 Months
                </span>
            </div>
        </div>
        
        <!-- Welcome Message -->
        <div class="alert alert-light border shadow-sm mb-4">
            <i class="fas fa-user-circle text-danger me-2"></i>
            Welcome back, <strong>{{ current_user.username }}</strong>!
            <span class="text-muted ms-2">
                ({{ current_user.role|title }} • Constituency: {{ current_user.constituency or 'Not Assigned' }})
            </span>
        </div>
    </div>
</div>

<!-- Statistics Cards - Equal Height -->
<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="card stat-card bg-primary text-white shadow h-100">
            <div class="card-body d-flex flex-column">
                <div class="d-flex justify-content-between align-items-center flex-grow-1">
                    <div>
                        <h6 class="card-title mb-0 text-uppercase small fw-semibold">Total Events</h6>
                        <h2 class="mb-0 display-4 fw-bold">{{ stats.total_events }}</h2>
                    </div>
                    <i class="fas fa-calendar-alt fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stat-card bg-success text-white shadow h-100">
            <div class="card-body d-flex flex-column">
                <div class="d-flex justify-content-between align-items-center flex-grow-1">
                    <div>
                        <h6 class="card-title mb-0 text-uppercase small fw-semibold">Upcoming Events</h6>
                        <h2 class="mb-0 display-4 fw-bold">{{ stats.upcoming_events }}</h2>
                        <small class="opacity-75">Next 12 months</small>
                    </div>
                    <i class="fas fa-calendar-week fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stat-card bg-secondary text-white shadow h-100">
            <div class="card-body d-flex flex-column">
                <div class="d-flex justify-content-between align-items-center flex-grow-1">
                    <div>
                        <h6 class="card-title mb-0 text-uppercase small fw-semibold">Completed</h6>
                        <h2 class="mb-0 display-4 fw-bold">{{ stats.completed_events }}</h2>
                    </div>
                    <i class="fas fa-check-circle fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stat-card bg-info text-white shadow h-100">
            <div class="card-body d-flex flex-column">
                <div class="d-flex justify-content-between align-items-center flex-grow-1">
                    <div>
                        <h6 class="card-title mb-0 text-uppercase small fw-semibold">My Events</h6>
                        <h2 class="mb-0 display-4 fw-bold">{{ stats.my_events }}</h2>
                        <small class="opacity-75">As Organising GRO</small>
                    </div>
                    <i class="fas fa-user-check fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Section -->
<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>Filter Upcoming Events</h5>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ url_for('dashboard') }}" id="filterForm">
            <div class="row align-items-center">
                <div class="col-md-4 mb-2 mb-md-0">
                    <label class="form-label mb-1">Filter by:</label>
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="filter" id="filterAll" value="all" 
                               {% if filter_type == 'all' %}checked{% endif %} onchange="this.form.submit()">
                        <label class="btn btn-outline-danger" for="filterAll">
                            <i class="fas fa-globe me-1"></i> All (My Constituency)
                        </label>
                        
                        {% if unique_subdivisions %}
                        <input type="radio" class="btn-check" name="filter" id="filterSubdivision" value="subdivision"
                               {% if filter_type == 'subdivision' %}checked{% endif %} onchange="document.getElementById('subdivisionSelect').style.display='inline-block'; this.form.submit()">
                        <label class="btn btn-outline-danger" for="filterSubdivision">
                            <i class="fas fa-layer-group me-1"></i> By Sub-Division
                        </label>
                        {% endif %}
                        
                        {% if current_user.is_organising_gro %}
                        <input type="radio" class="btn-check" name="filter" id="filterMyself" value="myself"
                               {% if filter_type == 'myself' %}checked{% endif %} onchange="this.form.submit()">
                        <label class="btn btn-outline-danger" for="filterMyself">
                            <i class="fas fa-user me-1"></i> My Events Only
                        </label>
                        {% endif %}
                    </div>
                </div>
                
                {% if unique_subdivisions %}
                <div class="col-md-4 mb-2 mb-md-0" id="subdivisionSelectDiv" style="display: {% if filter_type == 'subdivision' %}block{% else %}none{% endif %};">
                    <label class="form-label mb-1">Sub-Division:</label>
                    <select name="subdivision" id="subdivisionSelect" class="form-select" onchange="this.form.submit()">
                        <option value="">All Sub-Divisions</option>
                        {% for sub in unique_subdivisions %}
                        <option value="{{ sub }}" {% if selected_subdivision == sub %}selected{% endif %}>{{ sub }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}
                
            </div>
        </form>
    </div>
</div>

<!-- Upcoming Events Section (12 Months) -->
<div class="card shadow">
    <div class="card-header bg-white">
        <h5 class="mb-0">
            <i class="fas fa-calendar-alt text-danger me-2"></i>
            Upcoming Events (Next 12 Months)
            <span class="badge bg-danger ms-2">{{ upcoming_events|length }} Events</span>
        </h5>
    </div>
    <div class="card-body">
        {% if events_by_month %}
            {% for month_key, month_data in events_by_month.items() %}
            <div class="month-header">
                <i class="fas fa-calendar-alt me-2"></i>
                <strong>{{ month_data.name }}</strong>
                <span class="badge bg-light text-dark ms-2">{{ month_data.events|length }} events</span>
            </div>
            
            <div class="row">
                {% for event in month_data.events %}
                <div class="col-md-6 col-lg-4 mb-3">
                    <div class="card event-card h-100 shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-calendar-day text-danger me-1"></i>
                                    {{ event.event_date.strftime('%b %d, %Y') }}
                                </h6>
                                {% if event.status == 'scheduled' %}
                                <span class="badge bg-success">Upcoming</span>
                                {% elif event.status == 'completed' %}
                                <span class="badge bg-secondary">Completed</span>
                                {% else %}
                                <span class="badge bg-danger">Cancelled</span>
                                {% endif %}
                            </div>
                            
                            <h6 class="mt-2">
                                <a href="{{ url_for('edit_event', event_id=event.id) }}" class="text-decoration-none text-dark">
                                    {{ event.name }}
                                </a>
                            </h6>
                            
                            <div class="mt-2">
                                <div class="small text-muted mb-1">
                                    <i class="fas fa-map-marker-alt me-1"></i> {{ event.venue }}
                                </div>
                                <div class="small text-muted mb-1">
                                    <i class="fas fa-clock me-1"></i> 
                                    {{ event.start_time.strftime('%I:%M %p') }} - {{ event.end_time.strftime('%I:%M %p') }}
                                </div>
                                <div class="small text-muted mb-1">
                                    <i class="fas fa-building me-1"></i> {{ event.constituency or 'N/A' }}
                                </div>
                                {% if event.sub_division %}
                                <div class="small text-muted mb-1">
                                    <i class="fas fa-layer-group me-1"></i> 
                                    <span class="badge-subdivision">{{ event.sub_division }}</span>
                                </div>
                                {% endif %}
                                <div class="small text-muted">
                                    <i class="fas fa-user me-1"></i> GRO: {{ event.organising_gro }}
                                </div>
                                {% if event.expected_participants > 0 %}
                                <div class="small text-muted mt-1">
                                    <i class="fas fa-users me-1"></i> Expected: {{ event.expected_participants }}
                                </div>
                                {% endif %}
                                {% if event.gra_attending %}
                                <div class="small text-muted mt-1">
                                    <i class="fas fa-user-tie me-1"></i> GRA: 
                                    {% if event.gra_attending_confirmed %}
                                        <span class="text-success">Confirmed</span>
                                    {% else %}
                                        <span class="text-warning">Pending</span>
                                    {% endif %}
                                    {% if event.gra_name %}
                                        ({{ event.gra_name }})
                                    {% endif %}
                                    {% if event.gra_start_time or event.gra_end_time %}
                                        <br><i class="fas fa-clock ms-3 me-1"></i> 
                                        {% if event.gra_start_time %}{{ event.gra_start_time.strftime('%I:%M %p') }}{% endif %}
                                        {% if event.gra_end_time %} - {{ event.gra_end_time.strftime('%I:%M %p') }}{% endif %}
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="card-footer bg-transparent">
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    {{ ((event.event_date - today).days) }} days from now
                                </small>
                                {% if event.can_edit(current_user) %}
                                <a href="{{ url_for('edit_event', event_id=event.id) }}" class="btn btn-sm btn-outline-danger">
                                    <i class="fas fa-edit"></i> Edit
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                <p class="text-muted mb-0">No upcoming events found for the next 12 months.</p>
                <p class="text-muted small">Try changing the filter or <a href="{{ url_for('create_event') }}">create a new event</a>.</p>
            </div>
        {% endif %}
    </div>
</div>

<script>
    // Show/hide subdivision select based on filter selection
    document.querySelectorAll('input[name="filter"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const subdivisionDiv = document.getElementById('subdivisionSelectDiv');
            if (subdivisionDiv) {
                subdivisionDiv.style.display = (this.value === 'subdivision') ? 'block' : 'none';
            }
            document.getElementById('filterForm').submit();
        });
    });
</script>
{% endblock %}