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

{% block title %}{{ translations.franchise_employee ?? 'Pracownik' }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        .pos-pill { border-radius: 999px; padding: .2rem .55rem; font-weight: 600; font-size: .78rem; }
        .status-badge-active   { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
        .status-badge-inactive { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
        .status-badge { display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.25rem .75rem; font-size:.82rem; font-weight:600; }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.franchise_employee ?? 'Pracownik' }}</h3>
        <p class="text-subtitle text-muted">{{ translations.franchise_employee_subtitle ?? '' }}</p>
    </div>
{% endblock %}

{% block content %}
<div class="row">
    {# ── Główna karta ── #}
    <div class="col-12 col-xl-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-start gap-2 flex-wrap">
                <div>
                    <h4 class="card-title mb-1">
                        {{ employee.getDisplayName() ?: (employee.getName() ~ ' ' ~ employee.getSurname()) }}
                    </h4>
                    <div class="d-flex align-items-center gap-2 mt-1 flex-wrap">
                        <div class="text-muted small">
                            {{ shop.getName() }}
                            {% if employee.getProductionAreaName() %} &bull; {{ employee.getProductionAreaName() }}{% endif %}
                            {% if employee.getLangCode() %} &bull; {{ employee.getLangCode()|upper }}{% endif %}
                        </div>
                        {% if employee.isSoftDelete() %}
                            <span class="status-badge status-badge-inactive">
                                <i class="bi bi-slash-circle"></i> {{ translations.inactive ?? 'Nieaktywny' }}
                            </span>
                        {% else %}
                            <span class="status-badge status-badge-active">
                                <i class="bi bi-check-circle"></i> {{ translations.active ?? 'Aktywny' }}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <div class="d-flex gap-2 flex-wrap">
                    <a class="btn btn-warning btn-sm" href="{{ root }}/employees/{{ employee.getId() }}/edit">
                        <i class="bi bi-pencil-square"></i> {{ translations.edit ?? 'Edytuj' }}
                    </a>
                    {% if employee.isSoftDelete() %}
                        <button class="btn btn-success btn-sm" onclick="toggleActive({{ employee.getId() }}, false)">
                            <i class="bi bi-person-check"></i> {{ translations.activate ?? 'Aktywuj' }}
                        </button>
                    {% else %}
                        <button class="btn btn-secondary btn-sm" onclick="toggleActive({{ employee.getId() }}, true)">
                            <i class="bi bi-person-x"></i> {{ translations.deactivate ?? 'Dezaktywuj' }}
                        </button>
                    {% endif %}
                </div>
            </div>

            <div class="card-body">

                {# ── Dane podstawowe ── #}
                <div class="divider">
                    <div class="divider-text">{{ translations.employee_profile ?? 'Profil pracownika' }}</div>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="border rounded p-3 h-100">
                            <div class="text-muted small mb-2">{{ translations.basic_data ?? 'Dane podstawowe' }}</div>
                            <dl class="row mb-0">
                                <dt class="col-5 text-muted">{{ translations.first_name ?? 'Imię' }}</dt>
                                <dd class="col-7 mb-2">{{ employee.getName() }}</dd>

                                <dt class="col-5 text-muted">{{ translations.surname ?? 'Nazwisko' }}</dt>
                                <dd class="col-7 mb-2">{{ employee.getSurname() }}</dd>

                                <dt class="col-5 text-muted">{{ translations.phone ?? 'Telefon' }}</dt>
                                <dd class="col-7 mb-2">{{ employee.getPhone() ?: '-' }}</dd>

                                <dt class="col-5 text-muted">{{ translations.login ?? 'Login' }}</dt>
                                <dd class="col-7 mb-0">{{ employee.getLogin() ?: '-' }}</dd>
                            </dl>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="border rounded p-3 h-100">
                            <div class="text-muted small mb-2">{{ translations.organization ?? 'Organizacja' }}</div>
                            <dl class="row mb-0">
                                <dt class="col-5 text-muted">{{ translations.franchise ?? 'Franczyza' }}</dt>
                                <dd class="col-7 mb-2">{{ shop.getName() }}</dd>

                                <dt class="col-5 text-muted">{{ translations.production_area ?? 'Obszar produkcji' }}</dt>
                                <dd class="col-7 mb-2">{{ employee.getProductionAreaName() ?: '-' }}</dd>

                                <dt class="col-5 text-muted">{{ translations.workstation ?? 'Stanowisko pracy' }}</dt>
                                <dd class="col-7 mb-2">{{ employee.getWorkstationString() ?: '-' }}</dd>

                                <dt class="col-5 text-muted">{{ translations.lang ?? 'Język' }}</dt>
                                <dd class="col-7 mb-0">{{ employee.getLangCode() ? employee.getLangCode()|upper : '-' }}</dd>

                                <dt class="col-5 text-muted mt-2">{{ translations.franchise_role ?? 'Typ pracownika' }}</dt>
                                <dd class="col-7 mb-0 mt-2">
                                    {% set role = employee.getFranchiseRole() %}
                                    {% if role == 'franchisee' %}
                                        <span class="badge bg-primary">{{ translations.franchise_role_franchisee ?? 'Franczyzobiorca' }}</span>
                                    {% elseif role == 'franchise_partner' %}
                                        <span class="badge bg-warning text-dark">{{ translations.franchise_role_franchise_partner ?? 'Partner franczyzowy' }}</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ translations.franchise_role_employee ?? 'Pracownik' }}</span>
                                    {% endif %}
                                </dd>

                                <dt class="col-5 text-muted mt-2">{{ translations.employment_type ?? 'Forma zatrudnienia' }}</dt>
                                <dd class="col-7 mb-0 mt-2">
                                    {% set et = employee.getEmploymentType() %}
                                    {% if et == 'civil_law_contract' %}
                                        <span class="badge bg-info text-dark">{{ translations.employment_type_civil_law_contract ?? 'Umowa cywilnoprawna' }}</span>
                                    {% elseif et == 'b2b' %}
                                        <span class="badge bg-dark">{{ translations.employment_type_b2b ?? 'B2B' }}</span>
                                    {% elseif et == 'temporary_work' %}
                                        <span class="badge bg-secondary">{{ translations.employment_type_temporary_work ?? 'Praca tymczasowa' }}</span>
                                    {% elseif et == 'internship' %}
                                        <span class="badge bg-success">{{ translations.employment_type_internship ?? 'Staż / Praktyka' }}</span>
                                    {% elseif et == 'volunteer' %}
                                        <span class="badge bg-warning text-dark">{{ translations.employment_type_volunteer ?? 'Wolontariat' }}</span>
                                    {% elseif et == 'other' %}
                                        <span class="badge bg-light text-dark border">{{ translations.employment_type_other ?? 'Inne' }}</span>
                                    {% else %}
                                        <span class="badge bg-primary">{{ translations.employment_type_employment_contract ?? 'Umowa o pracę' }}</span>
                                    {% endif %}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>

                {# ── Stanowiska (read-only) ── #}
                <div class="divider mt-4">
                    <div class="divider-text">{{ translations.positions ?? 'Stanowiska' }}</div>
                </div>

                {% set positions = employee.getPositions() ?? [] %}
                {% if positions|length == 0 %}
                    <div class="border rounded p-3 text-muted">
                        <i class="bi bi-info-circle"></i>
                        {{ translations.no_positions_assigned ?? 'Brak przypisanych stanowisk.' }}
                    </div>
                {% else %}
                    <div class="row g-2">
                        {% for pos in positions %}
                            <div class="col-12">
                                <div class="border rounded p-3 d-flex justify-content-between align-items-start gap-3">
                                    <div class="d-flex align-items-start gap-3">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                             style="width:38px;height:38px;background:rgba(13,110,253,.08);">
                                            <i class="bi bi-diagram-3"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{{ pos.getName() ?? '-' }}</div>
                                            <div class="text-muted small">
                                                {{ translations.level ?? 'Poziom' }}:
                                                <span class="fw-semibold">{{ pos.getLevelName() ?? '-' }}</span>
                                            </div>
                                            {% if pos.getDescription() %}
                                                <div class="text-muted small mt-1">{{ pos.getDescription() }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                {# ── Stanowiska pracy ── #}
                <div class="divider mt-4">
                    <div class="divider-`text">{{ translations.workstations ?? 'Stanowiska pracy' }}</div>
                </div>

                {% set workstations = employee.getWorkstations() ?? [] %}
                {% if workstations|length == 0 %}
                    <div class="border rounded p-3 text-muted">
                        <i class="bi bi-info-circle"></i>
                        {{ translations.no_workstations_assigned ?? 'Brak przypisanych stanowisk pracy.' }}
                    </div>
                {% else %}
                    <div class="d-flex flex-wrap gap-2 mt-2">
                        {% for ws in workstations %}
                            <div class="border rounded p-3 d-flex align-items-start gap-3 flex-grow-1" style="min-width:200px;">
                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                     style="width:38px;height:38px;background:rgba(25,135,84,.08);">
                                    <i class="bi bi-tools text-success"></i>
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ ws.getName() ?? '-' }}</div>
                                    {% if ws.getDescription() %}
                                        <div class="text-muted small mt-1">{{ ws.getDescription() }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

            </div>{# /card-body #}

            <div class="card-footer d-flex justify-content-between flex-wrap gap-2">
                <a href="{{ root }}/employees" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> {{ translations.back ?? 'Wróć' }}
                </a>
                <span class="text-muted small">ID: {{ employee.getId() }}</span>
            </div>
        </div>
    </div>

    {# ── Sidebar szybkich akcji ── #}
    <div class="col-12 col-xl-4">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">{{ translations.quick_actions ?? 'Szybkie akcje' }}</h4>
            </div>
            <div class="card-body d-grid gap-2">
                <a class="btn btn-outline-primary" href="{{ root }}/employees/{{ employee.getId() }}/competencies">
                    <i class="bi bi-patch-check"></i> {{ translations.competencies_card ?? 'Kompetencje' }}
                </a>
                <a class="btn btn-outline-secondary" href="{{ root }}/employees/{{ employee.getId() }}/positions">
                    <i class="bi bi-diagram-3"></i> {{ translations.manage_employee_positions ?? 'Zarządzaj stanowiskami' }}
                </a>
                <a class="btn btn-outline-warning" href="{{ root }}/employees/{{ employee.getId() }}/edit">
                    <i class="bi bi-pencil-square"></i> {{ translations.edit ?? 'Edytuj' }}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function saveEmployeeRole() {
        const roleId = document.getElementById('employee_role').value;
        const payload = { id_role: roleId ? parseInt(roleId, 10) : null };
        api('/ajax/employees/{{ employee.getId() }}', { method: 'PATCH', data: payload })
            .then(resp => {
                if (resp && (resp.success || resp.ok)) {
                    Swal.fire({ icon:'success',
                        title:'{{ translations.success ?? "Sukces" }}',
                        text:'{{ translations.operation_successful ?? "Operacja zakończona" }}',
                        timer:1500, showConfirmButton:false });
                } else {
                    Swal.fire('Error', (resp && resp.message) || 'Unknown error', 'error');
                }
            });
    }

    function toggleActive(employeeId, deactivate) {
        const title = deactivate
            ? '{{ translations.deactivate_confirm ?? "Dezaktywować pracownika?" }}'
            : '{{ translations.activate_confirm ?? "Aktywować pracownika?" }}';
        const confirmText = deactivate
            ? '{{ translations.yes_deactivate ?? "Tak, dezaktywuj" }}'
            : '{{ translations.yes_activate ?? "Tak, aktywuj" }}';

        Swal.fire({
            title: title,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: deactivate ? '#6c757d' : '#198754',
            cancelButtonColor: '#d33',
            confirmButtonText: confirmText,
            cancelButtonText: '{{ translations.cancel ?? "Anuluj" }}'
        }).then((result) => {
            if (result.isConfirmed) {
                api('/ajax/employees/' + employeeId + '/status', {
                    method: 'PATCH',
                    data: { soft_delete: deactivate ? 1 : 0 }
                }).then(function (res) {
                    if (res && (res.success || res.ok)) {
                        location.reload();
                    } else {
                        Swal.fire('Error', (res && res.message) || '{{ translations.error ?? "Błąd" }}', 'error');
                    }
                });
            }
        });
    }
</script>
{% endblock %}