{% extends "base.html" %}

{% block title %}Master Admin Portal - Eventology{% endblock %}

{% block content %}
<div class="flex-between">
    <div>
        <h1>Master Administration</h1>
        <p>Manage Event Management Companies, oversee global event statistics, and approve registrants.</p>
    </div>
    <div class="flex-gap-1">
        <button class="btn btn-primary" data-modal-target="create-emc-modal">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" y1="8" x2="19" y2="14"></line><line x1="22" y1="11" x2="16" y2="11"></line></svg>
            <span>Add EMC</span>
        </button>
        <div class="badge badge-info" style="padding: 0.5rem 1rem;">System Mode: Online</div>
    </div>
</div>

<!-- Aggregated Metrics Grid -->
<div class="grid-cols-3">
    <!-- Stat 1 -->
    <div class="card stat-card">
        <div class="stat-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
        </div>
        <div class="stat-info">
            <span class="stat-value">{{ total_emcs }}</span>
            <span class="stat-label">Event Companies</span>
        </div>
    </div>
    <!-- Stat 2 -->
    <div class="card stat-card">
        <div class="stat-icon" style="background-color: rgba(6, 182, 212, 0.1); color: var(--status-info);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
        </div>
        <div class="stat-info">
            <span class="stat-value">{{ total_events }}</span>
            <span class="stat-label">Active Events</span>
        </div>
    </div>
    <!-- Stat 3 -->
    <div class="card stat-card">
        <div class="stat-icon" style="background-color: rgba(16, 185, 129, 0.1); color: var(--status-success);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg>
        </div>
        <div class="stat-info">
            <span class="stat-value">{{ total_guests }}</span>
            <span class="stat-label">Total Invited Guests</span>
        </div>
    </div>
</div>

<!-- RSVP Status Tracker -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Global RSVP Distribution Summary</h2>
        <span class="badge badge-success">Live Counts</span>
    </div>
    <div style="display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;">
        <div style="flex: 1; min-width: 250px;">
            <p style="margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
                <span>Confirmed Attending ({{ rsvp_attending }})</span>
                <strong>{% if total_guests > 0 %}{{ ((rsvp_attending / total_guests) * 100)|round(1) }}{% else %}0{% endif %}%</strong>
            </p>
            <div class="progress-container">
                <div class="progress-bar" style="width: {% if total_guests > 0 %}{{ (rsvp_attending / total_guests) * 100 }}{% else %}0{% endif %}%; background-color: var(--status-success);"></div>
            </div>
            
            <p style="margin-top: 1rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
                <span>Declined/Not Attending ({{ rsvp_declined }})</span>
                <strong>{% if total_guests > 0 %}{{ ((rsvp_declined / total_guests) * 100)|round(1) }}{% else %}0{% endif %}%</strong>
            </p>
            <div class="progress-container">
                <div class="progress-bar" style="width: {% if total_guests > 0 %}{{ (rsvp_declined / total_guests) * 100 }}{% else %}0{% endif %}%; background-color: var(--status-danger);"></div>
            </div>
        </div>
        
        <div style="flex: 1; min-width: 250px;">
            <p style="margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
                <span>Tentative Responses ({{ rsvp_tentative }})</span>
                <strong>{% if total_guests > 0 %}{{ ((rsvp_tentative / total_guests) * 100)|round(1) }}{% else %}0{% endif %}%</strong>
            </p>
            <div class="progress-container">
                <div class="progress-bar" style="width: {% if total_guests > 0 %}{{ (rsvp_tentative / total_guests) * 100 }}{% else %}0{% endif %}%; background-color: var(--status-info);"></div>
            </div>
            
            <p style="margin-top: 1rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
                <span>No Response/Pending ({{ rsvp_pending }})</span>
                <strong>{% if total_guests > 0 %}{{ ((rsvp_pending / total_guests) * 100)|round(1) }}{% else %}0{% endif %}%</strong>
            </p>
            <div class="progress-container">
                <div class="progress-bar" style="width: {% if total_guests > 0 %}{{ (rsvp_pending / total_guests) * 100 }}{% else %}0{% endif %}%; background-color: var(--status-warning);"></div>
            </div>
        </div>
    </div>
</div>

<!-- EMC Approval Section -->
<div class="card" id="emc-section">
    <div class="card-header">
        <h2 class="card-title">Event Management Companies (EMCs)</h2>
        <input type="text" data-search-input="emc-table" class="form-control btn-sm" placeholder="Filter companies..." style="max-width: 250px;">
    </div>
    
    <div class="table-container">
        <table id="emc-table">
            <thead>
                <tr>
                    <th>Company Name</th>
                    <th>Account Owner</th>
                    <th>Registered Date</th>
                    <th>Current Status</th>
                    <th>Action Controls</th>
                </tr>
            </thead>
            <tbody>
                {% if emc_list %}
                    {% for emc in emc_list %}
                    <tr>
                        <td>
                            <strong>{{ emc.company_name }}</strong>
                        </td>
                        <td>{{ emc.username }}</td>
                        <td>{{ emc.created_at|dateformat }}</td>
                        <td>
                            {% if emc.status == 'approved' %}
                                <span class="badge badge-success">Approved</span>
                            {% elif emc.status == 'pending' %}
                                <span class="badge badge-warning">Pending Review</span>
                            {% else %}
                                <span class="badge badge-danger">Blocked</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="flex-gap-1">
                                {% if emc.status == 'pending' %}
                                    <form action="{{ url_for('admin.approve_emc', user_id=emc.id) }}" method="POST" style="display:inline;">
                                        <button type="submit" class="btn btn-primary btn-sm">Approve</button>
                                    </form>
                                    <form action="{{ url_for('admin.block_emc', user_id=emc.id) }}" method="POST" style="display:inline;">
                                        <button type="submit" class="btn btn-danger btn-sm">Block</button>
                                    </form>
                                {% elif emc.status == 'approved' %}
                                    <form action="{{ url_for('admin.impersonate_emc', user_id=emc.id) }}" method="POST" style="display:inline;">
                                        <button type="submit" class="btn btn-primary btn-sm" title="Login as this EMC">
                                            <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="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
                                            Login As
                                        </button>
                                    </form>
                                    <form action="{{ url_for('admin.block_emc', user_id=emc.id) }}" method="POST" style="display:inline;">
                                        <button type="submit" class="btn btn-danger btn-sm btn-secondary">Block Company</button>
                                    </form>
                                {% elif emc.status == 'blocked' %}
                                    <form action="{{ url_for('admin.unblock_emc', user_id=emc.id) }}" method="POST" style="display:inline;">
                                        <button type="submit" class="btn btn-primary btn-sm">Unblock Account</button>
                                    </form>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 2rem;">
                            No Event Management Companies registered yet.
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Active Events Section -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">All Tracked Events</h2>
        <input type="text" data-search-input="events-table" class="form-control btn-sm" placeholder="Search events..." style="max-width: 250px;">
    </div>
    
    <div class="table-container">
        <table id="events-table">
            <thead>
                <tr>
                    <th>Event Details</th>
                    <th>Scheduled Date</th>
                    <th>Hosting Venue</th>
                    <th>Managing Company</th>
                    <th>RSVP Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% if events %}
                    {% for event in events %}
                    <tr>
                        <td>
                            <strong>{{ event.title }}</strong>
                            <p style="font-size: 0.8rem; color: var(--text-muted);">{{ event.guests|length }} Guests Invited</p>
                        </td>
                        <td>{{ event.date|datetimeformat }}</td>
                        <td>{{ event.location }}</td>
                        <td>{{ event.emc.company_name }}</td>
                        <td>
                            {% set total = event.guests|length %}
                            {% set yes = event.guests|selectattr('rsvp_status', 'equalto', 'attending')|list|length %}
                            {% if total > 0 %}
                                <span class="badge badge-success" style="font-size: 0.7rem;">Attending: {{ yes }}/{{ total }}</span>
                            {% else %}
                                <span class="badge badge-warning" style="font-size: 0.7rem;">Empty Guest List</span>
                            {% endif %}
                        </td>
                        <td>
                            <form action="{{ url_for('admin.delete_event', event_id=event.id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this event? This will remove all guests and RSVPs.');">
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 2rem;">
                            No events currently scheduled in the system.
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Create EMC Modal Overlay -->
<div class="modal-overlay" id="create-emc-modal">
    <div class="modal-content">
        <div class="flex-between" style="margin-bottom: 1.5rem;">
            <h2>Provision Event Management Company</h2>
            <button class="btn btn-secondary btn-sm" data-modal-close style="padding: 0.25rem 0.5rem;">✕</button>
        </div>
        
        <form action="{{ url_for('admin.create_emc') }}" method="POST">
            <div class="form-group">
                <label for="emc-username">EMC Username</label>
                <input type="text" id="emc-username" name="username" class="form-control" placeholder="e.g. apex_events" required>
            </div>
            
            <div class="form-group">
                <label for="emc-password">Temporary Password</label>
                <input type="password" id="emc-password" name="password" class="form-control" placeholder="••••••••" required>
            </div>
            
            <div class="form-group" style="margin-bottom: 1.5rem;">
                <label for="emc-company-name">Company/Agency Name</label>
                <input type="text" id="emc-company-name" name="company_name" class="form-control" placeholder="e.g. Apex Events Group" required>
            </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 & Approve EMC</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}