@extends('frontend.layouts.app')

@section('content')
<style>
.fp-section { background: #f8f9fa; min-height: calc(100vh - 200px); padding: 40px 0; }
.fp-card { background: #fff; border-radius: 20px; padding: 36px 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.07); border: none; }

.step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.step-icon { width: 50px; height: 50px; border-radius: 14px; background: #fff5ee; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-icon svg { width: 24px; height: 24px; stroke: #FF8C00; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step-title { font-size: 18px; font-weight: 700; color: #1a1a2e; line-height: 1.2; }
.step-sub { font-size: 12px; color: #6b7280; margin-top: 3px; line-height: 1.5; }

/* Toggle tabs */
.tab-toggle { display: flex; background: #f3f4f6; border-radius: 12px; padding: 4px; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 10px; border: none; background: transparent; border-radius: 8px; font-size: 13px; font-weight: 500; color: #9ca3af; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; font-family: inherit; }
.tab-btn.active { background: #fff; color: #FF8C00; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.tab-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.field-label { font-size: 12px; font-weight: 600; color: #1a1a2e; margin-bottom: 6px; }
.input-icon-wrap { position: relative; margin-bottom: 6px; }
.input-icon-wrap input { width: 100%; padding: 13px 16px 13px 42px; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 14px; background: #f9fafb; color: #1a1a2e; outline: none; transition: all 0.2s; font-family: inherit; }
.input-icon-wrap input:focus { border-color: #FF8C00; background: #fff; box-shadow: 0 0 0 3px rgba(255,140,0,0.1); }
.input-icon-wrap .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: #9ca3af; fill: none; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.input-icon-wrap input:focus ~ .ico { stroke: #FF8C00; }
.toggle-pw-btn { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); cursor: pointer; background: none; border: none; padding: 0; }
.toggle-pw-btn svg { width: 17px; height: 17px; stroke: #9ca3af; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.phone-row { display: flex; }
.phone-prefix { display: flex; align-items: center; gap: 6px; padding: 13px 12px; border: 1.5px solid #e5e7eb; border-right: none; border-radius: 12px 0 0 12px; background: #f9fafb; font-size: 13px; font-weight: 600; color: #1a1a2e; white-space: nowrap; }
.phone-row input { flex: 1; padding: 13px 16px; border: 1.5px solid #e5e7eb; border-radius: 0 12px 12px 0; font-size: 14px; background: #f9fafb; color: #1a1a2e; outline: none; transition: all 0.2s; font-family: inherit; }
.phone-row input:focus { border-color: #FF8C00; background: #fff; box-shadow: 0 0 0 3px rgba(255,140,0,0.1); }

.error-feedback { display: none; align-items: center; gap: 5px; color: #ef4444; font-size: 12px; font-weight: 500; margin-top: 5px; margin-bottom: 8px; }
.error-feedback svg { width: 13px; height: 13px; stroke: #ef4444; fill: none; stroke-width: 2; flex-shrink: 0; }

.info-chip { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: #fff5ee; border-radius: 10px; margin-bottom: 16px; }
.info-chip svg { width: 14px; height: 14px; stroke: #FF8C00; fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px; }
.info-chip span { font-size: 12px; color: #FF8C00; line-height: 1.5; }

/* OTP */
.otp-row { display: flex; gap: 8px; margin-bottom: 6px; }
.otp-box { flex: 1; height: 56px; min-width: 0; }
.otp-box { flex: 1; height: 60px; text-align: center; font-size: 22px; font-weight: 700; border: 1.5px solid #e5e7eb; border-radius: 12px; background: #f9fafb; color: #1a1a2e; outline: none; transition: all 0.2s; font-family: inherit; }
.otp-box:focus { border-color: #FF8C00; background: #fff; box-shadow: 0 0 0 3px rgba(255,140,0,0.1); }
.otp-box.filled { border-color: #FF8C00; background: #fff5ee; }
.otp-box.err { border-color: #ef4444; background: #fef2f2; }

.timer-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0; }
.timer-circle { position: relative; width: 34px; height: 34px; }
.timer-circle svg { transform: rotate(-90deg); }
.timer-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 10px; font-weight: 700; color: #FF8C00; }
.resend-btn { display: none; padding: 6px 16px; border: 1.5px solid #FF8C00; border-radius: 8px; background: #fff5ee; color: #FF8C00; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.resend-btn:hover { background: #FF8C00; color: #fff; }

/* Password strength */
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chip { display: flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; color: #9ca3af; transition: all 0.2s; }
.chip.met { border-color: #10b981; color: #10b981; background: #f0fdf4; }
.chip svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.btn-orange { width: 100%; padding: 14px; background: #FF8C00; color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 14px rgba(255,140,0,0.3); margin-top: 8px; }
.btn-orange:hover { background: #e67e00; }
.btn-orange:disabled { background: #e5e7eb; color: #9ca3af; box-shadow: none; cursor: not-allowed; }
.btn-orange .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
.btn-orange.loading .btn-text { display: none; }
.btn-orange.loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Success */
.success-wrap { text-align: center; padding: 20px 0; }
.success-icon { width: 72px; height: 72px; background: #f0fdf4; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.success-icon svg { width: 36px; height: 36px; stroke: #10b981; fill: none; stroke-width: 2; stroke-linecap: round; }

.fp-step { display: none; animation: fadeIn 0.3s ease; }
.fp-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
</style>

<section class="fp-section">
  <div class="container">
    <div class="row">
      <div class="col-xxl-4 col-xl-5 col-lg-6 col-md-8 mx-auto">
        <div class="fp-card">

          {{-- ═══ STEP 1: Send OTP ═══ --}}
          <div class="fp-step active" id="fp-send">
            <div class="step-header">
              <div class="step-icon">
                <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/><circle cx="12" cy="16" r="1" fill="#FF8C00" stroke="none"/></svg>
              </div>
              <div>
                <div class="step-title">Forgot your password?</div>
                <div class="step-sub">Enter your mobile or email to receive a reset code.</div>
              </div>
            </div>

            {{-- Tab toggle --}}
            <div class="tab-toggle">
              <button class="tab-btn active" id="tab-phone" onclick="switchTab('phone')">
                <svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.93 2.18 2 2 0 012.92 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L7.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z"/></svg>
                Mobile
              </button>
              <button class="tab-btn" id="tab-email" onclick="switchTab('email')">
                <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                Email
              </button>
            </div>

            {{-- Phone input --}}
            <div id="phoneSection">
              <div class="field-label">Mobile Number</div>
              <div class="phone-row">
                <div class="phone-prefix">🇮🇳 +91</div>
                <input type="tel" id="fpPhone" placeholder="9876543210" maxlength="10" inputmode="numeric">
              </div>
            </div>

            {{-- Email input --}}
            <div id="emailSection" style="display:none;">
              <div class="field-label">Email Address</div>
              <div class="input-icon-wrap">
                <input type="email" id="fpEmail" placeholder="you@example.com">
                <svg class="ico" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
              </div>
            </div>

            <div class="error-feedback" id="fpSendError">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
              <span id="fpSendErrorMsg">Please enter a valid mobile number</span>
            </div>

            <div class="info-chip" style="margin-top:12px;">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
              <span id="fpInfoText">A 4-digit OTP will be sent to your mobile number.</span>
            </div>

            <button class="btn-orange" id="fpSendBtn" onclick="sendResetCode()">
              <span class="btn-text">Send Reset Code</span>
              <div class="spinner"></div>
            </button>

            <div class="text-center mt-3">
              <a href="{{ route('user.login') }}" style="font-size:13px;color:#6b7280;text-decoration:none;">← Back to Login</a>
            </div>
          </div>

          {{-- ═══ STEP 2: OTP + New Password ═══ --}}
          <div class="fp-step" id="fp-verify">
            <div class="step-header">
              <div class="step-icon">
                <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
              </div>
              <div>
                <div class="step-title">Reset password</div>
                <div class="step-sub" id="fpVerifySub">OTP sent to +91 ••••••0000</div>
              </div>
            </div>

            <div class="field-label">Enter OTP</div>
            <div class="otp-row">
              <input class="otp-box" id="fp0" type="text" maxlength="1" inputmode="numeric">
              <input class="otp-box" id="fp1" type="text" maxlength="1" inputmode="numeric">
              <input class="otp-box" id="fp2" type="text" maxlength="1" inputmode="numeric">
              <input class="otp-box" id="fp3" type="text" maxlength="1" inputmode="numeric">
            </div>
            <div class="error-feedback" id="fpOtpError">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
              <span id="fpOtpErrorMsg">Invalid OTP</span>
            </div>

            <div class="timer-row">
              <div class="timer-circle">
                <svg width="34" height="34" viewBox="0 0 36 36">
                  <circle cx="18" cy="18" r="15" fill="none" stroke="#f0f0f0" stroke-width="2.5"/>
                  <circle cx="18" cy="18" r="15" fill="none" stroke="#FF8C00" stroke-width="2.5" stroke-dasharray="94" id="fpTimerCircle" stroke-dashoffset="0"/>
                </svg>
                <div class="timer-num" id="fpTimerNum">60</div>
              </div>
              <div id="fpTimerText" style="font-size:12px;color:#6b7280;">Resend in 60s</div>
              <button class="resend-btn" id="fpResendBtn" onclick="resendCode()">Resend</button>
            </div>

            <div class="field-label">New Password</div>
            <div class="input-icon-wrap" style="margin-bottom:6px;">
              <input type="password" id="fpNewPw" placeholder="••••••••" oninput="fpCheckStrength()" style="padding-right:42px;">
              <svg class="ico" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
              <button type="button" class="toggle-pw-btn" onclick="fpToggle('fpNewPw',this)">
                <svg viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
              </button>
            </div>
            <div class="chips-row" id="fpChips" style="display:none;">
              <div class="chip" id="fpChipLen"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg> 6+ chars</div>
              <div class="chip" id="fpChipNum"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg> Number</div>
            </div>

            <div class="field-label">Confirm Password</div>
            <div class="input-icon-wrap" style="margin-bottom:6px;">
              <input type="password" id="fpConfPw" placeholder="••••••••" style="padding-right:42px;">
              <svg class="ico" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
              <button type="button" class="toggle-pw-btn" onclick="fpToggle('fpConfPw',this)">
                <svg viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
              </button>
            </div>
            <div class="error-feedback" id="fpPwError">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
              <span id="fpPwErrorMsg">Passwords do not match</span>
            </div>

            <button class="btn-orange" id="fpResetBtn" onclick="resetPassword()">
              <span class="btn-text">Reset Password</span>
              <div class="spinner"></div>
            </button>
          </div>

          {{-- ═══ STEP 3: Success ═══ --}}
          <div class="fp-step" id="fp-success">
            <div class="success-wrap">
              <div class="success-icon">
                <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <h4 style="font-weight:700;color:#1a1a2e;margin-bottom:8px;">Password Reset Successful!</h4>
              <p style="color:#6b7280;font-size:14px;margin-bottom:24px;">Your password has been updated. You can now login with your new password.</p>
              <a href="{{ route('user.login') }}" class="btn-orange" style="display:block;text-decoration:none;text-align:center;">Back to Login</a>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>

@endsection

@section('script')
<script>
const FP_API = '{{ env("APP_URL") }}/api/v2';
const FP_CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';
let fpMode = 'phone', fpContact = '', fpTimer = null;

async function fpPost(endpoint, data) {
  return fetch(FP_API + endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': FP_CSRF },
    body: JSON.stringify(data)
  });
}

function showFpStep(name) {
  document.querySelectorAll('.fp-step').forEach(s => s.classList.remove('active'));
  document.getElementById('fp-' + name).classList.add('active');
  window.scrollTo(0, 0);
}

function showFpErr(id, msg) {
  const el = document.getElementById(id);
  if (!el) return;
  el.style.display = 'flex';
  if (msg) { const s = el.querySelector('span'); if(s) s.textContent = msg; }
}
function hideFpErr(id) { const el = document.getElementById(id); if(el) el.style.display = 'none'; }

function switchTab(mode) {
  fpMode = mode;
  document.getElementById('tab-phone').classList.toggle('active', mode === 'phone');
  document.getElementById('tab-email').classList.toggle('active', mode === 'email');
  document.getElementById('phoneSection').style.display = mode === 'phone' ? '' : 'none';
  document.getElementById('emailSection').style.display = mode === 'email' ? '' : 'none';
  document.getElementById('fpInfoText').textContent = mode === 'phone'
    ? 'A 4-digit OTP will be sent to your mobile number.'
    : 'A reset code will be sent to your email address.';
  hideFpErr('fpSendError');
}

async function sendResetCode() {
  hideFpErr('fpSendError');
  let contact = '';
  if (fpMode === 'phone') {
    const ph = document.getElementById('fpPhone').value.replace(/\D/g, '');
    if (!/^[6-9]\d{9}$/.test(ph)) { showFpErr('fpSendError', 'Enter a valid 10-digit mobile number'); return; }
    contact = '+91' + ph;
    fpContact = contact;
    document.getElementById('fpVerifySub').textContent = 'OTP sent to +91 ••••••' + ph.slice(-4);
  } else {
    const em = document.getElementById('fpEmail').value.trim();
    if (!/^[\w.-]+@[\w.-]+\.\w+$/.test(em)) { showFpErr('fpSendError', 'Enter a valid email address'); return; }
    contact = em;
    fpContact = contact;
    const masked = em.split('@')[0].slice(0, 3) + '***@' + em.split('@')[1];
    document.getElementById('fpVerifySub').textContent = 'OTP sent to ' + masked;
  }

  const btn = document.getElementById('fpSendBtn');
  btn.classList.add('loading'); btn.disabled = true;
  try {
    const r = await fpPost('/auth/password/forget_request', { email_or_phone: contact, send_code_by: fpMode });
    const d = await r.json();
    if (d.result === false) {
      showFpErr('fpSendError', d.message || 'User not found. Please check your details.');
    } else {
      showFpStep('verify');
      startFpTimer();
      setTimeout(() => document.getElementById('fp0').focus(), 300);
    }
  } catch(e) { showFpErr('fpSendError', 'Network error. Please try again.'); }
  btn.classList.remove('loading'); btn.disabled = false;
}

// OTP boxes
document.querySelectorAll('.otp-box').forEach((b, i) => {
  b.addEventListener('input', e => {
    const v = e.target.value.replace(/\D/g, '');
    e.target.value = v ? v[0] : '';
    e.target.classList.toggle('filled', !!v);
    if (v && i < 3) document.getElementById('fp' + (i+1)).focus();
    hideFpErr('fpOtpError');
  });
  b.addEventListener('keydown', e => {
    if (e.key === 'Backspace' && !e.target.value && i > 0) document.getElementById('fp' + (i-1)).focus();
  });
});

function getFpOtp() { return [0,1,2,3].map(i => document.getElementById('fp'+i).value).join(''); }

function startFpTimer() {
  let s = 60; clearInterval(fpTimer);
  document.getElementById('fpResendBtn').style.display = 'none';
  document.getElementById('fpTimerText').style.display = '';
  document.getElementById('fpTimerCircle').parentElement.style.display = '';
  fpTimer = setInterval(() => {
    s--;
    document.getElementById('fpTimerNum').textContent = s;
    document.getElementById('fpTimerText').textContent = 'Resend in ' + s + 's';
    document.getElementById('fpTimerCircle').setAttribute('stroke-dashoffset', ((60-s)/60)*94);
    if (s <= 0) {
      clearInterval(fpTimer);
      document.getElementById('fpResendBtn').style.display = 'inline-block';
      document.getElementById('fpTimerText').style.display = 'none';
      document.getElementById('fpTimerCircle').parentElement.parentElement.style.display = 'none';
    }
  }, 1000);
}

async function resendCode() {
  try {
    await fpPost('/auth/password/resend_code', { email_or_phone: fpContact, verify_by: fpMode });
    document.querySelectorAll('.otp-box').forEach(b => { b.value = ''; b.classList.remove('filled', 'err'); });
    document.getElementById('fpResendBtn').style.display = 'none';
    document.getElementById('fpTimerText').style.display = '';
    document.getElementById('fpTimerCircle').parentElement.style.display = '';
    startFpTimer();
  } catch(e) {}
}

function fpCheckStrength() {
  const pw = document.getElementById('fpNewPw').value;
  document.getElementById('fpChips').style.display = pw ? 'flex' : 'none';
  document.getElementById('fpChipLen').classList.toggle('met', pw.length >= 6);
  document.getElementById('fpChipNum').classList.toggle('met', /[0-9]/.test(pw));
}

function fpToggle(id, btn) {
  const inp = document.getElementById(id);
  inp.type = inp.type === 'password' ? 'text' : 'password';
  btn.querySelector('svg').style.opacity = inp.type === 'text' ? '0.5' : '1';
}

async function resetPassword() {
  hideFpErr('fpOtpError'); hideFpErr('fpPwError');
  const otp = getFpOtp();
  const pw = document.getElementById('fpNewPw').value;
  const cf = document.getElementById('fpConfPw').value;

  if (otp.length < 4) { showFpErr('fpOtpError', 'Please enter the 4-digit OTP'); return; }
  if (pw.length < 6) { showFpErr('fpPwError', 'Password must be at least 6 characters'); return; }
  if (!/[0-9]/.test(pw)) { showFpErr('fpPwError', 'Password must contain at least one number'); return; }
  if (pw !== cf) { showFpErr('fpPwError', 'Passwords do not match'); return; }

  const btn = document.getElementById('fpResetBtn');
  btn.classList.add('loading'); btn.disabled = true;
  try {
    const r = await fpPost('/auth/password/confirm_reset', { verification_code: otp, password: pw });
    const d = await r.json();
    if (d.result === false) {
      showFpErr('fpOtpError', d.message || 'Invalid OTP. Please try again.');
      document.querySelectorAll('.otp-box').forEach(b => b.classList.add('err'));
    } else {
      clearInterval(fpTimer);
      showFpStep('success');
    }
  } catch(e) { showFpErr('fpOtpError', 'Network error. Please try again.'); }
  btn.classList.remove('loading'); btn.disabled = false;
}

// Phone input — numbers only
document.getElementById('fpPhone').addEventListener('input', function() {
  this.value = this.value.replace(/\D/g, '').slice(0, 10);
  hideFpErr('fpSendError');
});
document.getElementById('fpPhone').addEventListener('keydown', e => { if(e.key==='Enter') sendResetCode(); });
document.getElementById('fpEmail').addEventListener('keydown', e => { if(e.key==='Enter') sendResetCode(); });
</script>
@endsection