{% extends 'layouts/base.twig' %}

{% block title %}{{ translations.meeting_schedule }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h3>{{ translations.meeting_schedule }}</h3>
                <p class="text-subtitle text-muted">
                    {{ translations.meeting_schedule_subtitle }}
                </p>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}

{# ── Podsumowanie statystyk ──────────────────────────────────────────── #}
<div class="row g-3 mb-4" id="stat-cards">

    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm h-100 stat-filter-card"
             data-filter="all" role="button" title="Pokaż wszystkie nadchodzące"
             style="cursor:pointer; transition:box-shadow .15s, transform .15s">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:48px;height:48px">
                    <i class="bi bi-calendar-check text-success fs-4"></i>
                </div>
                <div>
                    <div class="fw-bold fs-4 lh-1" id="stat-count-all">{{ upcoming|length }}</div>
                    <div class="text-muted small">{{ translations.upcoming_meetings }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm h-100 stat-filter-card"
             data-filter="group" role="button" title="Filtruj: spotkania grupowe"
             style="cursor:pointer; transition:box-shadow .15s, transform .15s">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:48px;height:48px">
                    <i class="bi bi-people-fill text-primary fs-4"></i>
                </div>
                <div>
                    <div class="fw-bold fs-4 lh-1">
                        {{ upcoming|filter(m => m.isGroup())|length }}
                    </div>
                    <div class="text-muted small">{{ translations.type_group }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm h-100 stat-filter-card"
             data-filter="individual" role="button" title="Filtruj: spotkania indywidualne"
             style="cursor:pointer; transition:box-shadow .15s, transform .15s">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                <div class="rounded-circle bg-info bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:48px;height:48px">
                    <i class="bi bi-person-fill text-info fs-4"></i>
                </div>
                <div>
                    <div class="fw-bold fs-4 lh-1">
                        {{ upcoming|filter(m => m.isIndividual())|length }}
                    </div>
                    <div class="text-muted small">{{ translations.type_individual }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                <div class="rounded-circle bg-secondary bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:48px;height:48px">
                    <i class="bi bi-clock-history text-secondary fs-4"></i>
                </div>
                <div>
                    <div class="fw-bold fs-4 lh-1">{{ past|length }}</div>
                    <div class="text-muted small">{{ translations.past_meetings }}</div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row">

    {# ── Nadchodzące spotkania ─────────────────────────────────────────── #}
    <div class="col-12 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent py-3">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                    <h5 class="card-title mb-0 d-flex align-items-center gap-2">
                        <i class="bi bi-calendar-check text-success"></i>
                        {{ translations.upcoming_meetings }}
                        {% if upcoming is not empty %}
                            <span class="badge bg-success rounded-pill" id="meetings-count">{{ upcoming|length }}</span>
                        {% endif %}
                    </h5>
                    <span class="text-muted small d-none" id="active-filter-label">
                        <i class="bi bi-funnel-fill me-1"></i><span></span>
                        &mdash; <a href="#" id="clear-filter" class="text-muted">{{ translations.clear_filter }}</a>
                    </span>
                </div>
            </div>
            <div class="card-body p-3">
                {% if upcoming is not empty %}
                    <div class="list-group list-group-flush border-0" id="meetings-list">
                        {% for meeting in upcoming %}
                            {% include 'communication/_meeting_item.twig' with {meeting: meeting} %}
                        {% endfor %}
                    </div>
                    <p class="text-center text-muted small py-3 mb-0 d-none" id="no-filter-results">
                        <i class="bi bi-funnel me-1"></i>{{ translations.no_filter_results }}
                    </p>
                {% else %}
                    <div class="text-center py-5 px-4">
                        <div class="mb-3">
                            <i class="bi bi-calendar-x text-muted" style="font-size:3rem"></i>
                        </div>
                        <h6 class="text-muted fw-normal">{{ translations.no_upcoming_meetings }}</h6>
                        <p class="text-muted small mb-0">
                            {{ translations.no_upcoming_meetings_hint }}
                        </p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    {# ── Historia spotkań ─────────────────────────────────────────────── #}
    {% if past is not empty %}
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent py-3">
                <h5 class="card-title mb-0 d-flex align-items-center gap-2">
                    <i class="bi bi-clock-history text-secondary"></i>
                    {{ translations.past_meetings }}
                    <span class="badge bg-secondary rounded-pill">{{ past|length }}</span>
                </h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    {% for meeting in past %}
                        {% include 'communication/_meeting_item.twig' with {meeting: meeting, isPast: true} %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

</div>

{% if upcoming is not empty %}
<script>
(function () {
    const list        = document.getElementById('meetings-list');
    const counter     = document.getElementById('meetings-count');
    const noResults   = document.getElementById('no-filter-results');
    const filterLabel = document.getElementById('active-filter-label');
    const clearBtn    = document.getElementById('clear-filter');
    const statCards   = document.querySelectorAll('.stat-filter-card');

    if (!list) return;

    const LABELS = { all: 'Wszystkie', group: '{{ translations.type_group|e("js") }}', individual: '{{ translations.type_individual|e("js") }}' };

    function applyFilter(filter) {
        const items = list.querySelectorAll('.meeting-item');
        let visible = 0;

        items.forEach(function (item) {
            const show = filter === 'all' || item.dataset.type === filter;
            item.style.display = show ? '' : 'none';
            if (show) visible++;
        });

        if (counter)   counter.textContent = visible;
        if (noResults) noResults.classList.toggle('d-none', visible > 0);

        // Podświetlenie aktywnej karty statystyk
        statCards.forEach(function (card) {
            const active = card.dataset.filter === filter;
            card.style.boxShadow = active ? '0 0 0 3px rgba(13,110,253,.35)' : '';
            card.style.transform = active ? 'translateY(-2px)' : '';
        });

        // Etykieta aktywnego filtra
        if (filterLabel) {
            if (filter === 'all') {
                filterLabel.classList.add('d-none');
            } else {
                filterLabel.querySelector('span').textContent = LABELS[filter] || filter;
                filterLabel.classList.remove('d-none');
            }
        }
    }

    // Kliknięcie w karty statystyk
    statCards.forEach(function (card) {
        card.addEventListener('click', function () {
            applyFilter(card.dataset.filter);
        });
        card.addEventListener('mouseenter', function () {
            if (card.style.transform !== 'translateY(-2px)') {
                card.style.transform = 'translateY(-1px)';
                card.style.boxShadow = '0 4px 12px rgba(0,0,0,.1)';
            }
        });
        card.addEventListener('mouseleave', function () {
            // Przywróć stan aktywny jeśli był
            const items = list.querySelectorAll('.meeting-item');
            let anyHidden = false;
            items.forEach(function (i) { if (i.style.display === 'none') anyHidden = true; });
            const currentFilter = anyHidden
                ? (card.style.boxShadow.includes('13,110,253') ? card.dataset.filter : null)
                : null;
            if (!currentFilter) {
                card.style.transform = card.style.boxShadow.includes('13,110,253') ? 'translateY(-2px)' : '';
                if (!card.style.boxShadow.includes('13,110,253')) card.style.boxShadow = '';
            }
        });
    });

    // Wyczyszczenie filtra
    if (clearBtn) {
        clearBtn.addEventListener('click', function (e) {
            e.preventDefault();
            applyFilter('all');
        });
    }
})();
</script>
{% endif %}

{% endblock %}