<?php
$otp_data   = $_SESSION['otp_reset'] ?? [];
$warn       = $_SESSION['otp_warn']  ?? null;
unset($_SESSION['otp_warn']);
$shopName   = setting('shop_name','MJPOS');
$loginBg    = setting('login_bg_image','');
$favicon    = setting('site_icon','');
?>
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verify OTP &mdash; <?=e($shopName)?></title>
<?php if($favicon):?><link rel="icon" type="image/png" href="<?=UPLOAD_URL?>/<?=e($favicon)?>"><?php endif;?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:<?=$loginBg?'url('.UPLOAD_URL.'/'.$loginBg.') center/cover':'#0f172a'?>;
  font-family:"Inter",system-ui,sans-serif}
.otp-card{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-radius:20px;padding:36px 40px;width:100%;max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.brand{text-align:center;margin-bottom:28px}
.brand img{height:52px;margin-bottom:8px}
.brand .name{font-size:1.3rem;font-weight:900;color:#0f172a}
.brand .sub{font-size:.8rem;color:#64748b;margin-top:2px}
.otp-inputs{display:flex;gap:10px;justify-content:center;margin:20px 0}
.otp-inputs input{width:50px;height:60px;border:2px solid #e2e8f0;border-radius:10px;
  text-align:center;font-size:1.8rem;font-weight:900;color:#0f172a;
  transition:border-color .15s;outline:none}
.otp-inputs input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.btn-verify{width:100%;background:#0f172a;color:#fff;border:none;border-radius:10px;
  padding:13px;font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s;margin-top:8px}
.btn-verify:hover{background:#1e293b}
.info-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;
  padding:14px 16px;margin-bottom:20px;font-size:.82rem;color:#1e40af;line-height:1.6}
.back-link{text-align:center;margin-top:16px;font-size:.82rem}
.back-link a{color:#3b82f6;text-decoration:none;font-weight:600}
</style></head><body>

<div class="otp-card">
  <div class="brand">
    <?php if(setting('shop_logo','')): ?>
    <img src="<?=UPLOAD_URL?>/<?=e(setting('shop_logo',''))?>" alt="<?=e($shopName)?>">
    <?php endif; ?>
    <div class="name"><?=e($shopName)?></div>
    <div class="sub">Password Reset — OTP Verification</div>
  </div>

  <?php if($warn): ?>
  <div class="alert alert-warning py-2 small"><?=e($warn)?></div>
  <?php endif; ?>

  <?php foreach(flashMessages(true) as $msg) echo $msg; ?>

  <div class="info-box">
    <i class="bi bi-phone-fill me-1"></i>
    <strong>OTP sent to admin phone</strong> ending in
    <strong><?=e($otp_data['admin_phone']??'****')?></strong><br>
    Resetting password for: <strong><?=e($otp_data['username']??'')?></strong>
    (<?=e($otp_data['name']??'')?>)<br>
    <small class="text-muted">OTP expires in 15 minutes</small>
  </div>

  <form method="POST" action="<?=APP_URL?>/auth/verify-otp" onsubmit="return submitOtp(this)">
    <?=Auth::csrfField()?>

    <label class="form-label fw-semibold small d-block text-center mb-1">
      Enter 6-digit OTP
    </label>

    <div class="otp-inputs" id="otpBoxes">
      <?php for($i=0;$i<6;$i++): ?>
      <input type="text" inputmode="numeric" maxlength="1"
             pattern="[0-9]" autocomplete="off"
             id="otp<?=$i?>" oninput="otpMove(this,<?=$i?>)"
             onkeydown="otpBack(this,<?=$i?>,event)">
      <?php endfor; ?>
    </div>
    <input type="hidden" name="otp" id="otpHidden">

    <button type="submit" class="btn-verify">
      <i class="bi bi-shield-check me-1"></i>Verify OTP &amp; Continue
    </button>
  </form>

  <div class="back-link">
    <a href="<?=APP_URL?>/auth/forgot-password">
      <i class="bi bi-arrow-left me-1"></i>Back / Request new OTP
    </a>
  </div>
</div>

<script>
// Auto-move focus between OTP boxes
function otpMove(el, idx) {
  el.value = el.value.replace(/[^0-9]/g,'');
  if(el.value && idx < 5) document.getElementById('otp'+(idx+1)).focus();
}
function otpBack(el, idx, e) {
  if(e.key==='Backspace' && !el.value && idx > 0)
    document.getElementById('otp'+(idx-1)).focus();
}
function submitOtp(form) {
  let otp='';
  for(let i=0;i<6;i++) otp+=document.getElementById('otp'+i).value;
  if(otp.length!==6){ alert('Please enter all 6 digits'); return false; }
  document.getElementById('otpHidden').value=otp;
  return true;
}
// Auto-focus first box
document.getElementById('otp0').focus();

// Handle paste
document.getElementById('otpBoxes').addEventListener('paste', function(e){
  const data = e.clipboardData.getData('text').replace(/\D/g,'').slice(0,6);
  for(let i=0;i<data.length;i++){
    const box=document.getElementById('otp'+i);
    if(box) box.value=data[i];
  }
  const last=document.getElementById('otp'+(Math.min(data.length,5)));
  if(last) last.focus();
  e.preventDefault();
});
</script>
</body></html>