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

{% block title %}{{ translations.add_employee ?? 'add_employee' }}{% endblock %}

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

                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label" for="first_name">{{ translations.first_name ?? 'first_name' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text"
                                                   id="first_name"
                                                   class="form-control"
                                                   name="name"
                                                   required
                                                   value=""
                                                   autocomplete="off">
                                            <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'fill_required_fields' }}</div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="surname">{{ translations.surname ?? 'surname' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text"
                                                   id="surname"
                                                   class="form-control"
                                                   name="surname"
                                                   required
                                                   value=""
                                                   autocomplete="off">
                                            <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'fill_required_fields' }}</div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="display_name">{{ translations.display_name ?? 'display_name' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text"
                                                   id="display_name"
                                                   class="form-control"
                                                   name="display_name"
                                                   value=""
                                                   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 ?? 'franchise' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            {# shop jest znany w kontekście dodawania pracownika do franczyzy #}
                                            <input type="text" class="form-control" value="{{ shop.getName() }}" readonly>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="phone">{{ translations.phone ?? 'phone' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <input type="text"
                                                   id="phone"
                                                   class="form-control"
                                                   name="phone"
                                                   value=""
                                                   autocomplete="off">
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label" for="lang_code">{{ translations.lang ?? 'lang' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <select class="form-select" name="lang_code" id="lang_code" required>
                                                {# default np. NL/FR zależnie od sklepu — tutaj ustawiam FR jako przykład #}
                                                <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 ?? 'fill_required_fields' }}</div>
                                        </div>

                                        {# Jeśli chcesz dopiąć obszar produkcji już przy tworzeniu, odkomentuj #}
                                        {#
                                        <div class="col-md-4">
                                            <label class="form-label" for="id_production_area">{{ translations.production_area ?? 'production_area' }}</label>
                                        </div>
                                        <div class="col-md-8">
                                            <select class="form-select" name="id_production_area" id="id_production_area">
                                                <option value="">{{ translations.select ?? 'select' }}</option>
                                                {% for pa in production_areas %}
                                                    <option value="{{ pa.getId() }}">{{ pa.getName() }}</option>
                                                {% endfor %}
                                            </select>
                                        </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 ?? 'login' }}</label>
                                <input type="text"
                                       id="login"
                                       class="form-control"
                                       name="login"
                                       value=""
                                       autocomplete="off"
                                       required>
                                <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'fill_required_fields' }}</div>
                                <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 ?? 'password' }}</label>
                                <input type="password"
                                       id="password"
                                       class="form-control"
                                       name="password"
                                       value=""
                                       autocomplete="new-password"
                                       required>
                                <div class="invalid-feedback">{{ translations.fill_required_fields ?? 'fill_required_fields' }}</div>
                                <div class="form-text">
                                    {{ translations.password_hint_create ?? translations.password_hint ?? 'password_hint' }}
                                </div>
                            </div>
                        </div>

                        {# Jeśli backend wymaga shop_id w payloadzie #}
                        <input type="hidden" id="shop_id" value="{{ shop.getId() }}">

                        <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 ?? 'create' }}
                                </button>
                            </div>
                            <div class="col-6">
                                <a href="{{ root }}/Franchise/employee/list/{{ shop.getId() }}"
                                   class="btn btn-outline-secondary float-end">
                                    <i class="bi bi-arrow-left"></i> {{ translations.back ?? 'back' }}
                                </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');

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

            function setBusy(isBusy) {
                createBtn.disabled = isBusy;
                createBtn.innerHTML = isBusy
                    ? `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ translations.saving ?? 'saving' }}`
                    : `<i class="bi bi-check2"></i> {{ translations.create ?? 'create' }}`;
            }

            createBtn.addEventListener('click', async () => {

                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    Swal.fire({
                        icon: 'error',
                        title: '{{ translations.error ?? 'error' }}',
                        text: '{{ translations.fill_required_fields ?? 'fill_required_fields' }}'
                    });
                    return;
                }

                const payload = {
                    // jeśli tworzysz pracownika w kontekście sklepu:
                    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,
                    login: loginInp.value.trim(),
                    password: document.getElementById('password').value
                };

                // Jeżeli używasz production area przy tworzeniu:
                // const pa = document.getElementById('id_production_area')?.value;
                // if (pa) payload.id_production_area = parseInt(pa, 10);

                try {
                    setBusy(true);

                    // endpoint do tworzenia — dopasuj do tego jak masz w API
                    const resp = await api(`/ajax/employees`, {
                        method: "POST",
                        data: payload
                    });

                    if (!(resp?.success || resp?.ok)) {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error ?? 'error' }}',
                            text: resp?.message ?? '{{ translations.undefined_error_occurred ?? 'undefined_error_occurred' }}'
                        });
                        return;
                    }

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

                    // Zakładam że API zwraca ID nowego pracownika np. resp.id / resp.data.id
                    const newId = resp?.id ?? resp?.data?.id;

                    setTimeout(() => {
                        if (newId) {
                            window.location.href = `{{ root }}/employees/${newId}`;
                        } else {
                            // fallback: wróć do listy pracowników sklepu
                            window.location.href = `{{ root }}/Franchise/employee/list/{{ shop.getId() }}`;
                        }
                    }, 900);

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