{% extends "layouts/base.twig" %}
{% block title %}{{ translations.add_employee ?? 'Dodaj pracownika' }}{% endblock %}
{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.add_employee ?? 'Dodaj pracownika' }}</h3>
        <p class="text-subtitle text-muted">{{ translations.add_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.add_employee ?? 'Dodaj pracownika' }}</h4>
                </div>
                <div class="card-body px-3 py-4-5">
                    <form id="employee_insert_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 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 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" 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" 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" selected>FR</option>
                                                <option value="en">ENG</option>
                                                <option value="nl">NL</option>
                                                <option value="pl">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" selected>{{ translations.employment_type_employment_contract ?? 'Umowa o pracę' }}</option>
                                                <option value="civil_law_contract">{{ translations.employment_type_civil_law_contract ?? 'Umowa cywilnoprawna' }}</option>
                                                <option value="b2b">{{ translations.employment_type_b2b ?? 'B2B / Samozatrudnienie' }}</option>
                                                <option value="temporary_work">{{ translations.employment_type_temporary_work ?? 'Praca tymczasowa' }}</option>
                                                <option value="internship">{{ translations.employment_type_internship ?? 'Staż / Praktyka' }}</option>
                                                <option value="volunteer">{{ translations.employment_type_volunteer ?? 'Wolontariat' }}</option>
                                                <option value="other">{{ 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" autocomplete="off" required>
                                <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'Wypelnij wymagane pola' }}</div>
                                <div class="form-text">{{ translations.login_hint ?? 'Unikalny login uzytkownika' }}</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" autocomplete="new-password" required>
                                <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'Wypelnij wymagane pola' }}</div>
                                <div class="form-text">{{ translations.password_hint ?? 'Min. 8 znakow' }}</div>
                            </div>
                        </div>
                        <input type="hidden" id="shop_id" value="{{ shop.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() }}">
                                            {{ ws.getName() }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-6">
                                <button type="button" class="btn btn-success" id="create_btn">
                                    <i class="bi bi-check2"></i> {{ translations.create ?? 'Utw?rz' }}
                                </button>
                            </div>
                            <div class="col-6">
                                <a href="{{ root }}/employees" 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_insert_form');
    const createBtn      = document.getElementById('create_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 = false;
    let loginTouched       = false;
    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);
    function setBusy(isBusy) {
        createBtn.disabled = isBusy;
        createBtn.innerHTML = isBusy
            ? '<span class="spinner-border spinner-border-sm me-2"></span>{{ translations.saving ?? "Zapisywanie..." }}'
            : '<i class="bi bi-check2"></i> {{ translations.create ?? "Utworz" }}';
    }
    createBtn.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 payload = {
            id_shop:      parseInt(document.getElementById('shop_id').value, 10),
            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(),
            password:     document.getElementById('password').value,
            workstations: Array.from(workstationsSelect.selectedOptions).map(opt => opt.value)
        };
        try {
            setBusy(true);
            const resp = await api('/ajax/employees', { method: 'POST', 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 });
            const newId = resp && (resp.inserted_id || resp.id || (resp.data && resp.data.id));
            setTimeout(() => {
                if (newId) {
                    window.location.href = '{{ root }}/employees/' + newId;
                } else {
                    window.location.href = '{{ root }}/employees';
                }
            }, 900);
        } catch (e) {
            console.error(e);
            Swal.fire({ icon:'error', title:'{{ translations.error ?? "Blad" }}',
                text:'{{ translations.no_api_connection ?? "Brak polaczenia z API" }}' });
        } finally {
            setBusy(false);
        }
    });
});
</script>
{% endblock %}