@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="flex flex-col items-center mb-4">
                <svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="45" cy="45" r="42" fill="url(#calm-gradient)"/>
                  <circle cx="45" cy="45" r="34" fill="#fff" fill-opacity="0.95"/>
                  <ellipse cx="45" cy="65" rx="20" ry="7" fill="#f6fafd"/>
                  <circle cx="36" cy="43" r="4" fill="#8d6ca7"/>
                  <circle cx="54" cy="43" r="4" fill="#8d6ca7"/>
                  <path d="M38 56c3 4 11 4 14 0" stroke="#68ada9" stroke-width="2" stroke-linecap="round"/>
                  <path d="M60 70c2-6-2-8-6-5" stroke="#68ada9" stroke-width="2" stroke-linecap="round"/>
                  <defs>
                    <linearGradient id="calm-gradient" x1="0" y1="0" x2="90" y2="90" gradientUnits="userSpaceOnUse">
                      <stop stop-color="#68ada9"/>
                      <stop offset="1" stop-color="#8d6ca7"/>
                    </linearGradient>
                  </defs>
                </svg>
                <div class="text-[#68ada9] font-bold mt-2">لا داعي للقلق، يمكنك إعادة تعيين كلمة المرور بسهولة!</div>
            </div>
            <div class="card">
                <div class="card-header">{{ __('Reset Password') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('password.update') }}">
                        @csrf

                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Reset Password') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection