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

{% block title %}{{ translations.assign_position ?? 'Stanowiska pracownika' }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        .pos-card { transition: transform .08s ease, box-shadow .08s ease; }
        .pos-card:hover { transform: translateY(-1px); }
        .pos-meta { font-size: .875rem; color: #6c757d; }
        .pos-header-icon { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(13, 110, 253, .08); color: #0d6efd; }
        .pos-header-icon.available { background: rgba(25, 135, 84, .10); color: #198754; }
        .pos-badge { font-weight: 600; border-radius: 999px; padding: .15rem .45rem; line-height: 1.05; font-size: .78rem; }
        .level-row { border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: .75rem .9rem; background: #fff; }
        .level-row.available { border-color: rgba(25, 135, 84, .35); background: rgba(25, 135, 84, .04); }
        .level-row.locked { opacity: .65; background: #f8f9fa; }
        .progress { height: 8px; border-radius: 999px; }
        .pos-empty { border: 1px dashed rgba(0,0,0,.15); border-radius: 14px; padding: 1.25rem; color: #6c757d; background: #fff; }
        .readonly-badge { font-size: .75rem; background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; border-radius: 999px; padding: .2rem .65rem; }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.employee_positions ?? 'Stanowiska pracownika' }}</h3>
        <p class="text-subtitle text-muted">{{ translations.employee_positions_subtitle ?? '' }}</p>
    </div>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-start flex-wrap gap-2">
                    <div>
                        <h4 class="card-title mb-1">
                            {{ translations.positions_for ?? 'Stanowiska dla' }}:
                            <span class="text-primary">
                                {{ employee.getDisplayName() ?: (employee.getName() ~ ' ' ~ employee.getSurname()) }}
                            </span>
                        </h4>
                        <div class="d-flex align-items-center gap-2 mt-1">
                            <span class="text-muted small">ID: {{ employee.getId() }}</span>
                            <span class="readonly-badge"><i class="bi bi-eye me-1"></i>{{ translations.readonly ?? 'Tylko do odczytu' }}</span>
                        </div>
                    </div>
                    <a class="btn btn-secondary" href="{{ root }}/employees/{{ employee.getId() }}">
                        <i class="bi bi-arrow-left"></i> {{ translations.back ?? 'Wróć' }}
                    </a>
                </div>

                <div class="card-body px-3 py-4-5">

                    {# ── Prepare ── #}
                    {% set employee_competency_ids = employee.getCompetencyIds() %}
                    {% set assigned_positions = employee.getPositions() %}
                    {% set assigned_position_ids = [] %}
                    {% set assigned_position_by_id = {} %}
                    {% for ap in assigned_positions %}
                        {% set pid = ap.getId() %}
                        {% set assigned_position_ids = assigned_position_ids|merge([pid]) %}
                        {% set assigned_position_by_id = assigned_position_by_id|merge({
                            ('pos_' ~ pid): { level_id: ap.getLevelId(), level_name: ap.getLevelName(), level_order: ap.getLevelOrder() }
                        }) %}
                    {% endfor %}

                    {# ── Search + counters ── #}
                    <div class="row mb-4 align-items-end g-3">
                        <div class="col-12 col-lg-6">
                            <label class="form-label" for="position_search">{{ translations.search ?? 'Szukaj' }}</label>
                            <input type="text" class="form-control" id="position_search"
                                   placeholder="{{ translations.search_positions_placeholder ?? 'Szukaj stanowisk...' }}">
                        </div>
                        <div class="col-12 col-lg-6 text-lg-end">
                            <div class="d-flex flex-column align-items-lg-end gap-2">
                                <span class="badge bg-light text-dark">
                                    {{ translations.total_positions ?? 'Wszystkich' }}: <span id="positionsCount">0</span>
                                </span>
                                <span class="badge bg-success bg-opacity-10 text-success border border-success-subtle">
                                    {{ translations.assigned_positions ?? 'Przypisanych' }}: {{ assigned_positions|length }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="divider">
                        <div class="divider-text">{{ translations.positions ?? 'Stanowiska' }}</div>
                    </div>

                    {% if positions is empty %}
                        <div class="pos-empty">
                            <i class="bi bi-info-circle me-2"></i>
                            {{ translations.no_positions ?? 'Brak zdefiniowanych stanowisk.' }}
                        </div>
                    {% else %}
                        <div class="row g-4" id="positionsGrid">
                            {% for pos in positions %}
                                {% set levelCount = pos.getLevels() is defined ? pos.getLevels()|length : 0 %}
                                {% set posHasAnyAvailableLevel = false %}
                                {% set levelsForJs = [] %}

                                {% if levelCount > 0 %}
                                    {% for lvl in pos.getLevels() %}
                                        {% set requiredIds = [] %}
                                        {% set requiredNames = [] %}
                                        {% if lvl.getCompetencies() is defined and lvl.getCompetencies() is not empty %}
                                            {% for rc in lvl.getCompetencies() %}
                                                {% set requiredIds = requiredIds|merge([rc.getId()]) %}
                                                {% set requiredNames = requiredNames|merge([rc.getName()]) %}
                                            {% endfor %}
                                        {% endif %}
                                        {% set requiredCount = requiredIds|length %}
                                        {% set haveCount = 0 %}
                                        {% for rid in requiredIds %}
                                            {% if rid in employee_competency_ids %}{% set haveCount = haveCount + 1 %}{% endif %}
                                        {% endfor %}
                                        {% set missingCount = requiredCount - haveCount %}
                                        {% set isLevelAvailable = (missingCount <= 0) %}
                                        {% if isLevelAvailable %}{% set posHasAnyAvailableLevel = true %}{% endif %}
                                        {% set percent = requiredCount == 0 ? 100 : ((haveCount / requiredCount) * 100)|round(0, 'floor') %}
                                        {% set levelsForJs = levelsForJs|merge([{
                                            id: lvl.getId(), name: lvl.getName(),
                                            required_count: requiredCount, have_count: haveCount,
                                            missing_count: missingCount, percent: percent,
                                            is_available: isLevelAvailable
                                        }]) %}
                                    {% endfor %}
                                {% endif %}

                                {% set isAssigned = pos.getId() in assigned_position_ids %}
                                {% set assignedKey = 'pos_' ~ pos.getId() %}
                                {% set assignedInfo = assigned_position_by_id[assignedKey] ?? null %}
                                {% set searchText = (pos.getName() ~ ' ' ~ (pos.getDescription() ?? ''))|lower %}

                                <div class="col-12 col-xl-6 position-item"
                                     data-search-text="{{ searchText }}"
                                     data-position-id="{{ pos.getId() }}">

                                    <div class="card pos-card h-100 shadow-sm {{ posHasAnyAvailableLevel ? 'border-success-subtle' : '' }}">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
                                                <div class="d-flex align-items-start gap-3">
                                                    <div class="pos-header-icon {{ posHasAnyAvailableLevel ? 'available' : '' }}">
                                                        <i class="bi bi-briefcase"></i>
                                                    </div>
                                                    <div>
                                                        <h5 class="mb-1">{{ pos.getName() }}</h5>
                                                        <div class="d-flex align-items-center gap-2 flex-wrap">
                                                            <span class="badge bg-light text-dark pos-badge border">
                                                                {{ levelCount }} {{ translations.levels ?? 'poziomów' }}
                                                            </span>
                                                            {% if isAssigned %}
                                                                <span class="badge bg-success pos-badge">
                                                                    <i class="bi bi-check2 me-1"></i>
                                                                    {{ translations.assigned ?? 'Przypisano' }}{% if assignedInfo and assignedInfo.level_name %} &bull; {{ assignedInfo.level_name }}{% endif %}
                                                                </span>
                                                            {% else %}
                                                                <span class="badge bg-secondary-subtle text-secondary pos-badge border border-secondary-subtle">
                                                                    {{ translations.not_assigned ?? 'Nie przypisano' }}
                                                                </span>
                                                            {% endif %}
                                                            {% if posHasAnyAvailableLevel %}
                                                                <span class="badge bg-success-subtle text-success pos-badge border border-success-subtle">
                                                                    <i class="bi bi-check-circle me-1"></i>{{ translations.requirements_met ?? 'Wymogi spełnione' }}
                                                                </span>
                                                            {% else %}
                                                                <span class="badge bg-warning-subtle text-warning pos-badge border border-warning-subtle">
                                                                    <i class="bi bi-exclamation-triangle me-1"></i>{{ translations.requirements_not_met ?? 'Wymogi niespełnione' }}
                                                                </span>
                                                            {% endif %}
                                                        </div>
                                                        {% if pos.getDescription() %}
                                                            <div class="pos-meta mt-2">{{ pos.getDescription() }}</div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>

                                            <hr class="my-3">

                                            {% if levelCount == 0 %}
                                                <div class="text-muted small">
                                                    <i class="bi bi-info-circle me-1"></i>
                                                    {{ translations.position_has_no_levels ?? 'Stanowisko nie ma zdefiniowanych poziomów.' }}
                                                </div>
                                            {% else %}
                                                <div class="fw-semibold mb-2 small text-muted">
                                                    <i class="bi bi-graph-up me-1"></i>
                                                    {{ translations.levels_and_required_competencies ?? 'Poziomy i wymagane kompetencje' }}
                                                </div>
                                                <div class="d-grid gap-2">
                                                    {% for lvl in levelsForJs %}
                                                        <div class="level-row {{ lvl.is_available ? 'available' : 'locked' }}">
                                                            <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
                                                                <div class="fw-semibold">
                                                                    {% if lvl.is_available %}
                                                                        <i class="bi bi-check-circle text-success me-1"></i>
                                                                    {% else %}
                                                                        <i class="bi bi-exclamation-triangle text-warning me-1"></i>
                                                                    {% endif %}
                                                                    {{ lvl.name ?? ('Poziom #' ~ lvl.id) }}
                                                                </div>
                                                                <div class="d-flex gap-2 flex-wrap">
                                                                    <span class="badge {{ lvl.is_available ? 'bg-success' : 'bg-light text-dark' }}">
                                                                        {{ lvl.have_count }}/{{ lvl.required_count }} {{ translations.competencies_genitive ?? 'kompetencji' }}
                                                                    </span>
                                                                    {% if lvl.required_count > 0 and lvl.missing_count > 0 %}
                                                                        <span class="badge bg-warning text-dark">
                                                                            {{ translations.missing ?? 'Brak' }} {{ lvl.missing_count }}
                                                                        </span>
                                                                    {% elseif lvl.required_count == 0 %}
                                                                        <span class="badge bg-success">{{ translations.no_requirements ?? 'Brak wymagań' }}</span>
                                                                    {% else %}
                                                                        <span class="badge bg-success">{{ translations.complete ?? 'Kompletne' }}</span>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                            <div class="mt-2">
                                                                <div class="progress">
                                                                    <div class="progress-bar {{ lvl.is_available ? 'bg-success' : 'bg-primary' }}"
                                                                         style="width: {{ lvl.percent }}%"></div>
                                                                </div>
                                                                <div class="small text-muted mt-1">{{ translations.progress ?? 'Postęp' }}: {{ lvl.percent }}%</div>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const searchInp      = document.getElementById('position_search');
    const positionsCountEl = document.getElementById('positionsCount');
    const grid           = document.getElementById('positionsGrid');

    function refreshCount() {
        if (!grid || !positionsCountEl) return;
        positionsCountEl.textContent = String(
            grid.querySelectorAll('.position-item:not([style*="display: none"])').length
        );
    }

    function applySearch() {
        const query = (searchInp?.value || '').trim().toLowerCase();
        document.querySelectorAll('.position-item').forEach(item => {
            const text = item.getAttribute('data-search-text') || '';
            item.style.display = !query || text.includes(query) ? '' : 'none';
        });
        refreshCount();
    }

    if (searchInp) searchInp.addEventListener('input', applySearch);

    applySearch();
});
</script>
{% endblock %}