{{-- New-Unity ERP | resources/views/partials/operation_pin_modal.blade.php | v1.1 | 17/07/2026 --}}
{{-- v1.0 — Modal de NIP con teclado numerico en pantalla.                                      --}}
{{-- v1.1 — Sin teclado en pantalla. Solo cuadros individuales con teclado fisico del PC.       --}}

<div class="modal fade" id="operationPinModal" tabindex="-1" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title">
                    <i class="fal fa-lock me-2"></i>
                    <span id="pinModalTitle">Confirmar Operacion</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        onclick="onPinCancel()"></button>
            </div>
            <div class="modal-body text-center py-4">
                <div id="pinModalDescription" class="alert alert-info py-2 small mb-4"></div>

                <div class="mb-3 small text-muted">INGRESA TU NIP DE OPERACIONES</div>

                {{-- 6 cuadros individuales --}}
                <div class="d-flex justify-content-center gap-2 mb-4" id="pinBoxes">
                    @for($i = 0; $i < 6; $i++)
                    <input type="password"
                           class="pin-box form-control text-center fw-bold"
                           maxlength="1"
                           inputmode="numeric"
                           pattern="[0-9]"
                           id="pinBox{{ $i }}"
                           autocomplete="off"
                           style="width:46px;height:52px;font-size:22px;border-radius:8px;border:2px solid #dee2e6;transition:border-color .2s;"
                           oninput="onPinBoxInput(this, {{ $i }})"
                           onkeydown="onPinBoxKeydown(event, {{ $i }})"
                           onfocus="this.style.borderColor='#185FA5';"
                           onblur="this.style.borderColor='#dee2e6';">
                    @endfor
                </div>

                <div id="pinError" class="alert alert-danger py-2 small mt-2" style="display:none;">
                    <i class="fal fa-times-circle me-1"></i>
                    <span id="pinErrorMsg">NIP incorrecto. Intenta de nuevo.</span>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        onclick="onPinCancel()">
                    <i class="fal fa-times me-1"></i> Cancelar
                </button>
                <button type="button" class="btn btn-primary fw-bold" onclick="submitPin()"
                        id="pinSubmitBtn" disabled>
                    <i class="fal fa-check me-1"></i> Confirmar
                </button>
            </div>
        </div>
    </div>
</div>

<script>
var PIN = {
    value:    '',
    callback: null,
    cancelCb: null,
};

function requirePin(title, description, onSuccess, onCancel, minLevel) {
    PIN.value    = '';
    PIN.callback = onSuccess;
    PIN.cancelCb = onCancel || null;
    PIN.minLevel = minLevel || 1;

    document.getElementById('pinModalTitle').textContent       = title || 'Confirmar Operacion';
    document.getElementById('pinModalDescription').textContent = description || '';
    document.getElementById('pinError').style.display          = 'none';
    document.getElementById('pinSubmitBtn').disabled           = true;

    // Limpiar cuadros
    for (var i = 0; i < 6; i++) {
        var box = document.getElementById('pinBox' + i);
        if (box) { box.value = ''; box.style.borderColor = '#dee2e6'; }
    }

    new bootstrap.Modal(document.getElementById('operationPinModal')).show();

    // Focus en primer cuadro
    document.getElementById('operationPinModal').addEventListener('shown.bs.modal', function handler() {
        var first = document.getElementById('pinBox0');
        if (first) { first.focus(); first.style.borderColor = '#185FA5'; }
        this.removeEventListener('shown.bs.modal', handler);
    });
}

function onPinBoxInput(input, idx) {
    // Solo numeros
    input.value = input.value.replace(/\D/g, '').slice(0, 1);

    // Actualizar valor completo
    PIN.value = '';
    for (var i = 0; i < 6; i++) {
        var box = document.getElementById('pinBox' + i);
        if (box) PIN.value += box.value;
    }

    // Mover al siguiente cuadro
    if (input.value && idx < 5) {
        var next = document.getElementById('pinBox' + (idx + 1));
        if (next) next.focus();
    }

    // Habilitar confirmar si hay al menos 4 digitos
    document.getElementById('pinSubmitBtn').disabled = PIN.value.length < 4;
    document.getElementById('pinError').style.display = 'none';

    // Auto-submit si 6 digitos
    if (PIN.value.length === 6) {
        setTimeout(submitPin, 200);
    }
}

function onPinBoxKeydown(event, idx) {
    // Backspace — borrar y volver al anterior
    if (event.key === 'Backspace') {
        var box = document.getElementById('pinBox' + idx);
        if (box && !box.value && idx > 0) {
            var prev = document.getElementById('pinBox' + (idx - 1));
            if (prev) { prev.value = ''; prev.focus(); }
        }
        // Actualizar valor
        setTimeout(function() {
            PIN.value = '';
            for (var i = 0; i < 6; i++) {
                var b = document.getElementById('pinBox' + i);
                if (b) PIN.value += b.value;
            }
            document.getElementById('pinSubmitBtn').disabled = PIN.value.length < 4;
        }, 10);
    }
    // Enter — confirmar
    if (event.key === 'Enter' && PIN.value.length >= 4) {
        event.preventDefault();
        submitPin();
    }
}

function submitPin() {
    if (PIN.value.length < 4) return;

    var btn = document.getElementById('pinSubmitBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Verificando...';

    var endpoint = PIN.minLevel > 1 ? '/validate-operation-pin-level' : '/validate-operation-pin';
    var body = PIN.minLevel > 1
        ? JSON.stringify({ pin: PIN.value, min_level: PIN.minLevel })
        : JSON.stringify({ pin: PIN.value });
    fetch(endpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : ''
        },
        body: body
    })
    .then(function(r) { return r.json(); })
    .then(function(res) {
        btn.disabled = false;
        btn.innerHTML = '<i class="fal fa-check me-1"></i> Confirmar';

        if (res.success) {
            bootstrap.Modal.getInstance(document.getElementById('operationPinModal')).hide();
            // Limpiar cuadros
            for (var i = 0; i < 6; i++) {
                var box = document.getElementById('pinBox' + i);
                if (box) box.value = '';
            }
            PIN.value = '';
            if (PIN.callback) PIN.callback(res.user);
        } else {
            // Mostrar error y limpiar cuadros
            document.getElementById('pinErrorMsg').textContent = res.message || 'NIP incorrecto.';
            document.getElementById('pinError').style.display  = 'block';
            for (var i = 0; i < 6; i++) {
                var box = document.getElementById('pinBox' + i);
                if (box) { box.value = ''; box.style.borderColor = '#dc3545'; }
            }
            PIN.value = '';
            document.getElementById('pinSubmitBtn').disabled = true;
            // Focus en primer cuadro
            setTimeout(function() {
                var first = document.getElementById('pinBox0');
                if (first) { first.style.borderColor = '#185FA5'; first.focus(); }
            }, 100);
        }
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="fal fa-check me-1"></i> Confirmar';
        document.getElementById('pinErrorMsg').textContent = 'Error de conexion. Intenta de nuevo.';
        document.getElementById('pinError').style.display  = 'block';
    });
}

function onPinCancel() {
    PIN.value = '';
    for (var i = 0; i < 6; i++) {
        var box = document.getElementById('pinBox' + i);
        if (box) box.value = '';
    }
    if (PIN.cancelCb) PIN.cancelCb();
}
</script>