@extends('layouts.app')
@section('title', "New Password — God's Treat")

@push('styles')
<style>
  .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 20px;}
  .auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:40px;width:100%;max-width:460px;}
  .auth-logo-name{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.1em;text-align:center;margin-bottom:28px;}
  .auth-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;margin-bottom:8px;}
  .form-group{margin-bottom:18px;}
  .form-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block;}
  .form-input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border2);color:var(--white);padding:13px 16px;border-radius:10px;font-size:.95rem;transition:border-color .2s;box-sizing:border-box;}
  .form-input:focus{outline:none;border-color:var(--orange);}
  .pw-wrap{position:relative;}
  .pw-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;}
</style>
@endpush

@section('content')
<div class="auth-wrap">
  <div class="auth-card">
    <div class="auth-logo-name"><span class="gradient-text">GOD'S TREAT</span></div>

    <h2 class="auth-title">NEW <span class="gradient-text">PASSWORD</span></h2>
    <p style="color:var(--muted);font-size:.875rem;margin-bottom:24px">Enter your new password below.</p>

    <form method="POST" action="{{ route('password.update') }}">
      @csrf
      <input type="hidden" name="token" value="{{ $token }}"/>

      <div class="form-group">
        <label class="form-label">Email Address</label>
        <input type="email" name="email" class="form-input {{ $errors->has('email') ? 'is-error' : '' }}"
          value="{{ old('email', request('email')) }}" placeholder="your@email.com" required/>
        @error('email')<div style="color:var(--pink);font-size:.78rem;margin-top:4px">{{ $message }}</div>@enderror
      </div>

      <div class="form-group">
        <label class="form-label">New Password</label>
        <div class="pw-wrap">
          <input type="password" name="password" id="pwInput" class="form-input {{ $errors->has('password') ? 'is-error' : '' }}"
            placeholder="Min 8 characters" required/>
          <button type="button" class="pw-toggle" onclick="const i=document.getElementById('pwInput');i.type=i.type==='password'?'text':'password'">👁</button>
        </div>
        @error('password')<div style="color:var(--pink);font-size:.78rem;margin-top:4px">{{ $message }}</div>@enderror
      </div>

      <div class="form-group">
        <label class="form-label">Confirm New Password</label>
        <input type="password" name="password_confirmation" class="form-input" placeholder="Repeat new password" required/>
      </div>

      <button type="submit" class="btn-primary btn-full" style="padding:15px">Update Password →</button>
    </form>
  </div>
</div>
@endsection
