@extends('layouts.app')
@section('title', 'Set Transaction PIN')

@push('styles')
<style>
.pin-wrap{max-width:420px;margin:3rem auto;}
.pin-card{background:var(--card);border:1px solid rgba(76,175,80,.2);border-radius:20px;padding:2.5rem;text-align:center;}
.pin-icon{width:72px;height:72px;background:linear-gradient(135deg,var(--green),var(--gl));border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 1.5rem;}
.pin-title{font-size:1.4rem;font-weight:900;color:var(--white);margin-bottom:.5rem;}
.pin-sub{font-size:.875rem;color:var(--muted);margin-bottom:2rem;line-height:1.6;}
.pin-dots{display:flex;gap:.75rem;justify-content:center;margin:1.25rem 0;}
.pin-dot{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);transition:.2s;}
.pin-dot.filled{background:var(--gl);border-color:var(--gl);transform:scale(1.1);}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:240px;margin:0 auto 1.5rem;}
.pk{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;padding:.9rem;font-size:1.2rem;font-weight:700;cursor:pointer;transition:.2s;color:var(--text);user-select:none;}
.pk:hover{background:rgba(76,175,80,.1);border-color:rgba(76,175,80,.3);color:var(--gl);}
.pk:active{transform:scale(.95);}
.pk.del{color:#f87171;}
.pk.del:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);}
.pk.empty{background:transparent;border-color:transparent;cursor:default;}
.step-indicator{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem;}
.step{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:.3s;}
.step.active{background:var(--gl);width:24px;border-radius:4px;}
.step.done{background:rgba(76,175,80,.4);}
</style>
@endpush

@section('content')
<div class="pin-wrap">

  @if(session('info'))
  <div class="alert alert-info" style="margin-bottom:1.5rem;"><i class="fas fa-info-circle"></i> {{ session('info') }}</div>
  @endif
  @if($errors->any())
  <div class="alert alert-error" style="margin-bottom:1.5rem;"><i class="fas fa-exclamation-circle"></i> {{ $errors->first() }}</div>
  @endif

  <div class="pin-card">
    <div class="pin-icon">🔐</div>
    <div class="pin-title" id="pinTitle">Create Your PIN</div>
    <div class="pin-sub" id="pinSub">Set a 4-digit transaction PIN to secure your withdrawals and coin transfers. Keep it private.</div>

    <div class="step-indicator">
      <div class="step active" id="step1"></div>
      <div class="step" id="step2"></div>
    </div>

    <div class="pin-dots" id="pinDots">
      <div class="pin-dot" id="d0"></div>
      <div class="pin-dot" id="d1"></div>
      <div class="pin-dot" id="d2"></div>
      <div class="pin-dot" id="d3"></div>
    </div>

    <div class="pin-pad">
      @foreach([1,2,3,4,5,6,7,8,9] as $n)
      <button class="pk" onclick="addDigit('{{ $n }}')">{{ $n }}</button>
      @endforeach
      <button class="pk empty"></button>
      <button class="pk" onclick="addDigit('0')">0</button>
      <button class="pk del" onclick="delDigit()"><i class="fas fa-delete-left"></i></button>
    </div>

    <form id="pinForm" method="POST" action="{{ route('wallet.pin.setup') }}" style="display:none;">
      @csrf
      <input type="hidden" name="pin" id="pinInput">
      <input type="hidden" name="pin_confirmation" id="pinConfirmInput">
    </form>

    <p style="font-size:.75rem;color:var(--muted);margin-top:.5rem;">
      <i class="fas fa-shield-halved" style="color:var(--gl);"></i>
      Your PIN is encrypted and never stored in plain text.
    </p>
  </div>

  @if(auth()->user()->transaction_pin)
  <div style="text-align:center;margin-top:1rem;">
    <a href="{{ route('wallet') }}" style="color:var(--muted);font-size:.82rem;text-decoration:none;">← Back to Wallet</a>
  </div>
  @endif
</div>

@push('scripts')
<script>
let step = 1;
let pin1 = '';
let pin2 = '';

function getCurrent() { return step === 1 ? pin1 : pin2; }
function setCurrent(v) { if (step === 1) pin1 = v; else pin2 = v; }

function updateDots() {
  const val = getCurrent();
  for (let i = 0; i < 4; i++) {
    const dot = document.getElementById('d' + i);
    dot.classList.toggle('filled', i < val.length);
  }
}

function addDigit(d) {
  const val = getCurrent();
  if (val.length >= 4) return;
  setCurrent(val + d);
  updateDots();
  if (getCurrent().length === 4) {
    setTimeout(proceed, 300);
  }
}

function delDigit() {
  const val = getCurrent();
  setCurrent(val.slice(0, -1));
  updateDots();
}

function proceed() {
  if (step === 1) {
    // Move to confirm step
    step = 2;
    pin2 = '';
    document.getElementById('pinTitle').textContent = 'Confirm Your PIN';
    document.getElementById('pinSub').textContent = 'Enter your 4-digit PIN again to confirm.';
    document.getElementById('step1').classList.remove('active');
    document.getElementById('step1').classList.add('done');
    document.getElementById('step2').classList.add('active');
    updateDots();
  } else {
    // Confirm and submit
    if (pin1 !== pin2) {
      // Mismatch — shake and reset
      document.querySelector('.pin-card').style.animation = 'shake .3s ease';
      setTimeout(() => {
        document.querySelector('.pin-card').style.animation = '';
        step = 1; pin1 = ''; pin2 = '';
        document.getElementById('pinTitle').textContent = 'Create Your PIN';
        document.getElementById('pinSub').textContent = "PINs didn't match. Please try again.";
        document.getElementById('step1').classList.add('active');
        document.getElementById('step1').classList.remove('done');
        document.getElementById('step2').classList.remove('active');
        updateDots();
      }, 400);
      return;
    }
    // Submit
    document.getElementById('pinInput').value = pin1;
    document.getElementById('pinConfirmInput').value = pin2;
    document.getElementById('pinForm').submit();
  }
}

// Keyboard support
document.addEventListener('keydown', e => {
  if (e.key >= '0' && e.key <= '9') addDigit(e.key);
  if (e.key === 'Backspace') delDigit();
});
</script>
<style>
@keyframes shake {
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}
  80%{transform:translateX(6px);}
}
</style>
@endpush
@endsection