<div class="login-backdrop">
  <div class="login-modal d-flex align-items-center justify-content-center ">
    <div class="card modal-card" role="dialog" aria-labelledby="signin-title" aria-modal="true">
    <div class="brand">
      <!-- <img src="assets/logo.png" alt="Company logo" class="logo" /> -->
      <img src="logo.png" alt="Company logo" class="logo mb-2"/>
      <h1 id="signin-title" class='kanit-bold'>ลืมรหัสผ่าน</h1>
      <p class="subtitle">โปรดกรอก Email ของท่าน</p>
    </div>
    <form [formGroup]="forgotFrm" class="form px-3 pb-3 login-mobile">
      <label class="field">
        <span class="label-text ">อีเมล์</span>
        <input type="email" formControlName="email" class="px-2 " id="englishInput" autocomplete="username" placeholder="nuttakit@gmail.com" aria-label="Email address" required />
      </label>

      @if (isSendOtp === true) {
        <label class="field">
          <span class="label-text">รหัสยืนยัน OTP</span>
          <input type="email" formControlName="otp" autocomplete="otp" placeholder="123456" alt required/>
        </label>
      }
      <!-- <div class="justify-end flex"> -->
        <!-- <label class="stay-signed">
          <input type="checkbox" formControlName="remember" />
          <span>จดจำรหัสผ่าน</span>
        </label> -->
       <div class="flex flex-row gap-2 mt-4 justify-end">
        <div class="flex-row hover:-translate-y-2.5 transform transition-all">
            <button class="bg-[linear-gradient(180deg,var(--primary)_0%,var(--primary-600)_100%)]
         text-black
         border-0
         px-3.5 py-2.5
         rounded-md
         font-semibold
         cursor-pointer
         text-[14px]
         shadow-[0_6px_18px_var(--color-blue-500)]
         transition
         ease-in-out
         duration-100
         hover:scale-[1.02]
         active:opacity-90" (click)="isModalOpen = true">
              เปิด Modal
            </button>
           </div>
        @if (isSendOtp === false) {
          <div class="flex justify-end">
            @if (isLoading === true) {
              <button type="submit" class="primary cursor-progress!" disabled>
                กำลังส่ง...
              </button>
            } @else {
              <button type="submit" class="primary" (click)="onSubmin()">
                {{ 'ยืนยันส่ง OTP รีเซ็ตรหัสผ่าน' }}
              </button>
            }
        </div>
        } @else if(isSendOtp === true) {
          <div class="flex justify-end gap-2">
            <button type="button" class="primary" (click)="onSubmin()">
              {{ 'ส่งอีกครั้ง' }}
            </button>
            <button type="submit" class="primary" (click)="onVerifySubmit()">
              {{ 'รีเซ็ตรหัสผ่าน' }}
            </button>
          </div>
        }
      </div>
        <!-- <button mat-raised-button color="primary" [disabled]="isLoading">
          {{ isLoading ? 'กำลังส่ง...' : 'ส่งรหัส OTP' }}
        </button> -->
      <!-- } -->
      <!-- </div> -->
    </form>
  @if(isModalOpen){
          <div class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50" [formGroup]="forgotFrm">
            <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-fit">
              <h2 class="text-xl font-bold mb-4">เปลี่ยนรหัสผ่าน</h2>
              <hr class="w-full h-1 bg-gray-300 rounded-sm shadow-neutral-400 md:my-1">
              <div class="mb-4">
                <label  class="block text-sm font-medium text-gray-700 mb-1">รหัสผ่านใหม่</label>
                <input type="password" id="newPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" formControlName="newPassword" placeholder="กรอกรหัสผ่านใหม่">
              </div>
              <div class="mb-4">
                <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">ยืนยันรหัสผ่านใหม่</label>
                <input type="password" id="confirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" formControlName="confirmPassword" placeholder="กรอกยืนยันรหัสผ่านใหม่">
                @if ( this.forgotFrm.get('confirmPassword')!.touched && this.forgotFrm.get('newPassword')?.value !== this.forgotFrm.get('confirmPassword')?.value ){
                  <span class="text-red-600 md">รหัสผ่านไม่ตรงกัน</span>
                }
              </div>
                <!-- <hr class="w-full h-[] bg-gray-100 border-0 rounded-sm md:my-1 dark:bg-gray-700"> -->
              <div class="flex justify-end gap-2">
                  <button class="bg-red-500 text-white px-4 py-2 rounded" (click)="isModalOpen = false">
                      ปิด
                  </button>
                  <button class="bg-green-500 text-white px-4 py-2 rounded shadow-[0_1px_18px_var(--color-green-300)] hover:-translate-y-1.5 hover:shadow-[0_6px_18px_var(--color-green-500)] transition-all duration-500 ease-in-out" (click)="onSetNewPassword()">
                      ยืนยัน
                  </button>
              </div>
            </div>
          </div>
        }
    </div>
  </div>
</div>
