{% extends "base.html" %}

{% block title %}Caller Workspace - Eventology{% endblock %}

{% block content %}
<div class="flex-between">
    <div>
        <h1>My Call Operations</h1>
        <p>Select an assigned event to access your tele-campaign roster queue and log guest responses.</p>
    </div>
</div>

<!-- Assigned Events Roster -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Assigned Calling Campaigns</h2>
        <span class="badge badge-info">{{ event_stats|length }} Events Assigned</span>
    </div>
    
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Event Details</th>
                    <th>My Guest Roster</th>
                    <th>My Campaign Status</th>
                    <th>Roster Progress</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% if event_stats %}
                    {% for item in event_stats %}
                    {% set ev = item.event %}
                    <tr>
                        <td>
                            <strong>{{ ev.title }}</strong>
                            <p style="font-size: 0.85rem; color: var(--text-secondary);">
                                📅 {{ ev.date|dateformat }} | 📍 {{ ev.location or 'Main Hall' }}
                            </p>
                        </td>
                        <td>
                            <span class="badge badge-info">{{ item.total }} Assigned</span>
                        </td>
                        <td>
                            <div style="font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.25rem;">
                                <div><span style="color: var(--status-success);">●</span> Attending: <strong>{{ item.attending }}</strong></div>
                                <div><span style="color: var(--status-warning);">●</span> Pending Call: <strong>{{ item.pending }}</strong></div>
                            </div>
                        </td>
                        <td>
                            {% set resolved = item.total - item.pending %}
                            {% set pct = ((resolved / item.total) * 100)|round(0)|int if item.total > 0 else 0 %}
                            <div style="width: 120px;">
                                <div style="display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 2px;">
                                    <span>Calling Progress</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('caller.rsvp_call', event_id=ev.id) }}" class="btn btn-primary btn-sm">
                                <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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                                <span>Open Call Room</span>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 3rem;">
                            <div style="font-size: 2.5rem; margin-bottom: 1rem;">📞</div>
                            <h3>All Clear!</h3>
                            <p style="margin-top: 0.25rem;">You do not have any active caller assignments. Contact your Event Management Company to assign lists.</p>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}