{{--
 * Blade Template
 *
 * Usage:       <x-globals::keyboard />
 *
 * @version     1.0.$Revision:$
 * @version     SVN: $Id:$
 * @package     bplan-base/globals
 * @subpackage  Blades
 * @author      Wassilios Meletiadis <wassilios.meletiadis@bplan-solutions.de>
 * @copyright   Copyright (C) 2025, 2026 bplan-solutions GmbH & Co. KG <https://www.bplan-solutions.de/>
 * /Δ\
--}}

@php
    $qwertzRows = [
        ['q', 'w', 'e', 'r', 't', 'z', 'u', 'i', 'o', 'p'],
        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
        ['y', 'x', 'c', 'v', 'b', 'n', 'm'],
    ];
    $digitRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
@endphp

<div
    x-data="{
        open: false,
        fieldLabel: '',
        inputValue: '',
        targetEl: null,
        shift: false,
        chars: [],

        trigger(el, label, chars) {
            this.targetEl = el;
            this.fieldLabel = label;
            this.chars = chars ?? ['alpha', 'numeric'];
            this.inputValue = el.value ?? '';
            this.shift = false;
            this.open = true;
        },

        isAllowed(char) {
            for (const c of this.chars) {
                if (c === 'alpha' && /^[a-z]$/i.test(char)) return true;
                if (c === 'numeric' && /^[0-9]$/.test(char)) return true;
                if (c === 'umlauts' && /^[äöüÄÖÜß]$/.test(char)) return true;
                if (c.toLowerCase() === char.toLowerCase()) return true;
            }
            return false;
        },

        hasAnyLetter() {
            return this.chars.some(c =>
                c === 'alpha' || c === 'umlauts'
                || /^[a-z]$/i.test(c) || /^[äöüÄÖÜß]$/.test(c)
            );
        },

        hasAnyDigit() {
            return this.chars.some(c => c === 'numeric' || /^[0-9]$/.test(c));
        },

        isNumericOnly() {
            return this.chars.length > 0
                && this.chars.every(c => c === 'numeric' || /^[0-9]$/.test(c));
        },

        get specialChars() {
            const groups = ['alpha', 'numeric', 'umlauts'];
            return this.chars.filter(c =>
                !groups.includes(c) && c !== ' '
                && !/^[a-zA-ZäöüÄÖÜß0-9]$/.test(c)
            );
        },

        get hasSpace() {
            return this.chars.includes(' ');
        },

        press(char) {
            this.inputValue += this.shift ? char.toUpperCase() : char;
            this.shift = false;
        },

        backspace() {
            this.inputValue = this.inputValue.slice(0, -1);
        },

        confirm() {
            if (this.targetEl) {
                this.targetEl.value = this.inputValue;
                this.targetEl.dispatchEvent(new Event('input', { bubbles: true }));
                this.targetEl.dispatchEvent(new Event('change', { bubbles: true }));
            }
            this.open = false;
        },

        dismiss() {
            this.open = false;
        }
    }"
    @keyboard:open.window="trigger($event.detail.el, $event.detail.label, $event.detail.chars)"
    x-show="open"
    x-cloak
    class="fixed bottom-0 left-0 right-0 z-50 flex flex-col items-center pb-4 pointer-events-none"
>
    {{-- Display strip --}}
    <div class="pointer-events-auto mb-2 flex items-center gap-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg px-3 py-2 w-80">
        <span class="text-gray-500 dark:text-gray-400 text-sm font-medium shrink-0" x-text="fieldLabel + ':'"></span>
        <div class="flex-1 font-mono text-gray-900 dark:text-white text-base flex items-center min-h-[1.5rem] overflow-hidden">
            <span x-text="inputValue" class="truncate"></span><span class="animate-pulse ml-0.5 text-primary-500">|</span>
        </div>
        <button @click="dismiss()" type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg leading-none ml-1">✕</button>
    </div>

    {{-- Keyboard panel --}}
    <div class="pointer-events-auto bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-xl shadow-2xl px-3 py-3 inline-flex flex-col gap-1.5">

        {{-- QWERTZ layout --}}
        <template x-if="!isNumericOnly()">
            <div class="flex flex-col gap-1.5">

                {{-- Digit row --}}
                <div x-show="hasAnyDigit()" class="flex justify-center gap-1">
                    @foreach ($digitRow as $key)
                        <button
                            x-show="isAllowed('{{ $key }}')"
                            @click="press('{{ $key }}')"
                            type="button"
                            class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                        >{{ $key }}</button>
                    @endforeach
                </div>

                {{-- Row: q w e r t z u i o p ü --}}
                <div x-show="hasAnyLetter()" class="flex justify-center gap-1">
                    @foreach ($qwertzRows[0] as $key)
                        <button
                            x-show="isAllowed('{{ $key }}')"
                            @click="press('{{ $key }}')"
                            type="button"
                            class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                            x-text="shift ? '{{ strtoupper($key) }}' : '{{ $key }}'"
                        ></button>
                    @endforeach
                    <button
                        x-show="isAllowed('ü')"
                        @click="press(shift ? 'Ü' : 'ü'); shift = false"
                        type="button"
                        class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                        x-text="shift ? 'Ü' : 'ü'"
                    ></button>
                    <button
                        x-show="isAllowed('ß')"
                        @click="inputValue += 'ß'; shift = false"
                        type="button"
                        class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                    >ß</button>
                </div>

                {{-- Row: a s d f g h j k l ö ä --}}
                <div x-show="hasAnyLetter()" class="flex justify-center gap-1">
                    @foreach ($qwertzRows[1] as $key)
                        <button
                            x-show="isAllowed('{{ $key }}')"
                            @click="press('{{ $key }}')"
                            type="button"
                            class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                            x-text="shift ? '{{ strtoupper($key) }}' : '{{ $key }}'"
                        ></button>
                    @endforeach
                    <button
                        x-show="isAllowed('ö')"
                        @click="press(shift ? 'Ö' : 'ö'); shift = false"
                        type="button"
                        class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                        x-text="shift ? 'Ö' : 'ö'"
                    ></button>
                    <button
                        x-show="isAllowed('ä')"
                        @click="press(shift ? 'Ä' : 'ä'); shift = false"
                        type="button"
                        class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                        x-text="shift ? 'Ä' : 'ä'"
                    ></button>
                </div>

                {{-- Row: ⇧ y x c v b n m ⌫ --}}
                <div x-show="hasAnyLetter()" class="flex justify-center gap-1">
                    <button
                        @click="shift = !shift"
                        type="button"
                        :class="shift
                            ? 'bg-primary-600 hover:bg-primary-500 border-primary-700 text-white'
                            : 'bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-200'"
                        class="w-10 h-11 rounded-md border shadow-sm font-medium text-base active:opacity-70"
                    >⇧</button>
                    @foreach ($qwertzRows[2] as $key)
                        <button
                            x-show="isAllowed('{{ $key }}')"
                            @click="press('{{ $key }}')"
                            type="button"
                            class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                            x-text="shift ? '{{ strtoupper($key) }}' : '{{ $key }}'"
                        ></button>
                    @endforeach
                    <button
                        @click="backspace()"
                        type="button"
                        class="w-10 h-11 rounded-md bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 active:bg-gray-400 dark:active:bg-gray-400 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-700 dark:text-gray-200 font-medium text-base"
                    >⌫</button>
                </div>

                {{-- Bottom row: special chars + space + confirm --}}
                <div class="flex justify-center items-center gap-1">
                    <template x-for="char in specialChars" :key="char">
                        <button
                            @click="press(char)"
                            type="button"
                            class="w-10 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                            x-text="char"
                        ></button>
                    </template>
                    <button
                        x-show="hasSpace"
                        @click="press(' ')"
                        type="button"
                        class="w-20 h-11 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 font-medium text-sm"
                    >␣</button>
                    <button
                        @click="confirm()"
                        type="button"
                        class="w-10 h-11 rounded-md bg-primary-600 hover:bg-primary-500 active:bg-primary-700 border border-primary-700 shadow-sm text-white font-bold text-base"
                    >✓</button>
                </div>

            </div>
        </template>

        {{-- Numpad layout --}}
        <template x-if="isNumericOnly()">
            <div class="grid grid-cols-3 gap-1.5 w-44">
                @foreach (['7', '8', '9', '4', '5', '6', '1', '2', '3'] as $key)
                    <button
                        x-show="isAllowed('{{ $key }}')"
                        @click="press('{{ $key }}')"
                        type="button"
                        class="h-14 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 text-xl font-medium"
                    >{{ $key }}</button>
                @endforeach
                <button
                    @click="backspace()"
                    type="button"
                    class="h-14 rounded-md bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 active:bg-gray-400 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-700 dark:text-gray-200 text-xl font-medium"
                >⌫</button>
                <button
                    x-show="isAllowed('0')"
                    @click="press('0')"
                    type="button"
                    class="h-14 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 border border-gray-400 dark:border-gray-500 shadow-sm text-gray-800 dark:text-gray-100 text-xl font-medium"
                >0</button>
                <button
                    @click="confirm()"
                    type="button"
                    class="h-14 rounded-md bg-primary-600 hover:bg-primary-500 active:bg-primary-700 border border-primary-700 shadow-sm text-white text-xl font-bold"
                >✓</button>
            </div>
        </template>

    </div>
</div>
