@extends('user.public.layout')

@section('title', 'PRO EARN | PIN সেট করুন')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
:root {
  --primary: #0052ff;
  --primary-gradient: linear-gradient(135deg, #001f60 0%, #0052ff 50%, #00a2ff 100%);
  --primary-light: rgba(0, 82, 255, 0.08);
  --bg: #f8fafc;
  --text: #0a192f;
  --muted: #64748b;
  --border: #cbd5e1;
  --success: #10b981;
  --error: #ef4444;
  --soft-blue: rgba(0, 82, 255, 0.04);
}

.pin-screen {
  min-height: 100vh;
  background: radial-gradient(circle at top right, rgba(0, 82, 255, 0.06), transparent 40%), 
              radial-gradient(circle at bottom left, rgba(0, 162, 255, 0.06), transparent 40%),
              #f8fafc;
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-container {
  width: 100%;
  max-width: 440px;
}

.pin-card {
  background: #ffffff;
  border: 1px solid rgba(0, 82, 255, 0.08);
  border-radius: 24px;
  padding: 35px 30px;
  box-shadow: 0 15px 35px rgba(0, 31, 96, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
}

@media (max-width: 480px) {
  .pin-card { padding: 25px 20px; border-radius: 20px; }
  .pin-screen { padding: 20px 12px; }
}

.pin-icon {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  margin: 0 auto 20px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 10px 20px rgba(0, 82, 255, 0.10);
  border: 2px solid #edf2f7;
}

.pin-head { text-align: center; margin-bottom: 25px; }
.pin-head h2 { margin: 0; color: var(--text); font-size: 24px; font-weight: 800; letter-spacing: 0.5px; }
.pin-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; }

.lc-alert {
  border-radius: 12px; padding: 12px 16px; text-align: left; margin-bottom: 18px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.lc-alert.error { background: #fef2f2; border: 1px solid #fee2e2; color: var(--error); }
.lc-alert.success { background: #f0fdf4; border: 1px solid #dcfce7; color: var(--success); }

.pin-group {
  margin-bottom: 20px;
}

.pin-label {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 8px 2px;
}

.pin-input {
  width: 100%;
  height: 54px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 12px;
  outline: none;
  padding-left: 12px;
  transition: all 0.2s ease;
}

.pin-input::placeholder {
  color: #94a3b8;
  letter-spacing: 8px;
  font-size: 16px;
}

.pin-input:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}

.pin-secret {
  -webkit-text-security: disc;
}

.pin-help {
  background: var(--soft-blue);
  border: 1px solid rgba(0, 82, 255, 0.15);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-pin {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 14px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(0, 82, 255, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-pin:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 82, 255, 0.35);
}

.pin-footer {
  margin-top: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.pin-footer a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
  margin-left: 4px;
}

.pin-footer a:hover {
  text-decoration: underline;
}

.pin-copyright {
  text-align: center;
  margin-top: 25px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}
</style>

<div class="pin-screen">
  <div class="pin-container">

    <div class="pin-card">

      <div class="pin-icon">
        <i class="fa-solid fa-shield-halved"></i>
      </div>

      <div class="pin-head">
        <h2>PIN সেট করুন</h2>
        <p>ধাপ ২ — ৪ ডিজিটের গোপন PIN নম্বর দিন</p>
      </div>

      @if($errors->any())
        <div class="lc-alert error">
          <i class="fa-solid fa-circle-exclamation"></i>
          <span>{{ $errors->first() }}</span>
        </div>
      @endif

      @if(session('success'))
        <div class="lc-alert success">
          <i class="fa-solid fa-circle-check"></i>
          <span>{{ session('success') }}</span>
        </div>
      @endif

      <form method="POST" action="{{ route('user.register.pin.submit') }}" id="pinForm" autocomplete="off">
        @csrf

        <div class="pin-group">
          <label class="pin-label">নতুন PIN</label>
          <input
            id="pin"
            name="pin"
            type="password"
            maxlength="4"
            pattern="\d{4}"
            inputmode="numeric"
            class="pin-input pin-secret"
            placeholder="••••"
            required
          >
        </div>

        <div class="pin-group">
          <label class="pin-label">PIN নিশ্চিত করুন</label>
          <input
            id="pin_confirmation"
            name="pin_confirmation"
            type="password"
            maxlength="4"
            pattern="\d{4}"
            inputmode="numeric"
            class="pin-input pin-secret"
            placeholder="••••"
            required
          >
        </div>

        <div class="pin-help">
          <i class="fa-solid fa-circle-info" style="font-size:16px;"></i>
          <span>এই PIN পরবর্তীতে গুরুত্বপূর্ণ লেনদেন ও নিরাপত্তার কাজে ব্যবহার হবে।</span>
        </div>

        <button type="submit" class="btn-pin">
          <i class="fa-solid fa-circle-check"></i>
          রেজিস্ট্রেশন সম্পন্ন করুন
        </button>
      </form>

      <div class="pin-footer">
        ইতিমধ্যেই একাউন্ট আছে?
        <a href="{{ route('user.login') }}">লগইন করুন</a>
      </div>

    </div>

    <div class="pin-copyright">
      &copy; {{ date('Y') }} PRO EARN
    </div>

  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const pinInput = document.getElementById('pin');
  const confirmInput = document.getElementById('pin_confirmation');
  const pinForm = document.getElementById('pinForm');

  // সংখ্যা ছাড়া অন্য কিছু ইনপুট দেওয়া বন্ধ করা
  [pinInput, confirmInput].forEach(input => {
    input.addEventListener('input', function() {
      this.value = this.value.replace(/\D/g, '').slice(0, 4);
    });
  });

  // ১ম ইনপুটে ৪ ডিজিট দেওয়া হলে অটো ২য় ইনপুটে ফোকাস নেওয়া
  pinInput.addEventListener('keyup', function() {
    if (this.value.length === 4) {
      confirmInput.focus();
    }
  });

  // ফর্ম সাবমিট ভ্যালিডেশন
  pinForm.addEventListener('submit', function(e) {
    const pin = pinInput.value.trim();
    const confirm = confirmInput.value.trim();

    if (pin.length !== 4) {
      e.preventDefault();
      alert('⚠️ PIN অবশ্যই ৪ ডিজিটের হতে হবে!');
      pinInput.focus();
      return;
    }

    if (pin !== confirm) {
      e.preventDefault();
      alert('⚠️ দুটি PIN মিলছে না! অনুগ্রহ করে পুনরায় চেষ্টা করুন।');
      confirmInput.focus();
      return;
    }
  });
});
</script>

@endsection