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

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

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.edit_employee }}</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 }}</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 ?? 'basic_data' }}
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label" for="first_name">{{ translations.first_name }}</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 }}</div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="surname">{{ translations.surname }}</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 }}</div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="display_name">{{ translations.display_name }}</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 ?? 'organization' }}
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label">{{ translations.franchise }}</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 }}</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 }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <select class="form-select" name="lang_code" id="lang_code" required>
                                                <option value="fr" {% if employee.getLang() == 'fr' %}selected{% endif %}>FR</option>
                                                <option value="en" {% if employee.getLang() == 'en' %}selected{% endif %}>ENG</option>
                                                <option value="nl" {% if employee.getLang() == 'nl' %}selected{% endif %}>NL</option>
                                                <option value="pl" {% if employee.getLang() == 'pl' %}selected{% endif %}>PL</option>
                                            </select>
                                            <div class="invalid-feedback">{{ translations.fill_required_fields }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="divider mt-4">
                            <div class="divider-text">{{ translations.credentials ?? 'credentials' }}</div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12 col-xl-6">
                                <label class="form-label" for="login">{{ translations.login }}</label>
                                <input type="text"
                                       id="login"
                                       class="form-control"
                                       name="login"
                                       value="{{ employee.getLogin() }}"
                                       autocomplete="off">
                                <div class="form-text">
                                    {{ translations.login_hint ?? 'login_hint' }}
                                </div>
                            </div>

                            <div class="col-12 col-xl-6">
                                <label class="form-label" for="password">{{ translations.password }}</label>
                                <input type="password"
                                       id="password"
                                       class="form-control"
                                       name="password"
                                       value=""
                                       autocomplete="new-password">
                                <div class="form-text">
                                    {{ translations.password_hint ?? 'password_hint' }}
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="employee_id" value="{{ employee.getId() }}">

                        <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 }}
                                </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 }}
                                </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');

            // Auto-generowanie tylko jeśli user nie edytował ręcznie
            let displayNameTouched = false;
            let loginTouched = false;

            const firstNameInp = document.getElementById('first_name');
            const surnameInp = document.getElementById('surname');
            const displayNameInp = document.getElementById('display_name');
            const loginInp = document.getElementById('login');

            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 () => {

                // walidacja bootstrap
                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    Swal.fire({
                        icon: 'error',
                        title: '{{ translations.error }}',
                        text: '{{ translations.fill_required_fields }}'
                    });
                    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,
                    login: loginInp.value.trim(),
                };

                // hasło wysyłamy tylko jeśli user coś wpisał
                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?.success || resp?.ok)) {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error }}',
                            text: resp?.message ?? '{{ translations.undefined_error_occurred }}'
                        });
                        return;
                    }

                    Swal.fire({
                        icon: 'success',
                        title: '{{ translations.success }}',
                        text: '{{ translations.operation_successful }}',
                        timer: 1400,
                        showConfirmButton: false
                    });

                    setTimeout(() => {
                        window.location.href = `{{ root }}/employees/${employeeId}`;
                    }, 900);

                } catch (e) {
                    console.error(e);
                    Swal.fire({
                        icon: 'error',
                        title: '{{ translations.error }}',
                        text: '{{ translations.no_api_connection }}'
                    });
                }
            });
        });
    </script>
{% endblock %}