{% extends "base.html" %}

{% block title %}{{ event.title }} Details - Eventology{% endblock %}

{% block content %}
<!-- Back to Dashboard and Title -->
<div>
    <a href="{{ url_for('emc.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 Events</span>
    </a>
    <div class="flex-between">
        <div>
            <h1>{{ event.title }}</h1>
            <p style="margin-top: 0.25rem;">📅 {{ event.date|datetimeformat }} | 📍 {{ event.location or 'No Venue Specifed' }}</p>
        </div>
        <span class="badge badge-info" style="font-size: 0.85rem;">{{ stat_total }} Total Invitees</span>
    </div>
</div>

<!-- RSVP Distribution Metrics -->
<div class="grid-cols-3">
    <!-- Attending -->
    <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"><polyline points="20 6 9 17 4 12"></polyline></svg>
        </div>
        <div class="stat-info">
            <span class="stat-value">{{ stat_attending }}</span>
            <span class="stat-label">Attending</span>
        </div>
    </div>
    <!-- Pending -->
    <div class="card stat-card">
        <div class="stat-icon" style="background-color: rgba(245, 158, 11, 0.1); color: var(--status-warning);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
        </div>
        <div class="stat-info">
            <span class="stat-value">{{ stat_pending }}</span>
            <span class="stat-label">Pending Callback</span>
        </div>
    </div>
    <!-- Declined / Tentative -->
    <div class="card stat-card">
        <div class="stat-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--status-danger);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </div>
        <div class="stat-info">
            <span class="stat-value">{{ stat_declined }} <span style="font-size: 1rem; font-weight: normal; color: var(--text-secondary);">({{ stat_tentative }} tentative)</span></span>
            <span class="stat-label">Declined Responses</span>
        </div>
    </div>
</div>

<!-- Section Tabs -->
<div class="tabs" data-tabs>
    <div class="tab active" data-tab="guests">Guests & Assignments</div>
    <div class="tab" data-tab="schedule">Schedule & Invitations</div>
</div>

<!-- Tab: Guests & Assignments -->
<div data-tab-content="guests">
    <div class="grid-cols-3" style="align-items: start; grid-template-columns: 2fr 1fr;">
        
        <!-- Guest Roster and Assignment Panel -->
        <div class="card" style="grid-column: span 1;">
            <form id="bulk-action-form" method="POST">
                <div class="card-header">
                    <h2 class="card-title">Guest Directory</h2>
                    <div class="flex-gap-1">
                        <input type="text" data-search-input="guests-table" class="form-control btn-sm" placeholder="Search guests..." style="max-width: 180px;">
                        <button type="button" class="btn btn-secondary btn-sm" data-modal-target="csv-import-modal">
                            Import Guests
                        </button>
                    </div>
                </div>

                <!-- Assignment Bar -->
                <div class="flex-between" style="background-color: rgba(255, 255, 255, 0.02); padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
                    <div style="font-size: 0.9rem;">
                        <strong>Bulk Delegation:</strong> Select guests below to assign or link.
                    </div>
                    
                    <div class="flex-gap-1">
                        <select name="caller_id" class="form-control btn-sm" style="width: 160px; height: 35px; padding: 2px 10px;">
                            <option value="">-- Assign Caller --</option>
                            <option value="0">Unassign / Clear</option>
                            {% for caller in callers %}
                                <option value="{{ caller.id }}">{{ caller.username }}</option>
                            {% endfor %}
                        </select>
                        <button type="submit" onclick="submitBulkAction('assign')" class="btn btn-primary btn-sm" style="height: 35px;">
                            Apply
                        </button>
                    </div>
                </div>

                <div class="table-container">
                    <table id="guests-table">
                        <thead>
                            <tr>
                                <th style="width: 40px; text-align: center;">
                                    <input type="checkbox" id="select-all-guests" style="cursor: pointer; transform: scale(1.1);">
                                </th>
                                <th>Guest Details</th>
                                <th>Contact</th>
                                <th>Assigned Caller</th>
                                <th>Call Completed At</th>
                                <th>RSVP Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if event.guests %}
                                {% for guest in event.guests %}
                                <tr>
                                    <td style="text-align: center;">
                                        <input type="checkbox" name="guest_ids" value="{{ guest.id }}" class="guest-checkbox" style="cursor: pointer; transform: scale(1.1);">
                                    </td>
                                    <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="font-size: 0.9rem;">{{ guest.phone or 'No phone' }}</div>
                                        <div style="font-size: 0.8rem; color: var(--text-secondary);">{{ guest.email or '' }}</div>
                                    </td>
                                    <td>
                                        <span class="badge {% if guest.caller %}badge-info{% else %}badge-warning{% endif %}" style="font-size: 0.75rem;">
                                            {{ guest.caller.username if guest.caller else 'Unassigned' }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if guest.call_completed_at %}
                                            <span class="badge badge-success" style="font-size: 0.75rem;">{{ guest.call_completed_at|datetimeformat }}</span>
                                        {% else %}
                                            <span class="badge badge-warning" style="font-size: 0.75rem; background-color: rgba(245, 158, 11, 0.05); color: var(--status-warning); border: 1px solid rgba(245, 158, 11, 0.1);">Pending</span>
                                        {% endif %}
                                    </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>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 3rem;">
                                        Guest directory is empty. Click "Import CSV" to upload contacts.
                                    </td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </form>
        </div>

        <!-- Sidebar controls (Bulk Sub-Event Invites) -->
        <div class="card" style="grid-column: span 1;">
            <h2 class="mb-1">Sub-Event Linkage</h2>
            <p class="mb-2" style="font-size: 0.9rem;">Invite selected guests from the directory to specific schedule sessions (e.g. VIP Dinner, Main Assembly).</p>
            
            <form id="link-schedule-form" method="POST" action="{{ url_for('emc.link_schedule', event_id=event.id) }}">
                <!-- Hidden inputs for guest IDs. Will be copied from main list before submitting -->
                <div id="hidden-guest-inputs"></div>
                
                <div class="form-group">
                    <label for="invite-schedule-item">Target Schedule Session</label>
                    <select id="invite-schedule-item" name="schedule_item_id" class="form-control" required>
                        <option value="">-- Choose Schedule Item --</option>
                        {% for item in event.schedule_items %}
                            <option value="{{ item.id }}">{{ item.title }} ({{ item.start_time|datetimeformat('%I:%M %p') }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <button type="submit" onclick="copyCheckedGuests('link-schedule-form')" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
                    <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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
                    <span>Link Selected to Session</span>
                </button>
            </form>
            
            <div style="margin-top: 1.5rem; padding: 1rem; background-color: rgba(255,255,255,0.02); border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-secondary);">
                <strong>Instructions:</strong>
                <ol style="margin-left: 1.25rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem;">
                    <li>Check the guests in the directory table.</li>
                    <li>Choose the sub-event schedule item.</li>
                    <li>Click "Link Selected to Session".</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Tab: Schedule & Invitations -->
<div data-tab-content="schedule" style="display: none;">
    <div class="grid-cols-2" style="align-items: start;">
        
        <!-- Add Schedule Form -->
        <div class="card">
            <h2>Add Timeline Item</h2>
            <p class="mb-2" style="font-size: 0.9rem;">Add sub-events or key milestones for this conference. You can later select custom guest invites for these specific items.</p>
            
            <form action="{{ url_for('emc.add_schedule', event_id=event.id) }}" method="POST">
                <div class="form-group">
                    <label for="schedule-title">Session Title</label>
                    <input type="text" id="schedule-title" name="title" class="form-control" placeholder="e.g. VIP Reception Dinner" required>
                </div>
                
                <div style="display: flex; gap: 1rem;">
                    <div class="form-group" style="flex: 1;">
                        <label for="schedule-start">Start Date & Time</label>
                        <input type="datetime-local" id="schedule-start" name="start_time" class="form-control" required>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <label for="schedule-end">End Date & Time</label>
                        <input type="datetime-local" id="schedule-end" name="end_time" class="form-control" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="schedule-location">Sub-Venue / Room</label>
                    <input type="text" id="schedule-location" name="location" class="form-control" placeholder="e.g. Amber Ballroom">
                </div>
                
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label for="schedule-desc">Notes / Description</label>
                    <textarea id="schedule-desc" name="description" class="form-control" rows="2" placeholder="e.g. Open bar & starter course served. Dress code: Formal."></textarea>
                </div>
                
                <button type="submit" class="btn btn-primary" style="width: 100%;">
                    <svg width="18" height="18" 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>
                    <span>Insert Timeline Item</span>
                </button>
            </form>
        </div>

        <!-- Schedule List -->
        <div class="card">
            <h2 class="mb-2">Event Schedule Timeline</h2>
            
            {% if event.schedule_items %}
                <div class="timeline">
                    {% for item in event.schedule_items %}
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-time">
                                {{ item.start_time|datetimeformat('%I:%M %p') }} - {{ item.end_time|datetimeformat('%I:%M %p') }}
                                <span style="color: var(--text-muted); font-weight: normal; margin-left: 0.5rem;">({{ item.location or 'Main Venue' }})</span>
                            </div>
                            <div class="timeline-title">{{ item.title }}</div>
                            <p class="timeline-desc">{{ item.description or 'No extra details.' }}</p>
                            
                            <!-- Invited stats -->
                            <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--accent-secondary); display: flex; align-items: center; gap: 0.25rem;">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
                                <span>{{ item.guest_links|length }} Guests Invited to this Session</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div style="text-align: center; color: var(--text-muted); padding: 3rem;">
                    <div style="font-size: 2.5rem; margin-bottom: 1rem;">⏱️</div>
                    <p>Timeline is empty. Use the left form to schedule sessions.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Guest Import Modal Overlay -->
<div class="modal-overlay" id="csv-import-modal">
    <div class="modal-content">
        <div class="flex-between" style="margin-bottom: 1.5rem;">
            <h2>Import Guest Directory</h2>
            <button class="btn btn-secondary btn-sm" data-modal-close style="padding: 0.25rem 0.5rem;">✕</button>
        </div>
        
        <form action="{{ url_for('emc.import_guests', event_id=event.id) }}" method="POST" enctype="multipart/form-data">
            <!-- File Upload Zone -->
            <p style="font-size: 0.9rem; margin-bottom: 1rem; color: var(--text-secondary);">
                Upload an Excel (<code style="color: var(--accent-primary);">.xlsx</code>) or CSV (<code style="color: var(--accent-primary);">.csv</code>) file with guest data.
            </p>
            
            <div class="file-upload-zone" id="file-drop-zone">
                <input type="file" name="file" id="guest-file-input" accept=".xlsx,.xls,.csv">
                <div class="upload-icon">📁</div>
                <div class="upload-text" id="file-upload-label">
                    <strong>Click to browse</strong> or drag & drop your file here<br>
                    <span style="font-size: 0.8rem; color: var(--text-muted);">Supports .xlsx, .xls, .csv</span>
                </div>
            </div>

            <div class="divider-or">OR paste CSV text below</div>

            <p style="font-size: 0.85rem; margin-bottom: 0.75rem; color: var(--text-secondary);">
                One line per guest: <code style="color: var(--accent-primary);">Full Name, Email, Phone Number</code>
            </p>
            
            <div class="form-group" style="margin-bottom: 1.5rem;">
                <label for="csv-data">Guest Data List</label>
                <textarea id="csv-data" name="csv_data" class="form-control" rows="6" placeholder="Alice Smith, alice@example.com, +1234567890&#10;Bob Jones, bob@example.com, +1987654321"></textarea>
            </div>
            
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" data-modal-close>Cancel</button>
                <button type="button" class="btn btn-secondary" onclick="loadSampleCSV()">Insert Sample Data</button>
                <button type="submit" class="btn btn-primary">Import Directory</button>
            </div>
        </form>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    // Handle Select All Checkbox
    const selectAllCheck = document.getElementById('select-all-guests');
    const guestCheckboxes = document.querySelectorAll('.guest-checkbox');

    if (selectAllCheck) {
        selectAllCheck.addEventListener('change', (e) => {
            guestCheckboxes.forEach(cb => {
                cb.checked = e.target.checked;
            });
        });
    }

    // Submit the bulk action (either assign caller or unassign)
    function submitBulkAction(action) {
        const form = document.getElementById('bulk-action-form');
        
        // Count checked checkboxes
        const checkedCount = Array.from(guestCheckboxes).filter(cb => cb.checked).length;
        if (checkedCount === 0) {
            alert('Please select at least one guest.');
            return;
        }
        
        form.action = "{{ url_for('emc.assign_caller', event_id=event.id) }}";
        form.submit();
    }

    // Copy checked guest inputs to the sub-event linkage form before submitting
    function copyCheckedGuests(targetFormId) {
        const targetForm = document.getElementById(targetFormId);
        const container = document.getElementById('hidden-guest-inputs');
        container.innerHTML = ''; // Clear previous

        let count = 0;
        guestCheckboxes.forEach(cb => {
            if (cb.checked) {
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'guest_ids';
                hiddenInput.value = cb.value;
                container.appendChild(hiddenInput);
                count++;
            }
        });

        if (count === 0) {
            alert('Please select guests from the roster directory first.');
            // Prevent actual submit
            event.preventDefault();
        }
    }

    // Demo CSV loader
    function loadSampleCSV() {
        const textarea = document.getElementById('csv-data');
        if (textarea) {
            textarea.value = 
                "Johnathan Doe, john.doe@email.com, +1-555-0199\n" +
                "Elizabeth Vance, eli.vance@blackmesa.org, +1-555-0210\n" +
                "Robert House, r.house@lucky38.com, +1-555-0320\n" +
                "Sarah Connor, s.connor@cyberdyne.net, +1-555-0450\n" +
                "Bruce Wayne, bwayne@waynecorp.com, +1-555-0999\n" +
                "Clark Kent, ckent@dailyplanet.com, +1-555-0777";
        }
    }

    // File upload zone feedback
    const fileInput = document.getElementById('guest-file-input');
    const fileLabel = document.getElementById('file-upload-label');
    if (fileInput && fileLabel) {
        fileInput.addEventListener('change', function() {
            if (this.files && this.files.length > 0) {
                const fname = this.files[0].name;
                const fsize = (this.files[0].size / 1024).toFixed(1);
                fileLabel.innerHTML = `<strong>✅ ${fname}</strong> (${fsize} KB)<br><span style="font-size: 0.8rem; color: var(--text-muted);">Click to change file</span>`;
            }
        });
    }
</script>
{% endblock %}