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

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

{% block head %}
    {{ parent() }}
    <style>
        /* ── Karty konsultantów ─────────────────────────── */
        .consultant-card {
            border-radius: 16px;
            border: 1px solid rgba(0,0,0,.07);
            background: #fff;
            transition: box-shadow .18s ease, transform .18s ease;
            overflow: hidden;
        }
        .consultant-card:hover {
            box-shadow: 0 6px 24px rgba(0,0,0,.10);
            transform: translateY(-2px);
        }
        .consultant-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            font-weight: 700;
            flex-shrink: 0;
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            color: #fff;
        }
        .consultant-position {
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #4361ee;
        }
        .area-chip {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            background: #f0f4ff;
            color: #3a0ca3;
            border-radius: 999px;
            padding: .22rem .72rem;
            font-size: .76rem;
            font-weight: 600;
            border: 1px solid rgba(67,97,238,.15);
        }
        .duty-item {
            font-size: .82rem;
            color: #555;
            padding: .2rem 0;
            border-bottom: 1px dashed #eee;
        }
        .duty-item:last-child { border-bottom: none; }

        /* ── Sekcja spotkań ─────────────────────────────── */
        .meeting-tile-date {
            min-width: 54px;
            width: 54px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,.09);
            flex-shrink: 0;
        }
        .meeting-tile-date-top {
            padding: .35rem .3rem .2rem;
            text-align: center;
        }
        .meeting-tile-date-top .day  { font-size: 1.45rem; font-weight: 800; line-height: 1; }
        .meeting-tile-date-top .mon  { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
        .meeting-row {
            border-radius: 12px;
            background: #fff;
            border: 1px solid rgba(0,0,0,.07);
            padding: .9rem 1rem;
            transition: box-shadow .15s;
        }
        .meeting-row:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); }
        .urgency-dot {
            width: 9px; height: 9px; border-radius: 50%;
            background: #f72585;
            flex-shrink: 0;
            margin-top: 5px;
        }

        /* ── Stany puste ────────────────────────────────── */
        .empty-state {
            background: #f8f9fc;
            border-radius: 16px;
            padding: 3rem 1.5rem;
            text-align: center;
            color: #8694a4;
        }
        .empty-state i { font-size: 2.4rem; margin-bottom: .75rem; }
    </style>
{% 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.cases_title }}</h3>
            <p class="text-subtitle text-muted">
                {{ translations.cases_subtitle }}
            </p>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}

{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEKCJA 1 — Zespół konsultantów
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<div class="mb-5">
    <div class="d-flex align-items-center gap-2 mb-3">
        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center"
             style="width:36px;height:36px">
            <i class="bi bi-people-fill text-primary"></i>
        </div>
        <h5 class="mb-0 fw-bold">{{ translations.cases_team_heading }}</h5>
        {% if team is not empty %}
            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 ms-1"
                  style="font-size:.78rem">{{ team|length }}</span>
        {% endif %}
    </div>

    {% if team is empty %}
        <div class="empty-state">
            <div><i class="bi bi-people text-muted"></i></div>
            <p class="mb-0">{{ translations.cases_team_empty }}</p>
        </div>
    {% else %}
        <div class="row g-3">
            {% for consultant in team %}
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="consultant-card p-4 h-100">

                        {# ── Nagłówek karty ── #}
                        <div class="d-flex align-items-start gap-3 mb-3">
                            <div class="consultant-avatar">{{ consultant.getInitials() }}</div>
                            <div class="flex-grow-1 min-w-0">
                                <div class="fw-bold fs-6 text-truncate">{{ consultant.getFullName() }}</div>
                                {% if consultant.getPositionName() %}
                                    <div class="consultant-position mt-1">{{ consultant.getPositionName() }}</div>
                                {% endif %}
                                {% if consultant.getLevelName() %}
                                    <div class="text-muted" style="font-size:.78rem">{{ consultant.getLevelName() }}</div>
                                {% endif %}
                            </div>
                        </div>

                        {# ── Dane kontaktowe ── #}
                        {% if consultant.getEmail() or consultant.getPhone() %}
                            <div class="d-flex flex-wrap gap-3 mb-3 text-muted" style="font-size:.82rem">
                                {% if consultant.getEmail() %}
                                    <a href="mailto:{{ consultant.getEmail() }}"
                                       class="d-flex align-items-center gap-1 text-muted text-decoration-none hover-text-primary">
                                        <i class="bi bi-envelope text-primary opacity-75"></i>
                                        {{ consultant.getEmail() }}
                                    </a>
                                {% endif %}
                                {% if consultant.getPhone() %}
                                    <span class="d-flex align-items-center gap-1">
                                        <i class="bi bi-telephone text-primary opacity-75"></i>
                                        {{ consultant.getPhone() }}
                                    </span>
                                {% endif %}
                            </div>
                        {% endif %}

                        {# ── Obszary odpowiedzialności ── #}
                        {% set areas = consultant.getAreas() %}
                        {% if areas is not empty %}
                            <div class="mb-3">
                                <div class="text-muted fw-semibold mb-2" style="font-size:.76rem;letter-spacing:.05em;text-transform:uppercase">
                                    {{ translations.cases_responsibility_areas }}
                                </div>
                                <div class="d-flex flex-wrap gap-2">
                                    {% for area in areas %}
                                        <span class="area-chip">
                                            <i class="bi bi-tag-fill" style="font-size:.65rem"></i>
                                            {{ area.label ?? area.area_key ?? area.key }}
                                        </span>
                                    {% endfor %}
                                </div>
                            </div>

                            {# ── Obowiązki pierwszego obszaru (jeśli dostępne) ── #}
                            {% set firstWithDuties = null %}
                            {% for area in areas %}
                                {% if firstWithDuties is null and area.duties is defined and area.duties is not empty %}
                                    {% set firstWithDuties = area %}
                                {% endif %}
                            {% endfor %}
                            {% if firstWithDuties is not null %}
                                <div class="mt-2">
                                    <div class="text-muted fw-semibold mb-1" style="font-size:.76rem;letter-spacing:.05em;text-transform:uppercase">
                                        {{ translations.cases_duties }}
                                    </div>
                                    {% for duty in firstWithDuties.duties|slice(0, 3) %}
                                        <div class="duty-item d-flex align-items-start gap-1">
                                            <i class="bi bi-check2 text-success mt-1 flex-shrink-0" style="font-size:.75rem"></i>
                                            <span>{{ duty }}</span>
                                        </div>
                                    {% endfor %}
                                    {% if firstWithDuties.duties|length > 3 %}
                                        <div class="text-muted" style="font-size:.76rem;margin-top:.3rem">
                                            + {{ firstWithDuties.duties|length - 3 }} {{ translations.cases_and_more }}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        {% endif %}

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

{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEKCJA 2 — Nadchodzące spotkania
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<div class="mb-5">
    <div class="d-flex align-items-center gap-2 mb-3">
        <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center"
             style="width:36px;height:36px">
            <i class="bi bi-calendar-check-fill text-success"></i>
        </div>
        <h5 class="mb-0 fw-bold">{{ translations.cases_upcoming_meetings }}</h5>
        {% if upcoming is not empty %}
            <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 ms-1"
                  style="font-size:.78rem">{{ upcoming|length }}</span>
        {% endif %}

        <a href="{{ root }}/meetings/schedule"
           class="btn btn-sm btn-outline-secondary ms-auto py-0 px-2"
           style="font-size:.8rem">
            <i class="bi bi-calendar3 me-1"></i>
            {{ translations.cases_see_schedule }}
        </a>
    </div>

    {% if upcoming is empty %}
        <div class="empty-state">
            <div><i class="bi bi-calendar-x text-muted"></i></div>
            <p class="mb-1">{{ translations.cases_no_upcoming }}</p>
            <a href="{{ root }}/meetings/schedule" class="btn btn-sm btn-outline-primary mt-2">
                {{ translations.cases_see_schedule }}
            </a>
        </div>
    {% else %}
        <div class="d-flex flex-column gap-2">
            {% for meeting in upcoming %}
                {% set daysUntil  = meeting.getDaysUntil() %}
                {% set isToday    = daysUntil == 0 %}
                {% set isTomorrow = daysUntil == 1 %}
                {% set isUrgent   = daysUntil is not null and daysUntil <= 3 %}

                <div class="meeting-row">
                    <div class="d-flex align-items-start gap-3">

                        {# Kafelek z datą #}
                        <div class="meeting-tile-date">
                            <div class="meeting-tile-date-top {{ isToday ? 'bg-warning text-dark' : (meeting.isCancelled() ? 'bg-secondary text-white' : 'bg-primary text-white') }}">
                                <div class="day">{{ meeting.getMeetingDate()|date('d') }}</div>
                                <div class="mon">{{ meeting.getPolishMonth() }}</div>
                            </div>
                        </div>

                        {# Treść #}
                        <div class="flex-grow-1 min-w-0">
                            <div class="d-flex align-items-center flex-wrap gap-2 mb-1">
                                <span class="fw-semibold {{ meeting.isCancelled() ? 'text-decoration-line-through text-muted' : '' }}"
                                      style="font-size:.95rem">
                                    {{ meeting.getTitle() }}
                                </span>

                                {% if meeting.isGroup() %}
                                    <span class="badge bg-primary bg-opacity-10 text-primary" style="font-size:.72rem">
                                        <i class="bi bi-people-fill me-1"></i>{{ translations.type_group }}
                                    </span>
                                {% else %}
                                    <span class="badge bg-info bg-opacity-10 text-info" style="font-size:.72rem">
                                        <i class="bi bi-person-fill me-1"></i>{{ translations.type_individual }}
                                    </span>
                                {% endif %}

                                {% if meeting.isCancelled() %}
                                    <span class="badge bg-danger bg-opacity-10 text-danger" style="font-size:.72rem">
                                        {{ translations.status_cancelled }}
                                    </span>
                                {% endif %}
                            </div>

                            <div class="text-muted d-flex flex-wrap gap-3 align-items-center" style="font-size:.82rem">
                                <span>
                                    <i class="bi bi-clock me-1 text-primary opacity-75"></i>
                                    {{ meeting.getDayOfWeek()|capitalize }},
                                    {{ meeting.getMeetingDate()|date('d') }} {{ meeting.getPolishMonthFull() }}
                                    {{ meeting.getMeetingTime()|slice(0, 5) }}
                                </span>
                                {% if meeting.getDurationMinutes() %}
                                    <span>{{ meeting.getDurationMinutes() }} min</span>
                                {% endif %}
                                {% if meeting.getFormattedLocation() %}
                                    <span>
                                        <i class="bi bi-geo-alt me-1 text-primary opacity-75"></i>
                                        {{ meeting.getFormattedLocation() }}
                                    </span>
                                {% endif %}
                            </div>

                            {# Konsultanci w spotkaniu #}
                            {% set consultants = meeting.getConsultants() %}
                            {% if consultants is not empty %}
                                <div class="d-flex flex-wrap gap-1 mt-2">
                                    {% for p in consultants %}
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary" style="font-size:.73rem">
                                            <i class="bi bi-person-badge me-1"></i>{{ p.display_name }}
                                        </span>
                                    {% endfor %}
                                </div>
                            {% endif %}

                            {# Akcje #}
                            {% if meeting.getExternalLink() %}
                                <div class="mt-2">
                                    <a href="{{ meeting.getExternalLink() }}" target="_blank" rel="noopener"
                                       class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size:.78rem">
                                        <i class="bi bi-link-45deg me-1"></i>
                                        {{ translations.open_link }}
                                    </a>
                                </div>
                            {% endif %}
                        </div>

                        {# Wskaźnik pilności #}
                        <div class="d-none d-md-flex flex-column align-items-end gap-1 flex-shrink-0">
                            {% if not meeting.isCancelled() %}
                                {% if isToday %}
                                    <span class="badge bg-warning text-dark" style="font-size:.72rem">{{ translations.cases_day_today }}</span>
                                {% elseif isTomorrow %}
                                    <span class="badge bg-warning text-dark" style="font-size:.72rem">{{ translations.cases_day_tomorrow }}</span>
                                {% elseif isUrgent %}
                                    <span class="badge bg-warning text-dark" style="font-size:.72rem">{{ translations.cases_in_days_prefix }} {{ daysUntil }} {{ translations.cases_in_days_suffix }}</span>
                                {% else %}
                                    <span class="text-muted" style="font-size:.76rem">{{ translations.cases_in_days_prefix }} {{ daysUntil }} {{ translations.cases_in_days_suffix }}</span>
                                {% endif %}
                            {% endif %}
                        </div>

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

{% endblock %}