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

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

@php
  if (isset($_GET['message'])) $message = $_GET['message'];
  if (isset($_GET['error'])) $error = $_GET['error'];
@endphp

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

        <h2 class="fp-item fp-item-header text-center">Quên Mật Khẩu</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 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.9993H56.6673V23.3327C56.6673 14.1427 49.1907 6.66602 40.0007 6.66602ZM30.0007 23.3327C30.0007 17.8193 34.4873 13.3327 40.0007 13.3327C45.514 13.3327 50.0006 17.8193 50.0006 23.3327V29.9993H30.0007V23.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>

        <div class="fp-item forgot-password-description py-1 text-center">
          <p class="m-0">Vui lòng kiểm tra mail của bạn để nhận yêu cầu đổi mật khẩu mới</p>
        </div>

        <form method="POST" action="{{ route('forgotpassword.create') }}">
          @csrf
          <div class="fp-item forgot-password-input-wrap d-flex flex-column justify-content-center">
            <div class="input-request-type">
              <label for="Email" class="label-header text-blue fw-500 text-capitalize mb-2">Email</label> <br>
              <input class="input-request-location w-100" type="email" placeholder="Nhập Email của bạn" name="email">
            </div>
            @error('email')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>

          <div class="fp-item otp-button-wrap d-flex flex-column align-items-center">
            <button class="btn-fp btn-fill-primary border-0" type="submit">
              Xác Nhận
            </button>
        </form>
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
          <symbol id="check-circle-fill" viewBox="0 0 16 16">
            <path
              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
          </symbol>
          <symbol id="info-fill" viewBox="0 0 16 16">
            <path
              d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
          </symbol>
          <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
            <path
              d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
          </symbol>
        </svg>
        @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>
        @elseif (isset($_GET['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">{{ $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>
        @elseif (isset($_GET['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">{{ $message }}</p>
            </div>
          </div>
        @endif
      </div>
    </div>
  </section>
@endsection

@push('script')
@endpush