@extends('layouts.employee')

@section('content')
<div class="container">
    <div class="logo_form">
        <img src="{{ asset('img/logo_nsosw_jaszkotle.png') }}" alt="Logo NSOSW Jaszkotle">
    </div>

    <div class="content">
        <h3>Zaloguj się</h3>
        <p>do panelu zgłaszania zdarzeń</p>

        <div class="incident_login_form">
            <form method="POST" action="{{ route('employee.login.perform') }}">
                @csrf

                <div class="mb-4">
                    <label for="personal_id_group" class="block text-gray-700 text-sm font-bold mb-2">
                        ID
                    </label>
                    <div id="personal_id_group" class="flex justify-between" style="gap: 5px;">
                        @for ($i = 0; $i < 5; $i++)
                            <input id="personal_id_{{ $i }}" type="text" class="personal-id-input w-1/5 text-center shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('personal_id') border-red-500 @enderror" name="personal_id_part[]" maxlength="1" @if ($i == 0) autofocus @endif>
                        @endfor
                    </div>
                    @error('personal_id')
                        <p class="text-red-500 text-xs italic mt-2" role="alert">
                            <strong>{{ $message }}</strong>
                        </p>
                    @enderror
                    <input type="hidden" name="personal_id" id="hidden_personal_id">
                </div>

                <div class="mb-6">
                    <label for="pin_group" class="block text-gray-700 text-sm font-bold mb-2">
                        PIN
                    </label>
                    <div id="pin_group" class="flex justify-between" style="gap: 5px;">
                        @for ($i = 0; $i < 4; $i++)
                            <input id="pin_{{ $i }}" type="password" class="pin-input w-1/4 text-center shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('pin') border-red-500 @enderror" name="pin_part[]" maxlength="1">
                        @endfor
                    </div>
                    @error('pin')
                        <p class="text-red-500 text-xs italic mt-2" role="alert">
                            <strong>{{ $message }}</strong>
                        </p>
                    @enderror
                    <input type="hidden" name="pin" id="hidden_pin">
                </div>

                <div>
                    <button type="submit" class="btn btn-primary">Zaloguj się</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    function setupOtpInputs(containerId, hiddenInputId, inputClass, length, nextInputClass = null) {
        const container = document.getElementById(containerId);
        const inputs = Array.from(container.querySelectorAll(`.${inputClass}`));
        const hiddenInput = document.getElementById(hiddenInputId);

        inputs.forEach((input, index) => {
            input.addEventListener('input', function(e) {
                // Nie filtrujemy już na cyfry, aby zezwolić na litery
                // Opcjonalnie: możesz dodać this.value = this.value.toUpperCase(); jeśli chcesz tylko duże litery
                
                if (this.value.length === 1) { // Jeśli wpisano jeden znak
                    if (index < inputs.length - 1) { // Jeśli nie jest to ostatnie pole w grupie
                        inputs[index + 1].focus(); // Przeskocz do następnego pola w tej samej grupie
                    } else if (nextInputClass) { // Jeśli jest to ostatnie pole w grupie i zdefiniowano następną klasę
                        const nextInputs = document.querySelectorAll(`.${nextInputClass}`);
                        if (nextInputs.length > 0) {
                            nextInputs[0].focus(); // Przeskocz do pierwszego pola w następnej grupie
                        }
                    }
                }
                updateHiddenInput(); // Zawsze aktualizuj ukryte pole
            });

            input.addEventListener('keydown', function(e) {
                // Backspace do poprzedniego pola
                if (e.key === 'Backspace' && this.value === '' && index > 0) {
                    e.preventDefault(); // Zapobiegaj domyślnej akcji Backspace
                    inputs[index - 1].focus();
                    inputs[index - 1].value = ''; // Usuń wartość z poprzedniego pola
                    updateHiddenInput();
                }
            });

            // Obsługa wklejania
            input.addEventListener('paste', function(e) {
                e.preventDefault();
                const pasteData = e.clipboardData.getData('text').trim();
                let currentIndex = index;
                for (let i = 0; i < pasteData.length && currentIndex < inputs.length; i++) {
                    // Pozwól na wklejanie dowolnych znaków (nie tylko cyfr)
                    inputs[currentIndex].value = pasteData[i];
                    currentIndex++;
                }
                // Przenieś fokus na następne wolne pole lub ostatnie pole
                if (currentIndex < inputs.length) {
                    inputs[currentIndex].focus();
                } else if (nextInputClass) { // Jeśli wszystkie pola w bieżącej grupie są wypełnione, przejdź do następnej
                    const nextInputs = document.querySelectorAll(`.${nextInputClass}`);
                    if (nextInputs.length > 0) {
                        nextInputs[0].focus();
                    }
                } else {
                    inputs[inputs.length - 1].focus();
                }
                updateHiddenInput();
            });
        });

        // Funkcja do aktualizacji ukrytego pola
        function updateHiddenInput() {
            hiddenInput.value = inputs.map(input => input.value).join('');
        }

        // Ustaw początkową wartość ukrytego pola (jeśli formularz został wcześniej wysłany i było old())
        updateHiddenInput();

        // Jeśli formularz został wysłany z błędami i mamy old() value
        // Uzupełnij pola indywidualne na podstawie old('personal_id') / old('pin')
        const oldVal = hiddenInputId === 'hidden_personal_id' ? "{{ old('personal_id') }}" : "{{ old('pin') }}";
        if (oldVal) {
            for (let i = 0; i < oldVal.length && i < inputs.length; i++) {
                inputs[i].value = oldVal[i];
            }
            // Ustaw fokus na następne wolne pole lub ostatnie pole w tej grupie
            if (oldVal.length < inputs.length) {
                inputs[oldVal.length].focus();
            } else {
                inputs[inputs.length - 1].focus();
            }
        }
    }

    // Ustawienie dla ID: po wypełnieniu ostatniego pola ID, przeskocz do pierwszego pola PIN
    setupOtpInputs('personal_id_group', 'hidden_personal_id', 'personal-id-input', 5, 'pin-input');
    // Ustawienie dla PIN: brak następnego pola, więc nie podajemy nextInputClass
    setupOtpInputs('pin_group', 'hidden_pin', 'pin-input', 4);
});
</script>
@endsection