{% extends "base.html" %}

{% block title %}Calling Room: {{ event.title }} - Eventology{% endblock %}

{% block content %}
<!-- Page Headers -->
<div>
    <a href="{{ url_for('caller.dashboard') }}" class="btn btn-secondary btn-sm" style="margin-bottom: 1rem;">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
        <span>Back to Campaigns</span>
    </a>
    
    <div class="flex-between">
        <div>
            <h1>Call Center: {{ event.title }}</h1>
            <p>Go down the list below, contact each invitee, and record their response.</p>
        </div>
        <span class="badge badge-info" style="font-size: 0.85rem;">{{ guests|length }} Assigned Contacts</span>
    </div>
</div>

<div class="grid-cols-3" style="align-items: start; grid-template-columns: 2fr 1fr;">
    
    <!-- Guest List Queue -->
    <div class="card" style="grid-column: span 1;">
        <div class="card-header">
            <h2 class="card-title">Assigned Calling Queue</h2>
            <input type="text" data-search-input="caller-queue-table" class="form-control btn-sm" placeholder="Filter roster list..." style="max-width: 220px;">
        </div>
        
        <div class="table-container">
            <table id="caller-queue-table">
                <thead>
                    <tr>
                        <th>Invitee Name</th>
                        <th>Phone / Contact</th>
                        <th>RSVP Status</th>
                        <th>Roster Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for guest in guests %}
                    <tr>
                        <td>
                            <strong>{{ guest.name }}</strong>
                            {% if guest.notes %}
                                <p style="font-size: 0.8rem; color: var(--text-secondary); max-width: 250px; overflow: hidden; text-overflow: ellipsis;" title="{{ guest.notes }}">
                                    📝 {{ guest.notes }}
                                </p>
                            {% endif %}
                        </td>
                        <td>
                            <div style="display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;">
                                <div>
                                    <div style="font-weight: 500;">{{ guest.phone or 'No number' }}</div>
                                    <div style="font-size: 0.75rem; color: var(--text-secondary);">{{ guest.email or '' }}</div>
                                </div>
                                {% if guest.phone %}
                                <a href="tel:{{ guest.phone }}" class="btn btn-secondary btn-sm" style="border-radius: 50%; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background-color: rgba(16, 185, 129, 0.1); color: var(--status-success); border-color: rgba(16, 185, 129, 0.2);" title="Call {{ guest.phone }} from this device">
                                    <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>
                                </a>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            {% if guest.rsvp_status == 'attending' %}
                                <span class="badge badge-success">Attending</span>
                            {% elif guest.rsvp_status == 'not_attending' %}
                                <span class="badge badge-danger">Declined</span>
                            {% elif guest.rsvp_status == 'tentative' %}
                                <span class="badge badge-info">Tentative</span>
                            {% else %}
                                <span class="badge badge-warning">Pending</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="flex-gap-1">
                                <!-- Button carries all guest state inside data attributes for the modal to extract -->
                                <button class="btn btn-secondary btn-sm update-rsvp-trigger"
                                        data-id="{{ guest.id }}"
                                        data-name="{{ guest.name }}"
                                        data-rsvp="{{ guest.rsvp_status }}"
                                        data-arrival="{{ guest.arrival_details or '' }}"
                                        data-departure="{{ guest.departure_details or '' }}"
                                        data-notes="{{ guest.notes or '' }}">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                                    <span>Log Call</span>
                                </button>
                                
                                {% if not guest.call_completed_at %}
                                    <form action="{{ url_for('caller.complete_call', guest_id=guest.id) }}" method="POST" style="display:inline;">
                                        <button type="submit" class="btn btn-primary btn-sm" style="background: linear-gradient(135deg, var(--status-success), #059669); color: white;" title="Mark Call as Done">
                                            ✓ Done
                                        </button>
                                    </form>
                                {% else %}
                                    <span class="badge badge-success" title="Completed at {{ guest.call_completed_at|datetimeformat }}">Done ✓</span>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Event Schedule Sidebar Reference -->
    <div class="card" style="grid-column: span 1;">
        <h2 class="mb-1">Timeline Reference</h2>
        <p class="mb-2" style="font-size: 0.9rem;">Review schedules and locations to answer guest inquiries during calls.</p>
        
        {% if schedule %}
            <div class="timeline" style="margin-top: 1.5rem;">
                {% for item in schedule %}
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-time">{{ item.start_time|datetimeformat('%I:%M %p') }}</div>
                    <div class="timeline-title" style="font-size: 0.95rem;">{{ item.title }}</div>
                    <p class="timeline-desc" style="font-size: 0.85rem; color: var(--text-secondary);">
                        📍 {{ item.location or 'Main Venue' }}<br>
                        {{ item.description or 'No extra notes.' }}
                    </p>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="text-align: center; color: var(--text-muted); padding: 2rem;">
                <p>No sub-event schedule is currently uploaded by the company.</p>
            </div>
        {% endif %}
    </div>

</div>

<!-- RSVP Logging Modal -->
<div class="modal-overlay" id="rsvp-logging-modal">
    <div class="modal-content">
        <div class="flex-between" style="margin-bottom: 1.5rem;">
            <h2 id="modal-guest-name">Log Roster Response</h2>
            <button class="btn btn-secondary btn-sm" data-modal-close style="padding: 0.25rem 0.5rem;">✕</button>
        </div>
        
        <form id="rsvp-modal-form" method="POST">
            <div class="form-group">
                <label for="modal-rsvp-status">RSVP Response</label>
                <select id="modal-rsvp-status" name="rsvp_status" class="form-control" style="background-color: var(--bg-secondary); cursor: pointer;" required>
                    <option value="pending">Pending Callback</option>
                    <option value="attending">Attending / Confirmed</option>
                    <option value="not_attending">Declined / Not Attending</option>
                    <option value="tentative">Tentative / Undecided</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="modal-arrival">Arrival Schedule</label>
                <textarea id="modal-arrival" name="arrival_details" class="form-control" rows="2" placeholder="e.g. Arrives Flight AI-302 on May 30th at 14:00. Requires pickup."></textarea>
            </div>
            
            <div class="form-group">
                <label for="modal-departure">Departure Schedule</label>
                <textarea id="modal-departure" name="departure_details" class="form-control" rows="2" placeholder="e.g. Leaves Hotel checkout on June 2nd, self-drive."></textarea>
            </div>
            
            <div class="form-group" style="margin-bottom: 1.5rem;">
                <label for="modal-notes">Call Notes & Log logs</label>
                <textarea id="modal-notes" name="notes" class="form-control" rows="3" placeholder="e.g. Spoke with spouse. Sent PDF invite. Call back tomorrow morning."></textarea>
            </div>
            
            <input type="hidden" id="modal-mark-done" name="mark_done" value="false">
            
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" data-modal-close>Close</button>
                <button type="submit" class="btn btn-secondary" style="border-color: var(--accent-primary); color: var(--accent-primary);">Save RSVP</button>
                <button type="submit" onclick="document.getElementById('modal-mark-done').value='true';" class="btn btn-primary" style="background: linear-gradient(135deg, var(--status-success), #059669); color: white;">✓ Save & Done</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Bind triggers for dynamic log modal data fill
    const rsvpButtons = document.querySelectorAll('.update-rsvp-trigger');
    const modal = document.getElementById('rsvp-logging-modal');
    
    // Modal input elements
    const form = document.getElementById('rsvp-modal-form');
    const titleHeader = document.getElementById('modal-guest-name');
    const rsvpSelect = document.getElementById('modal-rsvp-status');
    const arrivalInput = document.getElementById('modal-arrival');
    const departureInput = document.getElementById('modal-departure');
    const notesInput = document.getElementById('modal-notes');

    rsvpButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            const guestId = btn.getAttribute('data-id');
            const guestName = btn.getAttribute('data-name');
            const guestRsvp = btn.getAttribute('data-rsvp');
            const guestArrival = btn.getAttribute('data-arrival');
            const guestDeparture = btn.getAttribute('data-departure');
            const guestNotes = btn.getAttribute('data-notes');
            
            // Set form submission route
            form.action = `/caller/guest/${guestId}/update-rsvp`;
            
            // Populate modal fields
            titleHeader.textContent = `Call Log: ${guestName}`;
            rsvpSelect.value = guestRsvp;
            arrivalInput.value = guestArrival;
            departureInput.value = guestDeparture;
            notesInput.value = guestNotes;
            
            // Reset mark_done input
            const markDoneInput = document.getElementById('modal-mark-done');
            if (markDoneInput) {
                markDoneInput.value = 'false';
            }
            
            // Show modal
            modal.classList.add('active');
        });
    });
</script>
{% endblock %}