nordabiz/templates/membership/status.html

{% extends "base.html" %}

{% block title %}Status Deklaracji - Norda Biznes Partner{% endblock %}

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

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

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

    .no-applications {
        background: var(--surface);
        padding: var(--spacing-2xl);
        border-radius: var(--radius-lg);
        text-align: center;
    }

    .no-applications p {
        color: var(--text-secondary);
        margin-bottom: var(--spacing-lg);
    }

    .btn-apply {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) var(--spacing-xl);
        background: var(--primary);
        color: white;
        text-decoration: none;
        border-radius: var(--radius);
        font-weight: 500;
        transition: var(--transition);
    }

    .btn-apply:hover {
        opacity: 0.9;
    }

    .application-card {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-lg);
    }

    .application-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-lg);
    }

    .application-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .application-nip {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-md);
        border-radius: var(--radius-full);
        font-size: var(--font-size-sm);
        font-weight: 500;
    }

    .status-draft {
        background: var(--warning-light);
        color: var(--warning);
    }

    .status-submitted {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    .status-under_review {
        background: rgba(168, 85, 247, 0.1);
        color: #a855f7;
    }

    .status-changes_requested {
        background: rgba(251, 146, 60, 0.1);
        color: #fb923c;
    }

    .status-pending_user_approval {
        background: rgba(14, 165, 233, 0.1);
        color: #0ea5e9;
    }

    .status-approved {
        background: var(--success-light);
        color: var(--success);
    }

    .status-rejected {
        background: var(--error-light);
        color: var(--error);
    }

    .application-dates {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-md);
        background: var(--background);
        border-radius: var(--radius);
    }

    .date-item {
        font-size: var(--font-size-sm);
    }

    .date-label {
        color: var(--text-secondary);
    }

    .date-value {
        font-weight: 500;
        color: var(--text-primary);
    }

    .review-comment {
        background: var(--background);
        border-left: 4px solid var(--warning);
        padding: var(--spacing-md);
        border-radius: var(--radius);
        margin-bottom: var(--spacing-lg);
    }

    .review-comment.rejected {
        border-color: var(--error);
    }

    .review-comment h4 {
        margin: 0 0 var(--spacing-sm) 0;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .review-comment p {
        margin: 0;
        color: var(--text-primary);
    }

    .application-actions {
        display: flex;
        gap: var(--spacing-md);
    }

    .btn-continue {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
        background: var(--primary);
        color: white;
        text-decoration: none;
        border-radius: var(--radius);
        font-weight: 500;
        transition: var(--transition);
    }

    .btn-continue:hover {
        opacity: 0.9;
    }

    .member-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
        background: var(--success-light);
        color: var(--success);
        border-radius: var(--radius);
        font-weight: 500;
    }

    .timeline {
        position: relative;
        padding-left: var(--spacing-xl);
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--border);
    }

    .timeline-item {
        position: relative;
        padding-bottom: var(--spacing-lg);
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: calc(-1 * var(--spacing-xl) + 4px);
        top: 4px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--border);
    }

    .timeline-item.completed::before {
        background: var(--success);
    }

    .timeline-item.current::before {
        background: var(--primary);
        box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.2);
    }

    .timeline-label {
        font-weight: 500;
        color: var(--text-primary);
    }

    .timeline-date {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .timeline-item.timeline-sub {
        margin-left: var(--spacing-lg);
        padding-left: var(--spacing-md);
        border-left: 2px dashed rgba(14, 165, 233, 0.3);
    }

    .timeline-item.timeline-sub::before {
        left: calc(-1 * var(--spacing-xl) - var(--spacing-lg) + 4px);
        background: #0ea5e9;
        width: 8px;
        height: 8px;
    }

    .timeline-arrow {
        color: #0ea5e9;
        font-weight: bold;
        margin-right: var(--spacing-xs);
    }

    .timeline-details {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        font-style: italic;
        margin-top: var(--spacing-xs);
        padding-left: var(--spacing-md);
        border-left: 2px solid var(--border);
    }

    .details-section {
        margin-top: var(--spacing-xl);
        border-top: 1px solid var(--border);
        padding-top: var(--spacing-lg);
    }

    .details-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: none;
        border: none;
        width: 100%;
        padding: var(--spacing-sm) 0;
        cursor: pointer;
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--text-primary);
    }

    .details-toggle:hover {
        color: var(--primary);
    }

    .details-toggle svg {
        transition: transform 0.2s;
    }

    .details-toggle.open svg {
        transform: rotate(180deg);
    }

    .details-content {
        display: none;
        padding-top: var(--spacing-lg);
    }

    .details-content.open {
        display: block;
    }

    .details-grid {
        display: grid;
        gap: var(--spacing-xl);
    }

    .details-group {
        background: var(--background);
        border-radius: var(--radius);
        padding: var(--spacing-lg);
    }

    .details-group h4 {
        margin: 0 0 var(--spacing-md) 0;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding-bottom: var(--spacing-sm);
        border-bottom: 1px solid var(--border);
    }

    .details-row {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--border);
    }

    .details-row:last-child {
        border-bottom: none;
    }

    .details-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .details-value {
        font-size: var(--font-size-sm);
        color: var(--text-primary);
    }

    .details-value.empty {
        color: var(--text-secondary);
        font-style: italic;
    }

    .section-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .section-tag {
        display: inline-block;
        padding: 2px 8px;
        background: var(--primary);
        color: white;
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
    }

    @media (max-width: 600px) {
        .details-row {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="status-container">
    <div class="status-header">
        <h1>Moje deklaracje członkowskie</h1>
        <p class="text-muted">Historia Twoich zgłoszeń do Izby NORDA</p>
    </div>

    {% if not applications %}
    <div class="no-applications">
        <p>Nie masz jeszcze żadnych deklaracji członkowskich.</p>
        <a href="{{ url_for('membership.apply') }}" class="btn-apply">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Złóż deklarację
        </a>
    </div>
    {% else %}

    {% for app in applications %}
    <div class="application-card">
        <div class="application-header">
            <div>
                <h2 class="application-title">{{ app.company_name or 'Nowa deklaracja' }}</h2>
                {% if app.nip %}
                <div class="application-nip">NIP: {{ app.nip }}</div>
                {% endif %}
            </div>
            <span class="status-badge status-{{ app.status }}">
                {{ app.status_label }}
            </span>
        </div>

        <div class="application-dates">
            <div class="date-item">
                <div class="date-label">Utworzono</div>
                <div class="date-value">{{ app.created_at|local_time('%Y-%m-%d %H:%M') if app.created_at else '-' }}</div>
            </div>
            {% if app.submitted_at %}
            <div class="date-item">
                <div class="date-label">Wysłano</div>
                <div class="date-value">{{ app.submitted_at|local_time('%Y-%m-%d %H:%M') }}</div>
            </div>
            {% endif %}
            {% if app.reviewed_at %}
            <div class="date-item">
                <div class="date-label">Rozpatrzono</div>
                <div class="date-value">{{ app.reviewed_at|local_time('%Y-%m-%d %H:%M') }}</div>
            </div>
            {% endif %}
        </div>

        {% if app.review_comment and app.status in ['changes_requested', 'rejected'] %}
        <div class="review-comment {% if app.status == 'rejected' %}rejected{% endif %}">
            <h4>{% if app.status == 'changes_requested' %}Wymagane poprawki{% else %}Powód odrzucenia{% endif %}</h4>
            <p>{{ app.review_comment }}</p>
        </div>
        {% endif %}

        <div class="application-actions">
            {% if app.status == 'pending_user_approval' %}
            <a href="{{ url_for('membership.review_changes', app_id=app.id) }}" class="btn-continue" style="background: #0ea5e9;">
                Przejrzyj proponowane zmiany →
            </a>
            {% elif app.status in ['draft', 'changes_requested'] %}
            <a href="{{ url_for('membership.apply_step', step=1) }}" class="btn-continue">
                {% if app.status == 'draft' %}
                Kontynuuj wypełnianie
                {% else %}
                Wprowadź poprawki
                {% endif %}
                →
            </a>
            {% elif app.status == 'approved' %}
            <div class="member-badge">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                    <polyline points="22,4 12,14.01 9,11.01"/>
                </svg>
                {% if app.member_number %}Nr członkowski: {{ app.member_number }}{% else %}Członek Izby NORDA{% endif %}
            </div>
            {% endif %}
        </div>

        {% if app.status != 'draft' %}
        <div class="timeline" style="margin-top: var(--spacing-xl);">
            <div class="timeline-item completed">
                <div class="timeline-label">Złożono deklarację{% if app.user %} przez: <strong>{{ app.user.name or app.user.email }}</strong>{% endif %}</div>
                <div class="timeline-date">{{ app.submitted_at|local_time('%Y-%m-%d') if app.submitted_at else '-' }}</div>
            </div>

            {% if app.status in ['under_review', 'pending_user_approval', 'approved', 'rejected', 'changes_requested'] %}
            <div class="timeline-item completed">
                <div class="timeline-label">Weryfikacja danych</div>
            </div>
            {% endif %}

            {# Show workflow history events #}
            {% if app.workflow_history %}
                {% for event in app.workflow_history %}
                    {% if event.event == 'admin_proposed_changes' %}
                    <div class="timeline-item completed timeline-sub">
                        <div class="timeline-label">
                            <span class="timeline-arrow">↓</span>
                            Propozycja zmian od: <strong>{{ event.user_name }}</strong>
                        </div>
                        <div class="timeline-date">{{ event.timestamp[:10] }}</div>
                        {% if event.details.comment %}
                        <div class="timeline-details">„{{ event.details.comment }}"</div>
                        {% endif %}
                    </div>
                    {% elif event.event == 'user_accepted_changes' %}
                    <div class="timeline-item completed timeline-sub">
                        <div class="timeline-label">
                            <span class="timeline-arrow">↑</span>
                            Zmiany zaakceptowane przez: <strong>{{ event.user_name }}</strong>
                        </div>
                        <div class="timeline-date">{{ event.timestamp[:10] }}</div>
                    </div>
                    {% elif event.event == 'user_rejected_changes' %}
                    <div class="timeline-item completed timeline-sub" style="border-color: var(--warning);">
                        <div class="timeline-label">
                            <span class="timeline-arrow">↑</span>
                            Zmiany odrzucone przez: <strong>{{ event.user_name }}</strong>
                        </div>
                        <div class="timeline-date">{{ event.timestamp[:10] }}</div>
                        {% if event.details.user_comment %}
                        <div class="timeline-details">„{{ event.details.user_comment }}"</div>
                        {% endif %}
                    </div>
                    {% endif %}
                {% endfor %}
            {% endif %}

            {# Current pending_user_approval status #}
            {% if app.status == 'pending_user_approval' %}
            <div class="timeline-item current timeline-sub">
                <div class="timeline-label">
                    <span class="timeline-arrow">↓</span>
                    Oczekuje na Twoją akceptację
                </div>
                <div class="timeline-date">{{ app.proposed_changes_at|local_time('%Y-%m-%d') if app.proposed_changes_at else '' }}</div>
            </div>
            {% endif %}

            {# After user action - back to review #}
            {% if app.status == 'under_review' and app.user_changes_action %}
            <div class="timeline-item current">
                <div class="timeline-label">W trakcie rozpatrywania</div>
                <div class="timeline-date">Powrót do biura</div>
            </div>
            {% elif app.status == 'under_review' %}
            <div class="timeline-item current">
                <div class="timeline-label">W trakcie rozpatrywania</div>
            </div>
            {% endif %}

            {% if app.status == 'changes_requested' %}
            <div class="timeline-item current">
                <div class="timeline-label">Wymagane poprawki{% if app.reviewed_by %} - zgłosił: <strong>{{ app.reviewed_by.name or app.reviewed_by.email }}</strong>{% endif %}</div>
                <div class="timeline-date">{{ app.reviewed_at|local_time('%Y-%m-%d') if app.reviewed_at else '' }}</div>
            </div>
            {% endif %}

            {% if app.status == 'approved' %}
            <div class="timeline-item completed">
                <div class="timeline-label">Zatwierdzono{% if app.reviewed_by %} przez: <strong>{{ app.reviewed_by.name or app.reviewed_by.email }}</strong>{% endif %}</div>
                <div class="timeline-date">{{ app.reviewed_at|local_time('%Y-%m-%d') if app.reviewed_at else '' }}</div>
            </div>
            {% endif %}

            {% if app.status == 'rejected' %}
            <div class="timeline-item" style="opacity: 0.5;">
                <div class="timeline-label">Odrzucono{% if app.reviewed_by %} przez: <strong>{{ app.reviewed_by.name or app.reviewed_by.email }}</strong>{% endif %}</div>
                <div class="timeline-date">{{ app.reviewed_at|local_time('%Y-%m-%d') if app.reviewed_at else '' }}</div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        <!-- Szczegóły deklaracji -->
        {% if app.status != 'draft' %}
        <div class="details-section">
            <button type="button" class="details-toggle" onclick="toggleDetails(this)">
                <span>Szczegóły deklaracji</span>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="6 9 12 15 18 9"/>
                </svg>
            </button>
            <div class="details-content">
                <div class="details-grid">
                    <!-- Dane firmy -->
                    <div class="details-group">
                        <h4>Dane firmy</h4>
                        <div class="details-row">
                            <span class="details-label">Nazwa firmy</span>
                            <span class="details-value">{{ app.company_name or '-' }}</span>
                        </div>
                        <div class="details-row">
                            <span class="details-label">NIP</span>
                            <span class="details-value">{{ app.nip or '-' }}</span>
                        </div>
                        <div class="details-row">
                            <span class="details-label">Adres</span>
                            <span class="details-value">{{ app.full_address or '-' }}</span>
                        </div>
                        <div class="details-row">
                            <span class="details-label">Forma prawna</span>
                            <span class="details-value">{{ app.business_type_label or '-' }}</span>
                        </div>
                        {% if app.registry_source and app.registry_source != 'manual' %}
                        <div class="details-row">
                            <span class="details-label">Źródło danych</span>
                            <span class="details-value">{{ app.registry_source }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Delegaci -->
                    <div class="details-group">
                        <h4>Delegaci do Walnego Zgromadzenia</h4>
                        <div class="details-row">
                            <span class="details-label">Delegat 1</span>
                            <span class="details-value">{{ app.delegate_1 or '-' }}</span>
                        </div>
                        {% if app.delegate_2 %}
                        <div class="details-row">
                            <span class="details-label">Delegat 2</span>
                            <span class="details-value">{{ app.delegate_2 }}</span>
                        </div>
                        {% endif %}
                        {% if app.delegate_3 %}
                        <div class="details-row">
                            <span class="details-label">Delegat 3</span>
                            <span class="details-value">{{ app.delegate_3 }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Dane kontaktowe -->
                    <div class="details-group">
                        <h4>Dane kontaktowe</h4>
                        <div class="details-row">
                            <span class="details-label">Email firmowy</span>
                            <span class="details-value">{{ app.email or '-' }}</span>
                        </div>
                        {% if app.phone %}
                        <div class="details-row">
                            <span class="details-label">Telefon</span>
                            <span class="details-value">{{ app.phone }}</span>
                        </div>
                        {% endif %}
                        {% if app.website %}
                        <div class="details-row">
                            <span class="details-label">Strona WWW</span>
                            <span class="details-value"><a href="{{ app.website }}" target="_blank">{{ app.website }}</a></span>
                        </div>
                        {% endif %}
                        {% if app.short_name %}
                        <div class="details-row">
                            <span class="details-label">Nazwa skrócona</span>
                            <span class="details-value">{{ app.short_name }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Informacje o firmie -->
                    <div class="details-group">
                        <h4>Informacje o firmie</h4>
                        {% if app.description %}
                        <div class="details-row">
                            <span class="details-label">Opis</span>
                            <span class="details-value">{{ app.description }}</span>
                        </div>
                        {% endif %}
                        {% if app.founded_date %}
                        <div class="details-row">
                            <span class="details-label">Data założenia</span>
                            <span class="details-value">{{ app.founded_date.strftime('%Y-%m-%d') }}</span>
                        </div>
                        {% endif %}
                        {% if app.employee_count %}
                        <div class="details-row">
                            <span class="details-label">Zatrudnienie</span>
                            <span class="details-value">{{ app.employee_count }} osób{% if app.show_employee_count %} (publiczne){% endif %}</span>
                        </div>
                        {% endif %}
                        {% if app.annual_revenue %}
                        <div class="details-row">
                            <span class="details-label">Obroty roczne</span>
                            <span class="details-value">{{ app.annual_revenue }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Sekcje tematyczne -->
                    <div class="details-group">
                        <h4>Sekcje tematyczne</h4>
                        <div class="details-row">
                            <span class="details-label">Wybrane sekcje</span>
                            <span class="details-value">
                                {% if app.sections_labels %}
                                <div class="section-tags">
                                    {% for section in app.sections_labels %}
                                    <span class="section-tag">{{ section }}</span>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <span class="empty">Brak</span>
                                {% endif %}
                            </span>
                        </div>
                        {% if app.sections_other %}
                        <div class="details-row">
                            <span class="details-label">Inna sekcja</span>
                            <span class="details-value">{{ app.sections_other }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Zgody RODO -->
                    <div class="details-group">
                        <h4>Zgody i kontakt</h4>
                        <div class="details-row">
                            <span class="details-label">Zgoda email</span>
                            <span class="details-value">{% if app.consent_email %}Tak{% else %}Nie{% endif %}</span>
                        </div>
                        {% if app.consent_email_address %}
                        <div class="details-row">
                            <span class="details-label">Email kontaktowy</span>
                            <span class="details-value">{{ app.consent_email_address }}</span>
                        </div>
                        {% endif %}
                        <div class="details-row">
                            <span class="details-label">Zgoda SMS</span>
                            <span class="details-value">{% if app.consent_sms %}Tak{% else %}Nie{% endif %}</span>
                        </div>
                        {% if app.consent_sms_phone %}
                        <div class="details-row">
                            <span class="details-label">Telefon SMS</span>
                            <span class="details-value">{{ app.consent_sms_phone }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Spółki powiązane -->
                    {% if app.related_companies %}
                    <div class="details-group">
                        <h4>Spółki powiązane</h4>
                        {% for company in app.related_companies %}
                        <div class="details-row">
                            <span class="details-label">Spółka {{ loop.index }}</span>
                            <span class="details-value">{{ company }}</span>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    {% endfor %}

    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
function toggleDetails(button) {
    button.classList.toggle('open');
    const content = button.nextElementSibling;
    content.classList.toggle('open');
}
{% endblock %}