@extends('layout.auth_layout', ['title' => 'Xác nhận OTP'])

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

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

        <h2 class="otp-item otp-item-header text-center">Xác Nhận OTP</h2>

        <div class="otp-item otp-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="otp-item choose-otp-description text-center py-1">
          <p class="m-0">Vui lòng chọn hình thức để nhận yêu cầu xác nhận OTP</p>
        </div>

        <form method="POST" action="{{ route('auth.shared.choose.otp') }}">
          @csrf
          <div class="otp-item choose-otp-input-wrap d-flex flex-column justify-content-center">

            <div class="input-request-type">
              <input type="radio" id="email" name="type" value="email" checked>
              <label for="email">Email</label>
            </div>
            <div class="input-request-type type-phone">
              <input type="radio" id="phone" name="type" value="phone">
              <label for="phone">Số Điện Thoại</label>
            </div>
            @error('type')
              <span class="text-danger">{{ $message }}</span>
            @enderror
            <input class="input-request-location" type="text" placeholder="Nhập Email hoặc Số điện thoại"
              name="value">
            @error('value')
              <span class="text-danger">{{ $message }}</span>
            @enderror
          </div>

          <div class="otp-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 flex-shrink-0 me-2" 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 flex-shrink-0 me-2" role="img" aria-label="Success:">
              <use xlink:href="#check-circle-fill" />
            </svg>
            <div>
              <p class="mb-0">{{ session('message') }}</p>
            </div>
          </div>
        @endif
      </div>
    </div>
  </section>
@endsection

@push('script')
@endpush