@extends('user.layout')

@section('title','Change PIN')

@section('content')

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

<div class="pin-page">
  <div class="pin-card">
    <div class="pin-head">
      <div class="head-icon"><i class="fa-solid fa-shield-halved"></i></div>
      <div>
        <div class="head-sub">Security PIN</div>
        <div class="head-title">পিন পরিবর্তন</div>
      </div>
    </div>

    <div class="pin-body">
      @if(session('ok')) <div class="alert alert-success">{{ session('ok') }}</div> @endif
      @if($errors->any()) 
        <div class="alert alert-danger">
          @foreach($errors->all() as $e) <div>{{ $e }}</div> @endforeach
        </div> 
      @endif

      <form method="POST" action="{{ route('user.pin.change.do') }}">
        @csrf
        <div class="form-group">
          <label class="label"><i class="fa-solid fa-key"></i> বর্তমান পিন</label>
          <input class="input" type="tel" name="current_pin" inputmode="numeric" pattern="[0-9]{4}" maxlength="4" required placeholder="****">
        </div>
        <div class="form-group">
          <label class="label"><i class="fa-solid fa-lock"></i> নতুন পিন</label>
          <input class="input" type="tel" name="new_pin" inputmode="numeric" pattern="[0-9]{4}" maxlength="4" required placeholder="****">
        </div>
        <div class="form-group">
          <label class="label"><i class="fa-solid fa-circle-check"></i> কনফার্ম পিন</label>
          <input class="input" type="tel" name="new_pin_confirmation" inputmode="numeric" pattern="[0-9]{4}" maxlength="4" required placeholder="****">
        </div>

        <div class="helper">
          <i class="fa-solid fa-circle-info"></i> পিন কেবল সংখ্যা হবে এবং ৪ ডিজিট হতে হবে
        </div>

        <button type="submit" class="submit-btn"><i class="fa-solid fa-shield"></i> পিন আপডেট করুন</button>
      </form>

      <div class="form-note"><i class="fa-solid fa-lock"></i> আপনার পিন গোপন রাখুন</div>
    </div>
  </div>
</div>

<style>
:root {
  --sky-blue: #00a8ff;
  --main-gradient: linear-gradient(135deg, #00a8ff, #007bff);
  --bg: #f0f7ff;
  --text-main: #0c4a6e;
  --text-sub: #475569;
  --white: #ffffff;
  --soft-blue: #e0f2fe;
}

.pin-page { background: var(--bg); min-height: 100vh; padding: 20px 15px 100px; font-family: sans-serif; }
.pin-card { background: var(--white); border-radius: 25px; box-shadow: 0 10px 25px rgba(0,168,255,0.05); border: 1px solid var(--soft-blue); overflow: hidden; }
.pin-head { display: flex; align-items: center; gap: 15px; padding: 20px; border-bottom: 1px solid var(--soft-blue); background: #fafcff; }
.head-icon { width: 50px; height: 50px; border-radius: 15px; background: var(--main-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.head-sub { font-size: 11px; color: var(--sky-blue); font-weight: 800; text-transform: uppercase; }
.head-title { font-size: 18px; font-weight: 900; color: var(--text-main); }
.pin-body { padding: 20px; }

.form-group { margin-bottom: 15px; }
.label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); font-weight: 800; margin-bottom: 8px; }
.label i { color: var(--sky-blue); }
.input { width: 100%; height: 50px; border-radius: 15px; border: 1px solid var(--soft-blue); background: #f8fafc; font-weight: 900; letter-spacing: 10px; text-align: center; font-size: 20px; outline: none; }
.input:focus { border-color: var(--sky-blue); background: #fff; box-shadow: 0 0 0 3px var(--soft-blue); }

.alert { padding: 12px; border-radius: 12px; margin-bottom: 15px; font-size: 13px; font-weight: 700; }
.alert-success { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.alert-danger { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }

.helper { margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff7ed; color: #9a3412; font-size: 12px; font-weight: 700; }
.submit-btn { width: 100%; height: 50px; border-radius: 15px; border: none; background: var(--main-gradient); color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; margin-top: 10px; }
.form-note { margin-top: 15px; text-align: center; color: var(--text-sub); font-size: 12px; font-weight: 700; }
</style>

@endsection