<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Leitor Fire Sistemas</title>
    <link rel="manifest" href="/manifest-leitor.json">
    <meta name="theme-color" content="#1a2640">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="Leitor Fire Sistemas">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
    <style>
        *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
        body{background:#0f1117;color:#e2e8f0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
             min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem}
        .logo{text-align:center;margin-bottom:2rem}
        .logo img{width:80px;height:80px;border-radius:20px;margin-bottom:.75rem;display:block;margin-left:auto;margin-right:auto}
        .logo h1{font-size:1.3rem;font-weight:700;color:#e2e8f0}
        .logo p{font-size:.85rem;color:#64748b;margin-top:.25rem}
        .card{background:#1a1f2e;border:1px solid #2d3452;border-radius:16px;padding:2rem 1.5rem;width:100%;max-width:340px}
        .field{margin-bottom:1rem}
        .field label{display:block;font-size:.75rem;font-weight:600;color:#8892b0;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.45rem}
        .field input{width:100%;background:#0f1117;border:1px solid #2d3452;border-radius:10px;
                     color:#e2e8f0;font-size:1rem;padding:.75rem 1rem;outline:none;transition:border-color .15s}
        .field input:focus{border-color:#3b5bdb}
        .field input::placeholder{color:#3d4466}
        .btn-entrar{width:100%;padding:1rem;background:#3b5bdb;border:none;border-radius:12px;
                    color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;margin-top:.25rem;
                    transition:background .15s;touch-action:manipulation;display:flex;align-items:center;justify-content:center;gap:.5rem}
        .btn-entrar:active{background:#2f4ac4}
        .btn-entrar:disabled{background:#2a3a6e;cursor:not-allowed}
        .erro-msg{color:#f87171;font-size:.85rem;text-align:center;margin-top:.75rem;min-height:1.2rem;padding:.45rem .75rem;
                  background:rgba(248,113,113,.08);border-radius:8px;display:<?= !empty($erro) ? 'block' : 'none' ?>}
        .info-msg{color:#60a5fa;font-size:.8rem;text-align:center;margin-bottom:1rem;padding:.4rem .75rem;
                  background:rgba(96,165,250,.08);border-radius:8px;display:<?= !empty($info) ? 'block' : 'none' ?>}
        .separator{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0}
        .separator::before,.separator::after{content:'';flex:1;height:1px;background:#2d3452}
        .separator span{color:#3d4466;font-size:.75rem}
        .btn-pin{width:100%;padding:.65rem;background:transparent;border:1px solid #2d3452;border-radius:10px;
                 color:#64748b;font-size:.85rem;cursor:pointer;transition:all .15s;touch-action:manipulation}
        .btn-pin:active,.btn-pin:hover{background:#1a2640;border-color:#3d4466;color:#8892b0}
        /* PIN pad */
        .pin-section{display:none}
        .pin-display{background:#0f1117;border:1px solid #2d3452;border-radius:10px;padding:.75rem 1rem;
                     font-size:1.8rem;letter-spacing:.5rem;text-align:center;color:#e2e8f0;
                     min-height:3.2rem;margin-bottom:1rem;font-family:monospace}
        .pin-display.erro{border-color:#f87171;color:#f87171;animation:shake .3s}
        @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
        .teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
        .tecla{background:#252d40;border:1px solid #2d3452;border-radius:12px;color:#e2e8f0;
               font-size:1.4rem;font-weight:600;padding:1rem;cursor:pointer;text-align:center;
               transition:background .1s;user-select:none;touch-action:manipulation}
        .tecla:active,.tecla:hover{background:#3d4a6a}
        .tecla.apagar{background:#1a2640;color:#f87171;font-size:1.1rem}
        .tecla.apagar:active{background:#2d1f2a}
        .btn-voltar{width:100%;padding:.65rem;background:transparent;border:1px solid #2d3452;border-radius:10px;
                 color:#64748b;font-size:.85rem;cursor:pointer;margin-top:.5rem;touch-action:manipulation}
    </style>
</head>
<body>
<div class="logo">
    <img src="/assets/img/fire-sistemas-logo-branco.png?v=<?= \App\Core\Versao::ATUAL ?>"
         alt="Fire Sistemas"
         style="display:block;width:auto;height:auto;max-width:240px;max-height:84px;object-fit:contain;margin:0 auto 14px">
    <h1 style="font-size:1.1rem;color:#1e293b;margin:6px 0 4px">Leitor de Estoque</h1>
    <p>Acesso ao estoque</p>
</div>

<div class="card">

    <!-- ── Seção usuário ERP ── -->
    <div id="secaoErp">
        <div class="info-msg" id="infoMsg"><?= htmlspecialchars($info ?? '') ?></div>
        <form id="frmErp" method="POST" action="/leitor">
            <input type="hidden" name="modo" value="erp">
            <div class="field">
                <label>Usuário</label>
                <input type="text" name="usuario" id="inputUsuario" placeholder="Seu login do sistema"
                       autocomplete="username" autocorrect="off" autocapitalize="off" spellcheck="false"
                       value="<?= htmlspecialchars($_POST['usuario'] ?? '') ?>" required>
            </div>
            <div class="field">
                <label>Senha</label>
                <input type="password" name="senha" id="inputSenha" placeholder="Sua senha"
                       autocomplete="current-password" required>
            </div>
            <div class="erro-msg" id="erroMsgErp"><?= htmlspecialchars($erro ?? '') ?></div>
            <button type="submit" class="btn-entrar" id="btnEntrarErp">
                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>
                Entrar
            </button>
        </form>

        <?php if (!empty($permitePIN)): ?>
        <div class="separator"><span>ou</span></div>
        <button class="btn-pin" onclick="mostrarPin()">🔢 Entrar com PIN</button>
        <?php endif; ?>
    </div>

    <!-- ── Seção PIN (alternativa) ── -->
    <div id="secaoPin" class="pin-section">
        <form id="frmPin" method="POST" action="/leitor">
            <input type="hidden" name="modo" value="pin">
            <input type="hidden" name="pin" id="pinHidden">
            <div class="pin-display" id="pinDisplay">&#8203;</div>
            <div class="teclado">
                <?php foreach(['1','2','3','4','5','6','7','8','9','','0','⌫'] as $t): ?>
                    <?php if($t===''): ?>
                        <div></div>
                    <?php elseif($t==='⌫'): ?>
                        <button type="button" class="tecla apagar" onclick="apagar()">⌫</button>
                    <?php else: ?>
                        <button type="button" class="tecla" onclick="digitar('<?= $t ?>')"><?= $t ?></button>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
            <div class="erro-msg" id="erroMsgPin" style="display:<?= (!empty($erro) && ($_POST['modo']??'')=='pin') ? 'block' : 'none' ?>">
                <?= htmlspecialchars(($POST['modo']??'')==='pin' ? ($erro ?? '') : '') ?>
            </div>
            <button type="button" class="btn-entrar" onclick="entrarPin()">Entrar com PIN</button>
        </form>
        <button class="btn-voltar" onclick="mostrarErp()">← Voltar para usuário</button>
    </div>

</div>

<script>
// ── Formulário ERP ────────────────────────────────────────────────────────
document.getElementById('frmErp').addEventListener('submit', function(){
    var btn = document.getElementById('btnEntrarErp');
    btn.disabled = true;
    btn.innerHTML = '<span style="border:2px solid #fff;border-top-color:transparent;border-radius:50%;width:18px;height:18px;animation:spin .6s linear infinite;display:inline-block"></span> Autenticando…';
});

// ── PIN pad ───────────────────────────────────────────────────────────────
var _pin = '';
function atualizar(){
    var d = document.getElementById('pinDisplay');
    d.textContent = _pin ? '●'.repeat(_pin.length) : '​';
    d.classList.remove('erro');
}
function digitar(n){ if(_pin.length < 8){ _pin += n; atualizar(); } }
function apagar(){ _pin = _pin.slice(0,-1); atualizar(); }
function entrarPin(){
    if(!_pin){ return; }
    document.getElementById('pinHidden').value = _pin;
    document.getElementById('frmPin').submit();
}

// ── Alternância ───────────────────────────────────────────────────────────
function mostrarPin(){
    document.getElementById('secaoErp').style.display = 'none';
    document.getElementById('secaoPin').style.display = 'block';
    _pin = ''; atualizar();
}
function mostrarErp(){
    document.getElementById('secaoPin').style.display = 'none';
    document.getElementById('secaoErp').style.display = 'block';
}

// ── Teclado físico (PIN) ──────────────────────────────────────────────────
document.addEventListener('keydown', function(e){
    if(document.getElementById('secaoPin').style.display === 'block'){
        if(e.key>='0'&&e.key<='9') digitar(e.key);
        else if(e.key==='Backspace') apagar();
        else if(e.key==='Enter') entrarPin();
    }
});

// ── Animação spinner ──────────────────────────────────────────────────────
var style=document.createElement('style');
style.textContent='@keyframes spin{to{transform:rotate(360deg)}}';
document.head.appendChild(style);

<?php if(!empty($erro) && ($_POST['modo']??'')==='pin'): ?>
document.getElementById('pinDisplay').classList.add('erro');
mostrarPin();
<?php endif; ?>
<?php if(!empty($erro) && ($_POST['modo']??'')==='erp'): ?>
document.getElementById('inputSenha').focus();
<?php else: ?>
document.getElementById('inputUsuario').focus();
<?php endif; ?>
</script>
</body>
</html>
