{{-- New-Unity ERP | resources/views/pin/change.blade.php | v1.1 | 17/07/2026 --}}
{{-- v1.0 — Vista para configurar o cambiar el NIP de operaciones.              --}}
{{-- v1.1 — Agrega flujo "Olvide mi NIP" con codigo por email.                  --}}

@extends('layouts.vertical', ['pageTitle' => 'NIP de Operaciones'])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-lock"></i> NIP de Operaciones
        <small>{{ auth()->user()->operation_pin ? 'Cambiar NIP' : 'Configurar NIP por primera vez' }}</small>
    </h1>
</div>
@endsection

@section('content')

@if(session('pin_success'))
<div class="alert alert-success alert-dismissible fade show">
    <i class="fal fa-check-circle me-2"></i>{{ session('pin_success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@if(session('pin_error'))
<div class="alert alert-danger alert-dismissible fade show">
    <i class="fal fa-times-circle me-2"></i>{{ session('pin_error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row justify-content-center">
    <div class="col-md-5">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-lock me-2"></i>
                    {{ auth()->user()->operation_pin ? 'Cambiar NIP de Operaciones' : 'Configurar NIP de Operaciones' }}
                </h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">

                    @if(!auth()->user()->operation_pin)
                    <div class="alert alert-info py-2 small mb-4">
                        <i class="fal fa-info-circle me-1"></i>
                        Es tu primera vez configurando el NIP. Este código te identificará
                        en operaciones críticas del sistema. Elige un NIP de 4 a 6 dígitos
                        que solo tú conozcas.
                    </div>
                    @endif

                    <form action="{{ route('pin.set') }}" method="POST" id="pinForm">
                        @csrf

                        @if(auth()->user()->operation_pin)
                        {{-- Modo: NIP actual O código de verificación --}}
                        <div id="modeSelector" class="mb-3">
                            <div class="d-flex gap-2 mb-3">
                                <button type="button" class="btn btn-sm btn-outline-primary active" id="btnModePin"
                                        onclick="setMode('pin')">
                                    <i class="fal fa-lock me-1"></i> Tengo mi NIP
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-warning" id="btnModeCode"
                                        onclick="setMode('code')">
                                    <i class="fal fa-envelope me-1"></i> Olvidé mi NIP
                                </button>
                            </div>
                        </div>

                        {{-- Modo NIP actual --}}
                        <div id="modePinSection">
                            <div class="mb-4">
                                <label class="form-label fw-bold small">NIP Actual <span class="text-danger">*</span></label>
                                <div class="d-flex gap-2">
                                    @for($i = 0; $i < 6; $i++)
                                    <input type="password"
                                           class="current-pin-box form-control text-center fw-bold"
                                           maxlength="1" inputmode="numeric" pattern="[0-9]"
                                           id="currentBox{{ $i }}" autocomplete="off"
                                           style="width:46px;height:52px;font-size:22px;border-radius:8px;border:2px solid #dee2e6;"
                                           oninput="onBoxInput(this, {{ $i }}, 'current')"
                                           onkeydown="onBoxKeydown(event, {{ $i }}, 'current')"
                                           onfocus="this.style.borderColor='#185FA5';"
                                           onblur="this.style.borderColor='#dee2e6';">
                                    @endfor
                                </div>
                                <input type="hidden" name="current_pin" id="currentPinValue">
                            </div>
                        </div>

                        {{-- Modo código por email --}}
                        <div id="modeCodeSection" style="display:none;">
                            <div class="mb-4">
                                <label class="form-label fw-bold small">Código de verificación</label>
                                <div class="d-flex gap-2 align-items-center mb-2">
                                    <button type="button" class="btn btn-warning btn-sm fw-bold"
                                            onclick="sendResetCode()" id="btnSendCode">
                                        <i class="fal fa-paper-plane me-1"></i> Enviar código a mi email
                                    </button>
                                    <span id="sendCodeStatus" class="small text-muted"></span>
                                </div>
                                <div class="d-flex gap-2">
                                    @for($i = 0; $i < 5; $i++)
                                    <input type="text"
                                           class="code-box form-control text-center fw-bold"
                                           maxlength="1" inputmode="numeric" pattern="[0-9]"
                                           id="codeBox{{ $i }}" autocomplete="off"
                                           style="width:52px;height:56px;font-size:24px;border-radius:8px;border:2px solid #ffc107;"
                                           oninput="onBoxInput(this, {{ $i }}, 'code')"
                                           onkeydown="onBoxKeydown(event, {{ $i }}, 'code')"
                                           onfocus="this.style.borderColor='#fd7e14';"
                                           onblur="this.style.borderColor='#ffc107';">
                                    @endfor
                                </div>
                                <input type="hidden" name="token" id="codeValue">
                                <div class="form-text text-muted small mt-1">
                                    <i class="fal fa-clock me-1"></i>
                                    El código expira en 10 minutos y llega a tu correo registrado.
                                </div>
                            </div>
                        </div>
                        @endif

                        {{-- NIP nuevo --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold small">NIP Nuevo <span class="text-danger">*</span></label>
                            <div class="d-flex gap-2">
                                @for($i = 0; $i < 6; $i++)
                                <input type="password"
                                       class="new-pin-box form-control text-center fw-bold"
                                       maxlength="1" inputmode="numeric" pattern="[0-9]"
                                       id="newBox{{ $i }}" autocomplete="off"
                                       style="width:46px;height:52px;font-size:22px;border-radius:8px;border:2px solid #dee2e6;"
                                       oninput="onBoxInput(this, {{ $i }}, 'new')"
                                       onkeydown="onBoxKeydown(event, {{ $i }}, 'new')"
                                       onfocus="this.style.borderColor='#28a745';"
                                       onblur="this.style.borderColor='#dee2e6';">
                                @endfor
                            </div>
                            <input type="hidden" name="new_pin" id="newPinValue">
                            <div class="form-text text-muted small mt-1">Entre 4 y 6 dígitos</div>
                        </div>

                        {{-- Confirmar NIP --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold small">Confirmar NIP Nuevo <span class="text-danger">*</span></label>
                            <div class="d-flex gap-2">
                                @for($i = 0; $i < 6; $i++)
                                <input type="password"
                                       class="confirm-pin-box form-control text-center fw-bold"
                                       maxlength="1" inputmode="numeric" pattern="[0-9]"
                                       id="confirmBox{{ $i }}" autocomplete="off"
                                       style="width:46px;height:52px;font-size:22px;border-radius:8px;border:2px solid #dee2e6;"
                                       oninput="onBoxInput(this, {{ $i }}, 'confirm')"
                                       onkeydown="onBoxKeydown(event, {{ $i }}, 'confirm')"
                                       onfocus="this.style.borderColor='#28a745';"
                                       onblur="this.style.borderColor='#dee2e6';">
                                @endfor
                            </div>
                            <input type="hidden" name="new_pin_confirmation" id="confirmPinValue">
                            <div id="pinMatchMsg" class="form-text mt-1"></div>
                        </div>

                        <div class="alert alert-warning py-2 small mb-4">
                            <i class="fal fa-exclamation-triangle me-1"></i>
                            Tu NIP es personal y confidencial. Nadie del sistema te lo pedirá
                            por teléfono o chat. No lo compartas con nadie.
                        </div>

                        <div class="d-flex gap-2">
                            <a href="{{ url()->previous() }}" class="btn btn-secondary">
                                <i class="fal fa-arrow-left me-1"></i> Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary fw-bold flex-grow-1"
                                    id="btnGuardar" disabled>
                                <i class="fal fa-save me-1"></i>
                                {{ auth()->user()->operation_pin ? 'Cambiar NIP' : 'Configurar NIP' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
var pins    = { current: '', new: '', confirm: '', code: '' };
var currentMode = 'pin'; // 'pin' o 'code'
var hasPin  = {{ auth()->user()->operation_pin ? 'true' : 'false' }};

function setMode(mode) {
    currentMode = mode;
    var pinSection  = document.getElementById('modePinSection');
    var codeSection = document.getElementById('modeCodeSection');
    var btnPin      = document.getElementById('btnModePin');
    var btnCode     = document.getElementById('btnModeCode');

    if (mode === 'pin') {
        pinSection.style.display  = 'block';
        codeSection.style.display = 'none';
        btnPin.classList.add('active');
        btnCode.classList.remove('active');
        // Limpiar código
        pins.code = '';
        document.getElementById('codeValue').value = '';
    } else {
        pinSection.style.display  = 'none';
        codeSection.style.display = 'block';
        btnPin.classList.remove('active');
        btnCode.classList.add('active');
        // Limpiar NIP actual
        pins.current = '';
        document.getElementById('currentPinValue').value = '';
    }
    validateForm();
}

function sendResetCode() {
    var btn    = document.getElementById('btnSendCode');
    var status = document.getElementById('sendCodeStatus');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Enviando...';

    fetch('{{ route("pin.send-reset-code") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({})
    })
    .then(function(r) { return r.json(); })
    .then(function(res) {
        if (res.success) {
            status.textContent = '✅ ' + res.message;
            status.className   = 'small text-success';
            btn.innerHTML      = '<i class="fal fa-check me-1"></i> Código enviado';
            // Permitir reenvío en 60 segundos
            var countdown = 60;
            var timer = setInterval(function() {
                countdown--;
                btn.innerHTML = '<i class="fal fa-clock me-1"></i> Reenviar (' + countdown + 's)';
                if (countdown <= 0) {
                    clearInterval(timer);
                    btn.disabled  = false;
                    btn.innerHTML = '<i class="fal fa-paper-plane me-1"></i> Reenviar código';
                }
            }, 1000);
            // Focus en primer cuadro del código
            setTimeout(function() {
                var first = document.getElementById('codeBox0');
                if (first) first.focus();
            }, 300);
        } else {
            status.textContent = '❌ ' + res.message;
            status.className   = 'small text-danger';
            btn.disabled       = false;
            btn.innerHTML      = '<i class="fal fa-paper-plane me-1"></i> Enviar código a mi email';
        }
    })
    .catch(function() {
        status.textContent = '❌ Error de conexión';
        status.className   = 'small text-danger';
        btn.disabled       = false;
        btn.innerHTML      = '<i class="fal fa-paper-plane me-1"></i> Enviar código a mi email';
    });
}

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

    var selector = type === 'current' ? '.current-pin-box' :
                   type === 'new'     ? '.new-pin-box' :
                   type === 'confirm' ? '.confirm-pin-box' : '.code-box';

    pins[type] = '';
    document.querySelectorAll(selector).forEach(function(b) { pins[type] += b.value; });

    var hiddenId = type === 'current' ? 'currentPinValue' :
                   type === 'new'     ? 'newPinValue' :
                   type === 'confirm' ? 'confirmPinValue' : 'codeValue';
    var hidden = document.getElementById(hiddenId);
    if (hidden) hidden.value = pins[type];

    // Mover al siguiente
    if (input.value) {
        var prefix = type === 'current' ? 'currentBox' :
                     type === 'new'     ? 'newBox' :
                     type === 'confirm' ? 'confirmBox' : 'codeBox';
        var next = document.getElementById(prefix + (idx + 1));
        if (next) next.focus();
    }

    validateForm();
}

function onBoxKeydown(event, idx, type) {
    if (event.key === 'Backspace') {
        var prefix = type === 'current' ? 'currentBox' :
                     type === 'new'     ? 'newBox' :
                     type === 'confirm' ? 'confirmBox' : 'codeBox';
        var box = document.getElementById(prefix + idx);
        if (box && !box.value && idx > 0) {
            var prev = document.getElementById(prefix + (idx - 1));
            if (prev) { prev.value = ''; prev.focus(); }
        }
        setTimeout(function() {
            var selector = type === 'current' ? '.current-pin-box' :
                           type === 'new'     ? '.new-pin-box' :
                           type === 'confirm' ? '.confirm-pin-box' : '.code-box';
            pins[type] = '';
            document.querySelectorAll(selector).forEach(function(b) { pins[type] += b.value; });
            var hiddenId = type === 'current' ? 'currentPinValue' :
                           type === 'new'     ? 'newPinValue' :
                           type === 'confirm' ? 'confirmPinValue' : 'codeValue';
            var hidden = document.getElementById(hiddenId);
            if (hidden) hidden.value = pins[type];
            validateForm();
        }, 10);
    }
}

function validateForm() {
    var verifyOk = false;
    if (!hasPin) {
        verifyOk = true;
    } else if (currentMode === 'pin') {
        verifyOk = pins.current.length >= 4;
    } else {
        verifyOk = pins.code.length === 5;
    }

    var newOk     = pins.new.length >= 4;
    var confirmOk = pins.confirm.length >= 4;
    var match     = pins.new === pins.confirm && pins.new.length >= 4;

    var msg = document.getElementById('pinMatchMsg');
    if (pins.confirm.length > 0) {
        if (match) {
            msg.textContent = '✅ Los NIPs coinciden';
            msg.className   = 'form-text text-success mt-1';
        } else {
            msg.textContent = '❌ Los NIPs no coinciden';
            msg.className   = 'form-text text-danger mt-1';
        }
    } else {
        msg.textContent = '';
    }

    document.getElementById('btnGuardar').disabled = !(verifyOk && newOk && confirmOk && match);
}

document.addEventListener('DOMContentLoaded', function() {
    var first = document.getElementById('currentBox0') || document.getElementById('newBox0');
    if (first) first.focus();
});
</script>
@endsection