{% extends "base.html" %}

{% block title %}{% if is_edit %}Edytuj posiedzenie{% else %}Nowe posiedzenie{% endif %} - Strefa RADA{% endblock %}

{% block extra_css %}
<style>
    .form-container {
        max-width: 900px;
        margin: 0 auto;
    }

    .form-header {
        margin-bottom: var(--spacing-xl);
    }

    .form-header h1 {
        font-size: var(--font-size-2xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .form-header p {
        color: var(--text-secondary);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-lg);
    }

    .back-link:hover {
        color: var(--primary);
    }

    .back-link svg {
        width: 16px;
        height: 16px;
    }

    .form-section {
        background: white;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
    }

    .form-section h2 {
        font-size: var(--font-size-lg);
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-sm);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .form-section h2 svg {
        width: 20px;
        height: 20px;
        color: #f59e0b;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md);
    }

    .form-group {
        margin-bottom: var(--spacing-md);
    }

    .form-group label {
        display: block;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .form-group label .required {
        color: var(--danger);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        font-size: var(--font-size-base);
        transition: border-color 0.2s;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .form-hint {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        margin-top: var(--spacing-xs);
    }

    /* Agenda Items */
    .agenda-items-list {
        margin-top: var(--spacing-md);
    }

    .agenda-item {
        display: grid;
        grid-template-columns: 80px 80px 1fr auto;
        gap: var(--spacing-sm);
        align-items: center;
        padding: var(--spacing-sm);
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-sm);
    }

    .agenda-item input {
        padding: 8px 10px;
        font-size: var(--font-size-sm);
    }

    .btn-remove-item {
        background: none;
        border: none;
        color: var(--danger);
        cursor: pointer;
        padding: 4px;
    }

    .btn-add-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px dashed var(--border-color);
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: var(--font-size-sm);
        margin-top: var(--spacing-sm);
    }

    .btn-add-item:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    /* Attendance */
    .attendance-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--spacing-sm);
    }

    .attendance-row {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
    }

    .attendance-row .member-name {
        flex: 1;
        font-weight: 500;
    }

    .attendance-row input[type="text"] {
        width: 50px;
        padding: 4px 8px;
        text-align: center;
        font-size: var(--font-size-sm);
    }

    .attendance-status {
        display: flex;
        gap: 4px;
    }

    .status-btn {
        padding: 4px 10px;
        border: 1px solid var(--border-color);
        background: white;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        cursor: pointer;
        transition: all 0.2s;
    }

    .status-btn:hover {
        border-color: var(--primary);
    }

    .status-btn.present.active {
        background: #d1fae5;
        border-color: #059669;
        color: #065f46;
    }

    .status-btn.absent.active {
        background: #fee2e2;
        border-color: #dc2626;
        color: #991b1b;
    }

    .status-btn.unknown.active {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: #4b5563;
    }

    .quorum-info {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 1px solid #f59e0b;
        border-radius: var(--radius-md);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .quorum-info svg {
        width: 20px;
        height: 20px;
        color: #b45309;
        flex-shrink: 0;
    }

    .quorum-info .quorum-text {
        flex: 1;
    }

    .quorum-info .quorum-count {
        font-weight: 600;
        font-size: var(--font-size-lg);
        color: #b45309;
    }

    .quorum-achieved {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        border-color: #059669;
    }

    .quorum-achieved svg,
    .quorum-achieved .quorum-count {
        color: #065f46;
    }

    /* Proceedings */
    .proceeding-item {
        background: white;
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--primary);
        border-radius: var(--radius-md);
        padding: 0;
        margin-bottom: var(--spacing-lg);
        overflow: hidden;
    }

    .proceeding-item:nth-child(even) {
        border-left-color: #8b5cf6;
    }

    .proceeding-item:nth-child(3n) {
        border-left-color: #059669;
    }

    .proceeding-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) var(--spacing-lg);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    .proceeding-header:hover {
        background: #e5e7eb;
    }

    .proceeding-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: var(--primary);
        color: white;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .proceeding-item:nth-child(even) .proceeding-number {
        background: #8b5cf6;
    }

    .proceeding-item:nth-child(3n) .proceeding-number {
        background: #059669;
    }

    .proceeding-title {
        flex: 1;
        font-weight: 600;
        font-size: var(--font-size-base);
        color: var(--text-primary);
    }

    .proceeding-status-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .proceeding-status-icon.empty {
        color: #d1d5db;
    }

    .proceeding-status-icon.filled {
        color: #059669;
    }

    .proceeding-toggle {
        width: 20px;
        height: 20px;
        color: var(--text-muted);
        transition: transform 0.2s;
        flex-shrink: 0;
    }

    .proceeding-item.collapsed .proceeding-toggle {
        transform: rotate(-90deg);
    }

    .proceeding-body {
        padding: var(--spacing-lg);
    }

    .proceeding-item.collapsed .proceeding-body {
        display: none;
    }

    .proceeding-field {
        margin-bottom: var(--spacing-md);
    }

    .proceeding-field:last-child {
        margin-bottom: 0;
    }

    .proceeding-field label {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-weight: 600;
        font-size: var(--font-size-sm);
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .proceeding-field label svg {
        width: 14px;
        height: 14px;
        color: var(--text-muted);
    }

    .proceeding-field textarea {
        width: 100%;
        min-height: 80px;
        padding: 10px 14px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        font-size: var(--font-size-base);
        font-family: inherit;
        line-height: 1.5;
        resize: vertical;
        transition: border-color 0.2s;
    }

    .proceeding-field textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .proceeding-field textarea.field-discussion {
        min-height: 120px;
    }

    .proceeding-field .field-hint {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    /* Form Actions */
    .form-actions {
        display: flex;
        gap: var(--spacing-md);
        padding-top: var(--spacing-lg);
        border-top: 1px solid var(--border-color);
    }

    .btn-submit {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-submit:hover {
        background: var(--primary-dark);
    }

    .btn-submit svg {
        width: 18px;
        height: 18px;
    }

    .btn-cancel {
        display: inline-flex;
        align-items: center;
        padding: 12px 24px;
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-cancel:hover {
        background: var(--bg-secondary);
    }

    /* Tabs */
    .form-tabs {
        display: flex;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
        border-bottom: 1px solid var(--border-color);
        padding-bottom: var(--spacing-md);
    }

    .form-tab {
        padding: 8px 16px;
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: var(--radius-md);
        font-size: var(--font-size-base);
    }

    .form-tab:hover {
        background: var(--bg-secondary);
    }

    .form-tab.active {
        background: var(--primary);
        color: white;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <a href="{{ url_for('board.index') }}" class="back-link">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M15 19l-7-7 7-7"/>
        </svg>
        Powrót do listy posiedzeń
    </a>

    <div class="form-header">
        <h1>{% if is_edit %}Edytuj posiedzenie {{ meeting.meeting_identifier }}{% else %}Nowe posiedzenie Rady Izby{% endif %}</h1>
        <p>{% if is_edit %}Zaktualizuj dane posiedzenia{% else %}Wypełnij dane programu i protokołu posiedzenia{% endif %}</p>
    </div>

    <form method="POST" id="meetingForm">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <!-- Tabs -->
        <div class="form-tabs">
            <button type="button" class="form-tab active" data-tab="basic">Dane podstawowe</button>
            <button type="button" class="form-tab" data-tab="agenda">Program</button>
            <button type="button" class="form-tab" data-tab="attendance">Obecność</button>
            <button type="button" class="form-tab" data-tab="proceedings">Przebieg</button>
        </div>

        <!-- Basic Data Tab -->
        <div class="tab-content active" id="tab-basic">
            <div class="form-section">
                <h2>
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    Dane posiedzenia
                </h2>

                <div class="form-row">
                    <div class="form-group">
                        <label for="meeting_number">Numer posiedzenia <span class="required">*</span></label>
                        <input type="number" id="meeting_number" name="meeting_number" required min="1"
                               value="{{ form_data.get('meeting_number', '') }}">
                    </div>
                    <div class="form-group">
                        <label for="year">Rok <span class="required">*</span></label>
                        <input type="number" id="year" name="year" required min="2020" max="2030"
                               value="{{ form_data.get('year', '') }}">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="meeting_date">Data posiedzenia</label>
                        <input type="date" id="meeting_date" name="meeting_date"
                               value="{{ form_data.get('meeting_date', '') }}">
                    </div>
                    <div class="form-group">
                        <label for="start_time">Godzina rozpoczęcia</label>
                        <input type="time" id="start_time" name="start_time"
                               value="{{ form_data.get('start_time', '16:00') }}">
                    </div>
                    <div class="form-group">
                        <label for="end_time">Godzina zakończenia</label>
                        <input type="time" id="end_time" name="end_time"
                               value="{{ form_data.get('end_time', '') }}">
                    </div>
                </div>

                <div class="form-group">
                    <label for="location">Miejsce</label>
                    <input type="text" id="location" name="location"
                           value="{{ form_data.get('location', 'Siedziba Izby') }}"
                           placeholder="np. Siedziba Izby">
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="chairperson_id">Prowadzący posiedzenie</label>
                        <select id="chairperson_id" name="chairperson_id">
                            <option value="">-- Wybierz --</option>
                            {% for member in board_members %}
                            <option value="{{ member.id }}" {% if form_data.get('chairperson_id') == member.id %}selected{% endif %}>
                                {{ member.name or member.email }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="secretary_id">Protokolant</label>
                        <select id="secretary_id" name="secretary_id">
                            <option value="">-- Wybierz --</option>
                            {% for staff in staff_users %}
                            <option value="{{ staff.id }}" {% if form_data.get('secretary_id') == staff.id %}selected{% endif %}>
                                {{ staff.name or staff.email }}
                            </option>
                            {% endfor %}
                        </select>
                        <p class="form-hint">Pracownik biura odpowiedzialny za sporządzenie protokołu</p>
                    </div>
                </div>

                <div class="form-group">
                    <label for="guests">Goście (osoby spoza Rady)</label>
                    <textarea id="guests" name="guests" rows="2"
                              placeholder="Wpisz imiona i nazwiska gości...">{{ form_data.get('guests', '') }}</textarea>
                </div>
            </div>
        </div>

        <!-- Agenda Tab -->
        <div class="tab-content" id="tab-agenda">
            <div class="form-section">
                <h2>
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
                    </svg>
                    Program posiedzenia
                </h2>

                <p class="form-hint">Dodaj punkty programu z planowanymi godzinami.</p>

                <div class="agenda-items-list" id="agendaItemsList">
                    <!-- Default items will be added by JS -->
                </div>

                <button type="button" class="btn-add-item" onclick="addAgendaItem()">
                    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M12 4v16m8-8H4"/>
                    </svg>
                    Dodaj punkt programu
                </button>

                <input type="hidden" name="agenda_items" id="agendaItemsJson">
            </div>
        </div>

        <!-- Attendance Tab -->
        <div class="tab-content" id="tab-attendance">
            <div class="form-section">
                <h2>
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 00-3-3.87"/>
                        <path d="M16 3.13a4 4 0 010 7.75"/>
                    </svg>
                    Lista obecności
                </h2>

                <div class="quorum-info" id="quorumInfo">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div class="quorum-text">
                        <strong>Kworum:</strong> Minimum 9 z 16 członków Rady (większość bezwzględna).
                        <br><small>Kworum oblicza się automatycznie na podstawie listy obecności.</small>
                    </div>
                    <div class="quorum-count" id="quorumCount">0/16</div>
                </div>

                <p class="form-hint">Dla każdego członka wybierz status obecności i wpisz inicjały do protokołu.</p>

                <div class="attendance-grid">
                    {% for member in board_members %}
                    {% set member_attendance = form_data.get('attendance', {}).get(member.id|string, {}) %}
                    {% set status = member_attendance.get('status', 'unknown') %}
                    <div class="attendance-row" data-member-id="{{ member.id }}">
                        <div class="attendance-status">
                            <button type="button" class="status-btn present {% if status == 'present' %}active{% endif %}"
                                    onclick="setAttendanceStatus({{ member.id }}, 'present', this)"
                                    title="Obecny">✓</button>
                            <button type="button" class="status-btn absent {% if status == 'absent' %}active{% endif %}"
                                    onclick="setAttendanceStatus({{ member.id }}, 'absent', this)"
                                    title="Nieobecny">✗</button>
                            <button type="button" class="status-btn unknown {% if status == 'unknown' or not status %}active{% endif %}"
                                    onclick="setAttendanceStatus({{ member.id }}, 'unknown', this)"
                                    title="Nieoznaczony">?</button>
                        </div>
                        <input type="hidden" name="attendance_status_{{ member.id }}" value="{{ status or 'unknown' }}" class="attendance-status-input">
                        <span class="member-name">{{ member.name or member.email.split('@')[0] }}</span>
                        <input type="text" name="initials_{{ member.id }}" placeholder="XX"
                               value="{{ member_attendance.get('initials', '') }}"
                               maxlength="4">
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Proceedings Tab -->
        <div class="tab-content" id="tab-proceedings">
            <div class="form-section">
                <h2>
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Przebieg posiedzenia i ustalenia
                </h2>

                <p class="form-hint">Dla każdego punktu programu opisz przebieg dyskusji i podjęte ustalenia.</p>

                <div id="proceedingsList">
                    <!-- Will be populated by JS based on agenda items -->
                </div>

                <input type="hidden" name="proceedings" id="proceedingsJson">
            </div>
        </div>

        <!-- Form Actions -->
        <div class="form-section">
            <div class="form-actions">
                <button type="submit" class="btn-submit">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M5 13l4 4L19 7"/>
                    </svg>
                    {% if is_edit %}Zapisz zmiany{% else %}Utwórz posiedzenie{% endif %}
                </button>
                <a href="{{ url_for('board.index') }}" class="btn-cancel">Anuluj</a>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
// Tab switching
document.querySelectorAll('.form-tab').forEach(tab => {
    tab.addEventListener('click', function() {
        document.querySelectorAll('.form-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

        this.classList.add('active');
        document.getElementById('tab-' + this.dataset.tab).classList.add('active');
    });
});

// Agenda Items
let agendaItems = {{ form_data.get('agenda_items', [])|tojson|safe }};

// Default items if empty
if (agendaItems.length === 0) {
    agendaItems = [
        { time_start: '16:00', time_end: '16:10', title: 'Otwarcie posiedzenia i akceptacja programu' },
        { time_start: '16:10', time_end: '16:15', title: 'Zbieranie kworum' },
        { time_start: '', time_end: '', title: '' },
        { time_start: '', time_end: '', title: 'Wolne wnioski i sprawy różne' },
        { time_start: '', time_end: '', title: 'Ustalenie daty kolejnego posiedzenia' },
        { time_start: '', time_end: '', title: 'Zamknięcie posiedzenia' }
    ];
}

function renderAgendaItems() {
    const list = document.getElementById('agendaItemsList');
    list.innerHTML = '';

    agendaItems.forEach((item, index) => {
        const div = document.createElement('div');
        div.className = 'agenda-item';
        div.innerHTML = `
            <input type="time" value="${item.time_start || ''}" onchange="updateAgendaItem(${index}, 'time_start', this.value)" placeholder="Od">
            <input type="time" value="${item.time_end || ''}" onchange="updateAgendaItem(${index}, 'time_end', this.value)" placeholder="Do">
            <input type="text" value="${item.title || ''}" onchange="updateAgendaItem(${index}, 'title', this.value)" placeholder="Tytuł punktu programu">
            <button type="button" class="btn-remove-item" onclick="removeAgendaItem(${index})">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        `;
        list.appendChild(div);
    });

    updateAgendaJson();
    renderProceedings();
}

function addAgendaItem() {
    agendaItems.push({ time_start: '', time_end: '', title: '' });
    renderAgendaItems();
}

function removeAgendaItem(index) {
    agendaItems.splice(index, 1);
    renderAgendaItems();
}

function updateAgendaItem(index, field, value) {
    agendaItems[index][field] = value;
    updateAgendaJson();
    if (field === 'title') {
        renderProceedings();
    }
}

function updateAgendaJson() {
    document.getElementById('agendaItemsJson').value = JSON.stringify(agendaItems);
}

// Proceedings
let proceedings = {{ form_data.get('proceedings', [])|tojson|safe }};

// Helper: convert array to text (one item per line)
function arrayToText(arr) {
    if (!arr) return '';
    if (typeof arr === 'string') return arr;
    if (Array.isArray(arr)) return arr.join('\n');
    return '';
}

// Helper: convert text to array (split by newlines, filter empty)
function textToArray(text) {
    if (!text) return [];
    return text.split('\n').map(s => s.trim()).filter(s => s.length > 0);
}

// Helper: get discussion text (supports both field names)
function getDiscussion(proc) {
    return proc.discussion || proc.discussed || '';
}

function renderProceedings() {
    const list = document.getElementById('proceedingsList');
    list.innerHTML = '';

    agendaItems.forEach((item, index) => {
        if (!item.title) return;

        const proc = proceedings.find(p => p.agenda_item === index) || {};
        const discussion = getDiscussion(proc);
        const decisionsText = arrayToText(proc.decisions);
        const tasksText = arrayToText(proc.tasks);
        const isFilled = discussion || decisionsText || tasksText;

        const div = document.createElement('div');
        div.className = 'proceeding-item';
        div.dataset.index = index;
        div.innerHTML = `
            <div class="proceeding-header" onclick="toggleProceeding(this)">
                <span class="proceeding-number">${index + 1}</span>
                <span class="proceeding-title">${escapeHtml(item.title)}</span>
                <svg class="proceeding-status-icon ${isFilled ? 'filled' : 'empty'}" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    ${isFilled
                        ? '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>'
                        : '<circle cx="12" cy="12" r="9"/>'}
                </svg>
                <svg class="proceeding-toggle" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M19 9l-7 7-7-7"/>
                </svg>
            </div>
            <div class="proceeding-body">
                <div class="proceeding-field">
                    <label>
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                        Omówiono:
                    </label>
                    <textarea class="field-discussion"
                              oninput="updateProceeding(${index}, 'discussion', this.value); updateStatusIcon(this)"
                              placeholder="Opis przebiegu dyskusji w tym punkcie...">${escapeHtml(discussion)}</textarea>
                </div>
                <div class="proceeding-field">
                    <label>
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Ustalono / decyzje:
                    </label>
                    <textarea oninput="updateProceeding(${index}, 'decisions', this.value); updateStatusIcon(this)"
                              placeholder="Każda decyzja w nowej linii...">${escapeHtml(decisionsText)}</textarea>
                    <div class="field-hint">Każda decyzja w osobnej linii</div>
                </div>
                <div class="proceeding-field">
                    <label>
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                        Zadania:
                    </label>
                    <textarea oninput="updateProceeding(${index}, 'tasks', this.value); updateStatusIcon(this)"
                              placeholder="Każde zadanie w nowej linii (np. AW – przygotować prezentację – termin: 15.02)...">${escapeHtml(tasksText)}</textarea>
                    <div class="field-hint">Każde zadanie w osobnej linii (osoba – opis – termin)</div>
                </div>
            </div>
        `;
        list.appendChild(div);
    });
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function toggleProceeding(header) {
    header.closest('.proceeding-item').classList.toggle('collapsed');
}

function updateStatusIcon(textarea) {
    const item = textarea.closest('.proceeding-item');
    const textareas = item.querySelectorAll('textarea');
    const hasContent = Array.from(textareas).some(ta => ta.value.trim().length > 0);
    const icon = item.querySelector('.proceeding-status-icon');
    if (hasContent) {
        icon.classList.remove('empty');
        icon.classList.add('filled');
        icon.innerHTML = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>';
    } else {
        icon.classList.remove('filled');
        icon.classList.add('empty');
        icon.innerHTML = '<circle cx="12" cy="12" r="9"/>';
    }
}

function updateProceeding(agendaIndex, field, value) {
    let proc = proceedings.find(p => p.agenda_item === agendaIndex);
    if (!proc) {
        proc = { agenda_item: agendaIndex, title: agendaItems[agendaIndex]?.title || '', discussion: '', decisions: [], tasks: [] };
        proceedings.push(proc);
    }
    if (field === 'decisions' || field === 'tasks') {
        proc[field] = textToArray(value);
    } else {
        proc[field] = value;
        // Normalize old field name
        if (field === 'discussion') {
            delete proc.discussed;
        }
    }
    proc.title = agendaItems[agendaIndex]?.title || '';
    updateProceedingsJson();
}

function updateProceedingsJson() {
    document.getElementById('proceedingsJson').value = JSON.stringify(proceedings);
}

// Initialize
renderAgendaItems();

// Attendance status management
function setAttendanceStatus(memberId, status, button) {
    // Update hidden input
    const row = button.closest('.attendance-row');
    row.querySelector('.attendance-status-input').value = status;

    // Update button states
    row.querySelectorAll('.status-btn').forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');

    // Recalculate quorum
    updateQuorumCount();
}

function updateQuorumCount() {
    const presentCount = document.querySelectorAll('.status-btn.present.active').length;
    const totalMembers = 16;
    const quorumRequired = 9;

    const countEl = document.getElementById('quorumCount');
    const infoEl = document.getElementById('quorumInfo');

    countEl.textContent = presentCount + '/' + totalMembers;

    if (presentCount >= quorumRequired) {
        infoEl.classList.add('quorum-achieved');
        countEl.innerHTML = presentCount + '/' + totalMembers + ' <small>✓</small>';
    } else {
        infoEl.classList.remove('quorum-achieved');
    }
}

// Initialize quorum count on page load
updateQuorumCount();

// Update JSON before submit
document.getElementById('meetingForm').addEventListener('submit', function() {
    updateAgendaJson();
    updateProceedingsJson();
});
{% endblock %}
