@extends('layout.auth_layout', ['title' => 'Forgot password'])

@push('style')
  @vite('resources/css/forgotpassword.css')
@endpush

@section('content')
  <section class="new-password">
    <div class="container">
      <div class="new-password-wrap d-flex flex-column bg-white">

        <h2 class="fp-item fp-item-header text-center">Tạo Mật Khẩu Mới</h2>

        <div class="fp-item fp-item-icon d-flex justify-content-center">
          <div class="icon-wrap">
            <div class="d-flex justify-content-center align-items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
                <path
                  d="M40.0007 13.3327C45.514 13.3327 50.0006 17.8193 50.0006 23.3327H56.6673C56.6673 14.1427 49.1907 6.66602 40.0007 6.66602C30.8106 6.66602 23.334 14.1427 23.334 23.3327V29.9993H20.0007C16.324 29.9993 13.334 32.9893 13.334 36.666V66.666C13.334 70.3427 16.324 73.3327 20.0007 73.3327H60.0006C63.6773 73.3327 66.6673 70.3427 66.6673 66.666V36.666C66.6673 32.9893 63.6773 29.9993 60.0006 29.9993H30.0007V23.3327C30.0007 17.8193 34.4873 13.3327 40.0007 13.3327ZM60.0073 66.666H43.334V59.0727C45.3173 57.916 46.6673 55.7894 46.6673 53.3327C46.6673 49.656 43.6773 46.666 40.0007 46.666C36.324 46.666 33.334 49.656 33.334 53.3327C33.334 55.786 34.684 57.916 36.6673 59.0727V66.666H20.0007V36.666H60.0006L60.0073 66.666Z"
                  fill="#9E0A1A" />
              </svg>
            </div>
          </div>
        </div>
        <form method="POST" action="{{ route('forgotpassword.newpassword') }}">
          @csrf
          <div class="fp-item new-password-input-wrap">
            <div class="input-password-wrap">
              <label class="" for="password">Mật Khẩu Mới</label>
              <div class="position-relative">
                <input class="w-100 input-password" type="password" id="password" name="password"
                  placeholder="Nhập mật khẩu mới">
                <i class="toggle-password position-absolute top-50 translate-middle-y fa-solid fa-eye-slash"
                  toggle="#password"></i>
              </div>
              @error('password')
                <span class="text-danger">{{ $message }}</span>
              @enderror
            </div>
          </div>

          <div class="fp-item new-password-input-wrap">
            <div class="input-password-wrap position-relative">
              <label class="w-100" for="re-password">Xác Nhận Mật Khẩu</label>
              <div class="position-relative">
                <input class="w-100 input-password" type="password" id="re-password" name="re-password"
                  placeholder="Nhập xác nhận mật khẩu">
                <i class="toggle-password position-absolute top-50 translate-middle-y fa-solid fa-eye-slash"
                  toggle="#re-password"></i>
              </div>
              @error('re-password')
                <span class="text-danger">{{ $message }}</span>
              @enderror
            </div>
          </div>
          <input type="text" name="token" value="{{ request()->query('token') ?? '' }}" hidden>
          <div class="fp-item d-flex flex-column align-items-center">
            <button class="btn-fp btn-fill-primary border-0">
              Lưu Mật Khẩu
            </button>
          </div>

          @if (session()->has('error'))
            <div class="alert alert-danger d-flex align-items-center w-100" role="alert">
              <svg class="alert-icon bi me-2 flex-shrink-0" role="img" aria-label="Danger:">
                <use xlink:href="#exclamation-triangle-fill" />
              </svg>
              <div>
                <p class="mb-0">{{ session('error') }}</p>
              </div>
            </div>
          @endif
          @if (session()->has('message'))
            <div class="alert alert-success d-flex align-items-center w-100" role="alert">
              <svg class="alert-icon bi me-2 flex-shrink-0" role="img" aria-label="Success:">
                <use xlink:href="#check-circle-fill" />
              </svg>
              <div>
                <p class="mb-0">{{ session('message') }}</p>
              </div>
            </div>
          @endif
        </form>

      </div>
    </div>
  </section>
@endsection

@push('script')
  @vite('resources/js/register.js')
@endpush