@extends('user.layout')
@section('title','Reset PIN')

@section('content')
<style>
  :root{
    --ink:#0f172a; --muted:#64748b; --border:#e5e7eb;
    --primary:#0ea5e9; --danger:#ef4444; --ok:#16a34a;
  }
  main.app-body{padding-top:var(--header-h)!important;background:#fff}
  .wrap{max-width:680px;margin:0 auto;padding:14px 10px 22px}
  .card{
    background:#fff;border:1px solid var(--border);border-radius:16px;
    padding:16px;box-shadow:0 8px 22px rgba(15,23,42,.06);margin-bottom:14px;
  }
  .label{font-weight:900;margin-bottom:6px;display:block;color:var(--ink);}
  .input{
    width:100%;padding:12px;border:1px solid var(--border);
    border-radius:12px;font-weight:800;background:#fff;outline:none;
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    gap:6px;cursor:pointer;border:0;border-radius:12px;
    padding:10px 14px;font-weight:900;background:var(--primary);color:#fff;
  }
  .notice-ok{
    border-color:#bbf7d0;background:#ecfdf5;color:#166534;font-weight:800;
  }
  .notice-err{
    border-color:#fecaca;background:#fef2f2;color:#991b1b;font-weight:800;
  }
  .helper{font-size:.9rem;color:var(--muted);margin-top:6px;}
</style>

<div class="wrap">
  <div class="card" style="background:linear-gradient(135deg,#0ea5e9,#22c55e);color:#fff;">
    <div style="font-weight:900;font-size:1.05rem;margin-bottom:4px;">
      পিন রিসেট
    </div>
    <div style="font-size:.9rem;opacity:.9;">
      পিন ভুলে গেলে আপনার একাউন্টের ইমেইলে ৬ ডিজিটের OTP পাঠানো হবে।
    </div>
  </div>

  @if(session('ok'))
    <div class="card notice-ok">
      {{ session('ok') }}
    </div>
  @endif

  @if($errors->any())
    <div class="card notice-err">
      @foreach($errors->all() as $e)
        <div>{{ $e }}</div>
      @endforeach
    </div>
  @endif

  <div class="card">
    <form method="POST" action="{{ route('user.pin.reset.send') }}">
      @csrf
      <label class="label">আপনার ইমেইল</label>
      <input class="input" type="email" name="email"
             value="{{ old('email', $email ?? auth()->user()->email) }}"
             required placeholder="example@email.com">
      <div class="helper">
        এই ইমেইল ঠিকানায় ৬ ডিজিটের OTP পাঠানো হবে। ইমেইল অবশ্যই আপনার একাউন্টের সাথে মিলতে হবে।
      </div>

      <div style="margin-top:14px;">
        <button class="btn" type="submit">
          <i class="fa-solid fa-paper-plane"></i> OTP পাঠান
        </button>
      </div>
    </form>
  </div>
</div>
@endsection