@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/pref-forms.css') }}">
@endpush

@section('content')
<div class="pref-page-container">
    <div class="pref-breadcrumb">
        <a href="{{ url('admin') }}"><i class="fa-solid fa-house"></i> Home</a>
        <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
        <a href="{{ route('shortkut.index') }}">Shortcuts</a>
        <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
        <span class="current">Add Shortcut</span>
    </div>

    <div class="pref-page-header">
        <div class="pref-header-left">
            <h2><i class="fa-solid fa-keyboard"></i> Add Keyboard Shortcut</h2>
            <p>Configure quick keyboard shortcuts for rapid POS and screen navigation</p>
        </div>
        <div class="pref-header-actions">
            <a href="{{ route('shortkut.index') }}" class="pref-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Shortcuts List
            </a>
        </div>
    </div>

    <div class="pref-card">
        <div class="pref-card-header">
            <div class="pref-card-title">
                <i class="fa-solid fa-pen-to-square"></i> Shortcut Key Assignment
            </div>
        </div>
        <div class="pref-card-body">
            @if (isset($errors) && count($errors) > 0)
                <div class="pref-alert-error">
                    <strong><i class="fa-solid fa-triangle-exclamation"></i> Please fix the following errors:</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form id="shortcutForm" action="{{ route('shortkut.store') }}" method="POST">
                @csrf

                <div class="row">
                    <div class="col-md-4">
                        <div class="pref-form-group">
                            <label class="pref-label" for="nameInput">
                                Action / Function Name <span class="required">*</span>
                            </label>
                            <input type="text" id="nameInput" name="shortcut_name" class="pref-input"
                                value="{{ old('shortcut_name') }}" placeholder="e.g. Save, Print, New Sale" required>
                            <small class="pref-hint">What action does this shortcut trigger</small>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="pref-form-group">
                            <label class="pref-label" for="shortcutInputCtrl">
                                Modifier Key (Ctrl / Alt / Shift)
                            </label>
                            <input type="text" id="shortcutInputCtrl" name="shortcut_key_1" class="pref-input"
                                value="{{ old('shortcut_key_1') }}" placeholder="Press Ctrl, Alt or Shift...">
                            <small class="pref-hint">Focus and press modifier keys on your keyboard</small>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="pref-form-group">
                            <label class="pref-label" for="shortcutInputAlpha">
                                Trigger Key (Alphabet / Number)
                            </label>
                            <input type="text" id="shortcutInputAlpha" name="shortcut_key_2" class="pref-input"
                                value="{{ old('shortcut_key_2') }}" placeholder="Press any key (e.g. S, P, A)...">
                            <small class="pref-hint">Focus and press the desired character key</small>
                        </div>
                    </div>
                </div>

                <div class="pref-form-actions">
                    <span class="text-muted mr-auto" style="font-size: 12px;">
                        Interactive key capture enabled. Press modifier keys or trigger letters directly.
                    </span>
                    <a href="{{ route('shortkut.index') }}" class="pref-btn-cancel">
                        <i class="fa-solid fa-xmark"></i> Cancel
                    </a>
                    <button type="submit" class="pref-btn-submit">
                        <i class="fa-solid fa-floppy-disk"></i> Save Shortcut
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let ctrlPressed = false;
        let altPressed = false;
        let shiftPressed = false;

        document.addEventListener('keydown', function (event) {
            const activeElement = document.activeElement;

            if (activeElement && activeElement.tagName === 'INPUT' && activeElement.id !== 'shortcutInputCtrl' && activeElement.id !== 'shortcutInputAlpha') {
                return;
            }

            if (event.key === 'Control' && !ctrlPressed) {
                ctrlPressed = true;
                updateShortcutField();
            }

            if (event.key === 'Alt' && !altPressed) {
                altPressed = true;
                updateShortcutField();
            }

            if (event.key === 'Shift' && !shiftPressed) {
                shiftPressed = true;
                updateShortcutField();
            }

            if (/^[a-zA-Z0-9]$/.test(event.key) && !ctrlPressed && !altPressed && !shiftPressed) {
                event.preventDefault();
                const inputField = document.getElementById('shortcutInputAlpha');
                if (inputField) {
                    inputField.value = event.key.toUpperCase();
                    inputField.focus();
                }
            }
        });

        document.addEventListener('keyup', function (event) {
            if (event.key === 'Control') {
                ctrlPressed = false;
            }
            if (event.key === 'Alt') {
                altPressed = false;
            }
            if (event.key === 'Shift') {
                shiftPressed = false;
            }
        });

        function updateShortcutField() {
            const inputField = document.getElementById('shortcutInputCtrl');
            if (inputField) {
                const keys = [];
                if (ctrlPressed) keys.push('Ctrl');
                if (altPressed) keys.push('Alt');
                if (shiftPressed) keys.push('Shift');
                inputField.value = keys.join(' + ');
                inputField.focus();
            }
        }
    });
</script>
@endpush