{% extends "layouts/base.twig" %}
{% block title %}{{ translations.edit_employee ?? 'Edytuj pracownika' }}{% endblock %}
{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.edit_employee ?? 'Edytuj pracownika' }}</h3>
        <p class="text-subtitle text-muted">{{ translations.edit_employee_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-center flex-wrap gap-2">
                    <h4 class="card-title mb-0">{{ translations.edit_employee ?? 'Edytuj pracownika' }}</h4>
                </div>
                <div class="card-body px-3 py-4-5">
                    <form id="employee_edit_form" class="needs-validation" novalidate>
                        <div class="row g-4">
                            <div class="col-12 col-xl-6">
                                <div class="border rounded p-3 h-100">
                                    <div class="text-muted small mb-3">{{ translations.basic_data ?? 'Dane podstawowe' }}</div>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label" for="first_name">{{ translations.first_name ?? 'Imie' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" id="first_name" class="form-control" name="name" required
                                                   value="{{ employee.getName() }}" autocomplete="off">
                                            <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'Wypelnij wymagane pola' }}</div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label" for="surname">{{ translations.surname ?? 'Nazwisko' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" id="surname" class="form-control" name="surname" required
                                                   value="{{ employee.getSurname() }}" autocomplete="off">
                                            <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'Wypelnij wymagane pola' }}</div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label" for="display_name">{{ translations.display_name ?? 'Nazwa wyswietlana' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" id="display_name" class="form-control" name="display_name"
                                                   value="{{ employee.getDisplayName() }}" autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-xl-6">
                                <div class="border rounded p-3 h-100">
                                    <div class="text-muted small mb-3">{{ translations.organization ?? 'Organizacja' }}</div>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label">{{ translations.franchise ?? 'Franczyza' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" value="{{ shop.getName() }}" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label" for="phone">{{ translations.phone ?? 'Telefon' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text" id="phone" class="form-control" name="phone"
                                                   value="{{ employee.getPhone() }}" autocomplete="off">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label" for="lang_code">{{ translations.lang ?? 'Jezyk' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <select class="form-select" name="lang_code" id="lang_code" required>
                                                <option value="fr" {% if employee.getLangCode() == 'fr' %}selected{% endif %}>FR</option>
                                                <option value="en" {% if employee.getLangCode() == 'en' %}selected{% endif %}>ENG</option>
                                                <option value="nl" {% if employee.getLangCode() == 'nl' %}selected{% endif %}>NL</option>
                                                <option value="pl" {% if employee.getLangCode() == 'pl' %}selected{% endif %}>PL</option>
                                            </select>
                                            <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'Wypelnij wymagane pola' }}</div>
                                        </div>


                                        <div class="col-md-4">
                                            <label class="form-label" for="employment_type">{{ translations.employment_type ?? 'Forma zatrudnienia' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <select class="form-select" name="employment_type" id="employment_type">
                                                <option value="employment_contract" {% if employee.getEmploymentType() == 'employment_contract' %}selected{% endif %}>{{ translations.employment_type_employment_contract ?? 'Umowa o pracę' }}</option>
                                                <option value="civil_law_contract" {% if employee.getEmploymentType() == 'civil_law_contract' %}selected{% endif %}>{{ translations.employment_type_civil_law_contract ?? 'Umowa cywilnoprawna' }}</option>
                                                <option value="b2b" {% if employee.getEmploymentType() == 'b2b' %}selected{% endif %}>{{ translations.employment_type_b2b ?? 'B2B / Samozatrudnienie' }}</option>
                                                <option value="temporary_work" {% if employee.getEmploymentType() == 'temporary_work' %}selected{% endif %}>{{ translations.employment_type_temporary_work ?? 'Praca tymczasowa' }}</option>
                                                <option value="internship" {% if employee.getEmploymentType() == 'internship' %}selected{% endif %}>{{ translations.employment_type_internship ?? 'Staż / Praktyka' }}</option>
                                                <option value="volunteer" {% if employee.getEmploymentType() == 'volunteer' %}selected{% endif %}>{{ translations.employment_type_volunteer ?? 'Wolontariat' }}</option>
                                                <option value="other" {% if employee.getEmploymentType() == 'other' %}selected{% endif %}>{{ translations.employment_type_other ?? 'Inne' }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="divider mt-4">
                            <div class="divider-text">{{ translations.credentials ?? 'Dane logowania' }}</div>
                        </div>
                        <div class="row g-3">
                            <div class="col-12 col-xl-6">
                                <label class="form-label" for="login">{{ translations.login ?? 'Login' }}</label>
                                <input type="text" id="login" class="form-control" name="login"
                                       value="{{ employee.getLogin() }}" autocomplete="off">
                                <div class="form-text">{{ translations.login_hint ?? 'Pozostaw puste, aby nie zmieniac loginu.' }}</div>
                            </div>
                            <div class="col-12 col-xl-6">
                                <label class="form-label" for="password">{{ translations.password ?? 'Haslo' }}</label>
                                <input type="password" id="password" class="form-control" name="password"
                                       value="" autocomplete="new-password">
                                <div class="form-text">{{ translations.password_hint ?? 'Pozostaw puste, aby nie zmieniac hasla.' }}</div>
                            </div>
                        </div>
                        <input type="hidden" id="employee_id" value="{{ employee.getId() }}">

                        <div class="divider mt-4">
                            <div class="divider-text">{{ translations.workstations ?? 'Stanowiska pracy' }}</div>
                        </div>
                        <div class="row g-3">
                            <div class="col-12 col-xl-6">
                                <label class="form-label" for="workstations">{{ translations.workstations ?? 'Stanowiska pracy' }}</label>
                                <select class="form-select choices" name="workstations[]" id="workstations" multiple>
                                    {% for ws in workstations %}
                                        <option value="{{ ws.getId() }}" {% if employee.hasWorkstation(ws.getId()) %}selected{% endif %}>
                                            {{ ws.getName() }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-6">
                                <button type="button" class="btn btn-warning" id="save_btn">
                                    <i class="bi bi-check2"></i> {{ translations.save ?? 'Zapisz' }}
                                </button>
                            </div>
                            <div class="col-6">
                                <a href="{{ root }}/employees/{{ employee.getId() }}" class="btn btn-outline-secondary float-end">
                                    <i class="bi bi-arrow-left"></i> {{ translations.back ?? 'Wróc' }}
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const form       = document.getElementById('employee_edit_form');
    const saveBtn    = document.getElementById('save_btn');
    const firstNameInp   = document.getElementById('first_name');
    const surnameInp     = document.getElementById('surname');
    const displayNameInp = document.getElementById('display_name');
    const loginInp       = document.getElementById('login');
    let displayNameTouched = displayNameInp.value.trim().length > 0;
    let loginTouched       = loginInp.value.trim().length > 0;
    const workstationsSelect = document.getElementById('workstations');
    displayNameInp.addEventListener('input', () => displayNameTouched = true);
    loginInp.addEventListener('input',       () => loginTouched       = true);
    function generateUserDetails() {
        const firstName = firstNameInp.value.trim();
        const surname   = surnameInp.value.trim();
        if (!firstName || !surname) return;
        if (!displayNameTouched) {
            displayNameInp.value = firstName + ' ' + surname.charAt(0).toUpperCase() + '.';
        }
        if (!loginTouched) {
            const fn = firstName.toLowerCase().replace(/\s+/g, '').slice(0, 3);
            const sn = surname.toLowerCase().replace(/\s+/g, '').slice(0, 3);
            loginInp.value = fn + '_' + sn;
        }
    }
    firstNameInp.addEventListener('keyup', generateUserDetails);
    surnameInp.addEventListener('keyup',   generateUserDetails);
    saveBtn.addEventListener('click', async () => {
        if (!form.checkValidity()) {
            form.classList.add('was-validated');
            Swal.fire({ icon:'error', title:'{{ translations.error ?? "Blad" }}',
                text:'{{ translations.fill_required_fields ?? "Wypelnij wymagane pola" }}' });
            return;
        }
        const employeeId = document.getElementById('employee_id').value;
        const payload = {
            name:         firstNameInp.value.trim(),
            surname:      surnameInp.value.trim(),
            display_name: displayNameInp.value.trim(),
            phone:        document.getElementById('phone').value.trim(),
            lang_code:    document.getElementById('lang_code').value,
            employment_type: document.getElementById('employment_type').value,
            login:        loginInp.value.trim(),
            workstations: Array.from(workstationsSelect.selectedOptions).map(opt => opt.value)
        };

        const passwordVal = document.getElementById('password').value;
        if (passwordVal && passwordVal.trim().length > 0) {
            payload.password = passwordVal;
        }
        try {
            const resp = await api('/ajax/employees/' + employeeId, { method: 'PATCH', data: payload });
            if (!(resp && (resp.success || resp.ok))) {
                Swal.fire({ icon:'error', title:'{{ translations.error ?? "Blad" }}',
                    text: (resp && resp.message) || '{{ translations.undefined_error_occurred ?? "Nieznany blad" }}' });
                return;
            }
            Swal.fire({ icon:'success', title:'{{ translations.success ?? "Sukces" }}',
                text:'{{ translations.operation_successful ?? "Operacja zakonczona" }}',
                timer:1400, showConfirmButton:false });
            setTimeout(() => { window.location.href = '{{ root }}/employees/' + employeeId; }, 900);
        } catch (e) {
            console.error(e);
            Swal.fire({ icon:'error', title:'{{ translations.error ?? "Blad" }}',
                text:'{{ translations.no_api_connection ?? "Brak polaczenia z API" }}' });
        }
    });
});
</script>
{% endblock %}