<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OTP Verification</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* 🎨 تم تحديث الألوان هنا لتطابق اللوجو (الأزرق والأخضر) 🎨 */
      --brand-blue:       #0071BC; /* الأزرق الأساسي من اللوجو */
      --brand-blue-dk:    #005A96; /* درجة أغمق للأزرق (للتأثيرات) */
      --brand-green:      #39B54A; /* الأخضر الفاتح من اللوجو */
      
      /* ألوان الإضاءة والخلفيات المشتقة من الأزرق الجديد */
      --brand-glow:       rgba(0, 113, 188, 0.15);
      --brand-lt:         rgba(0, 113, 188, 0.05);

      /* الألوان المحايدة للنصوص والحدود */
      --text:      #1a2535;
      --text-mid:  #4a6070;
      --muted:     #8fa3b1;
      --border:    #dde5ee;
      --bg:        #f0f4f8;
      --white:     #ffffff;
      --input-bg:  #f2f3f5;
      --input-bdr: #e2e5ea;
    }

    html, body {
      min-height: 100%;
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    /* ── Card ── */
    .card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 44px 48px;
      width: 100%;
      max-width: 460px;
      box-shadow: 0 8px 40px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.04);
      animation: riseIn .45s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Header ── */
    .hdr { text-align: center; margin-bottom: 30px; }

    .icon-ring {
      width: 76px; height: 76px; border-radius: 22px;
      background: var(--brand-lt);
      border: 2px solid rgba(0, 113, 188, 0.15);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 18px;
      transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    }
    .icon-ring:hover {
      transform: scale(1.08) rotate(-6deg);
      box-shadow: 0 8px 26px var(--brand-glow);
    }

    .badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--brand-lt); color: var(--brand-blue);
      border: 1px solid rgba(0, 113, 188, 0.15); border-radius: 20px;
      padding: 4px 12px; font-size: 11px; font-weight: 700;
      letter-spacing: .4px; text-transform: uppercase; margin-bottom: 14px;
      cursor: default;
      transition: background .2s, border-color .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
    }
    .badge:hover {
      background: rgba(0, 113, 188, 0.1);
      border-color: rgba(0, 113, 188, 0.25);
      transform: scale(1.04);
    }

    .hdr h2 {
      font-size: 24px; font-weight: 800;
      color: var(--text); letter-spacing: -.4px; margin-bottom: 8px;
    }
    .hdr p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

    .phone-pill {
      display: inline-flex; align-items: center; gap: 6px;
      background: #f0f4f8; border: 1px solid var(--border); border-radius: 8px;
      padding: 4px 11px; font-size: 12.5px; font-weight: 700;
      color: var(--text-mid); margin-top: 10px;
      letter-spacing: .5px; direction: ltr;
    }

    /* ── Alerts ── */
    .alert {
      border-radius: 10px; padding: 11px 14px;
      font-size: 13px; font-weight: 500;
      display: flex; align-items: center; gap: 7px;
      margin-bottom: 20px;
    }
    .alert-danger {
      background: rgba(231,76,60,.06);
      border: 1px solid rgba(231,76,60,.18);
      color: #c0392b;
    }
    .alert-success {
      background: rgba(57, 181, 74, 0.07); /* خلفية خضراء خفيفة */
      border: 1px solid rgba(57, 181, 74, 0.22);
      color: var(--brand-green);
    }

    /* ── OTP Inputs ── */
    .otp-label {
      display: block; font-size: 11.5px; font-weight: 700;
      color: var(--text-mid); text-align: center;
      margin-bottom: 14px; letter-spacing: .35px; text-transform: uppercase;
    }

    .otp-inputs {
      display: flex; justify-content: center; gap: 10px; margin-bottom: 6px;
    }

    .otp-box {
      width: 56px; height: 64px;
      background: var(--input-bg); border: 1.5px solid var(--input-bdr);
      border-radius: 13px; font-family: 'DM Sans', sans-serif;
      font-size: 26px; font-weight: 800; color: var(--text);
      text-align: center; outline: none; caret-color: var(--brand-blue);
      transition: border-color .22s, background .22s, box-shadow .22s, transform .22s;
    }
    .otp-box::placeholder { color: #cdd8e0; }
    .otp-box:hover:not(:focus) {
      border-color: #c4d0db; background: #f8f9fb;
      transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06);
    }
    .otp-box:focus {
      border-color: var(--brand-blue); background: #fff;
      box-shadow: 0 0 0 3.5px var(--brand-glow), 0 4px 14px rgba(0, 113, 188, 0.1);
      transform: translateY(-2px);
    }
    /* عند ملء الحقل (filled) نستخدم اللون الأخضر للنجاح */
    .otp-box.filled {
      border-color: var(--brand-green);
      background: rgba(57, 181, 74, 0.05);
      color: var(--brand-green);
    }
    .otp-box.err-box {
      border-color: #e74c3c;
      background: rgba(231,76,60,.05);
      animation: shake .35s ease;
    }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      20%      { transform: translateX(-6px); }
      40%      { transform: translateX(6px); }
      60%      { transform: translateX(-4px); }
      80%      { transform: translateX(4px); }
    }

    /* ── Timer ── */
    .timer-row {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      font-size: 12.5px; color: var(--muted); margin: 18px 0 6px;
    }
    .timer-val {
      font-size: 13px; font-weight: 700; color: var(--brand-blue);
      background: var(--brand-lt); border-radius: 6px;
      padding: 2px 9px; min-width: 44px; text-align: center;
      transition: color .3s, background .3s;
    }
    .timer-val.urgent { color: #e74c3c; background: rgba(231,76,60,.08); }

    /* ── Resend ── */
    .resend-row { text-align: center; margin: 10px 0 24px; }
    .resend-btn {
      background: none; border: none; cursor: pointer;
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
      color: var(--muted); display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 13px; border-radius: 9px;
      transition: color .2s, background .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
    }
    .resend-btn:not(:disabled):hover {
      color: var(--brand-blue); background: var(--brand-lt); transform: scale(1.04);
    }
    .resend-btn:disabled { opacity: .4; cursor: not-allowed; }

    /* ── Submit ( تم تحديث التدرج اللوني للأزرق والأخضر) ── */
    .bsub {
      width: 100%; padding: 14px;
      /* 🎨 تدرج يدمج الأزرق الأساسي، الأزرق الغامق، والأخضر 🎨 */
      background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dk) 60%, var(--brand-green) 100%);
      border: none; border-radius: 12px; color: #fff;
      font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
      cursor: pointer; box-shadow: 0 5px 18px rgba(0, 113, 188, 0.3);
      display: flex; align-items: center; justify-content: center; gap: 8px;
      position: relative; overflow: hidden;
      transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
    }
    .bsub::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 50%);
      pointer-events: none;
    }
    .bsub::after {
      content: ''; position: absolute; width: 200%; height: 200%;
      top: -50%; left: -110%;
      background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
      transition: left .5s; pointer-events: none;
    }
    .bsub:hover {
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 14px 32px rgba(0, 113, 188, 0.4);
    }
    .bsub:hover::after { left: 110%; }
    .bsub:active { transform: scale(.98); box-shadow: 0 4px 14px rgba(0, 113, 188, 0.25); }
    .bsub:disabled { opacity: .55; cursor: not-allowed; transform: none; }
    .btn-icon { display: flex; transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
    .bsub:hover .btn-icon { transform: translateX(3px) rotate(-8deg); }

    /* ── Footer ── */
    .divider { border: none; border-top: 1px solid var(--border); margin: 24px 0 18px; }
    .foot { text-align: center; font-size: 12px; color: var(--muted); }
    .foot a {
      color: var(--brand-blue); font-weight: 600; text-decoration: none;
      display: inline-flex; align-items: center; gap: 4px;
      transition: color .2s;
    }
    .foot a:hover { color: var(--brand-green); }

    /* ── Step dots ── */
    .dots { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
    .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
    .dot.active { background: var(--brand-green); } /* النقطة النشطة خضراء للنجاح */

    @media (max-width: 520px) {
      .card { padding: 32px 20px; }
      .otp-box { width: 44px; height: 54px; font-size: 22px; }
      .otp-inputs { gap: 7px; }
    }
  </style>
</head>
<body>

<div class="card">

  
  <div class="hdr">
    <div class="icon-ring">
      <!-- لون الأيقونة أزرق -->
      <i data-lucide="shield-check" style="width:32px;height:32px;stroke:var(--brand-blue);stroke-width:1.8"></i>
    </div>
    <div class="badge">
      <i data-lucide="lock" style="width:10px;height:10px;stroke-width:2.5"></i>
      Verification Required
    </div>
    <h2>Enter OTP Code</h2>
    <p>We've sent a 6-digit code to your phone</p>
    <?php if(Auth::user()?->phone): ?>
      <div class="phone-pill">
        <i data-lucide="smartphone" style="width:13px;height:13px;stroke-width:2"></i>
        <?php echo e(substr(Auth::user()->phone, 0, 3)); ?>****<?php echo e(substr(Auth::user()->phone, -3)); ?>

      </div>
    <?php endif; ?>
  </div>

  
  <?php if($errors->any()): ?>
    <div class="alert alert-danger">
      <i data-lucide="alert-circle" style="width:15px;height:15px;flex-shrink:0"></i>
      <?php echo e($errors->first()); ?>

    </div>
  <?php endif; ?>

  
  <?php if(session('sms_sent')): ?>
    <div class="alert alert-success">
      <i data-lucide="check-circle" style="width:15px;height:15px;flex-shrink:0"></i>
      Code sent successfully to your phone!
    </div>
  <?php endif; ?>

  
  <form method="POST" action="<?php echo e(route('otp.verify')); ?>" id="otpForm">
    <?php echo csrf_field(); ?>
    <!-- أضف هذا السطر هنا -->
    <input type="hidden" name="otp" id="otpHidden"> 

    <div class="otp-inputs" id="otpInputs">
        <!-- اجعل الحقول بدون name لضمان عدم إرسالها كمصفوفة وتشتيت السيرفر -->
        <input class="otp-box" type="text" maxlength="1" inputmode="numeric">
        <input class="otp-box" type="text" maxlength="1" inputmode="numeric">
        <input class="otp-box" type="text" maxlength="1" inputmode="numeric">
        <input class="otp-box" type="text" maxlength="1" inputmode="numeric">
        <input class="otp-box" type="text" maxlength="1" inputmode="numeric">
        <input class="otp-box" type="text" maxlength="1" inputmode="numeric">
    </div>
<br>
    <button type="submit" class="bsub" id="submitBtn" disabled>
        Verify & Continue
    </button>
</form>

  <hr class="divider">
  <div class="foot">
    Wrong account?
    <a href="<?php echo e(route('logout')); ?>">
      <i data-lucide="log-out" style="width:12px;height:12px;stroke-width:2"></i>
      Sign out
    </a>
  </div>

  <!--<div class="dots">-->
  <!--  <div class="dot active"></div>-->
  <!--  <div class="dot active"></div>-->
  <!--  <div class="dot"></div>-->
  <!--</div>-->

</div>

<script>
  lucide.createIcons();

const boxes     = Array.from(document.querySelectorAll('.otp-box'));
const hidden    = document.getElementById('otpHidden'); // الآن العنصر موجود ولن يعطي خطأ
const submitBtn = document.getElementById('submitBtn');

function updateHidden() {
    // تجميع الأرقام من الـ 6 صناديق في نص واحد
    const val = boxes.map(b => b.value).join('');
    
    // وضع النص المجمع في الحقل المخفي ليرسل للسيرفر كـ String
    if(hidden) hidden.value = val; 
    
    // تفعيل الزر فقط إذا اكتملت الـ 6 أرقام
    submitBtn.disabled = val.length < 6;

    boxes.forEach(b => b.classList.toggle('filled', b.value !== ''));
}

// ... باقي الكود الخاص بـ addEventListener (input, keydown, paste) كما هو في ملفك
  boxes.forEach((box, i) => {
    box.addEventListener('input', e => {
      box.value = e.target.value.replace(/\D/g, '').slice(-1);
      if (box.value && i < 5) boxes[i + 1].focus();
      updateHidden();
    });
    box.addEventListener('keydown', e => {
      if (e.key === 'Backspace' && !box.value && i > 0) {
        boxes[i - 1].value = '';
        boxes[i - 1].focus();
        updateHidden();
      }
      if (e.key === 'ArrowLeft'  && i > 0) boxes[i - 1].focus();
      if (e.key === 'ArrowRight' && i < 5) boxes[i + 1].focus();
    });
    box.addEventListener('paste', e => {
      e.preventDefault();
      const p = (e.clipboardData || window.clipboardData)
                  .getData('text').replace(/\D/g, '').slice(0, 6);
      p.split('').forEach((ch, idx) => { if (boxes[idx]) boxes[idx].value = ch; });
      boxes[Math.min(p.length, 5)].focus();
      updateHidden();
    });
  });

  <?php if($errors->any()): ?>
    boxes.forEach(b => {
      b.classList.add('err-box');
      setTimeout(() => b.classList.remove('err-box'), 400);
    });
  <?php endif; ?>

  boxes[0].focus();

  /* Countdown 5 min */
  let timeLeft = 300;
  const timerEl = document.getElementById('timerVal');
  function fmt(s) {
    return String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0');
  }
  timerEl.textContent = fmt(timeLeft);
  const tick = setInterval(() => {
    timeLeft--;
    timerEl.textContent = fmt(timeLeft);
    if (timeLeft <= 60) timerEl.classList.add('urgent');
    if (timeLeft <= 0) {
      clearInterval(tick);
      timerEl.textContent = 'Expired';
      submitBtn.disabled = true;
      submitBtn.style.opacity = '.5';
    }
  }, 1000);

  /* Resend cooldown 60s */
  let resendLeft = 60;
  const resendBtn   = document.getElementById('resendBtn');
  const resendCount = document.getElementById('resendCount');
  const resendText  = document.getElementById('resendText');
  const rtick = setInterval(() => {
    resendLeft--;
    resendCount.textContent = resendLeft;
    if (resendLeft <= 0) {
      clearInterval(rtick);
      resendBtn.disabled = false;
      resendText.textContent = 'Resend code';
      lucide.createIcons();
    }
  }, 1000);

  /* Validate before submit */
  document.getElementById('otpForm').addEventListener('submit', function(e) {
    const val = boxes.map(b => b.value).join('');
    if (val.length < 6) {
      e.preventDefault();
      boxes.forEach(b => {
        b.classList.add('err-box');
        setTimeout(() => b.classList.remove('err-box'), 400);
      });
    }
  });
</script>
</body>
</html><?php /**PATH /home/erppanel/public_html/payment.roayapay.com/resources/views/admin/otp.blade.php ENDPATH**/ ?>