@extends('selva.auth.layout')

@section('title', 'Lupa Password?')

@section('content')
  <div
    class="flex min-h-screen items-center justify-center p-4"
    x-data="forgotPasswordForm"
  >
    <div class="w-full max-w-md overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl">

      <div class="bg-white p-6 sm:p-8 lg:p-10">
        <div class="mb-8 space-y-3 text-center">
          <div class="space-y-2">
            <h2 class="text-lg font-semibold text-gray-800">Lupa Password?</h2>
            <p class="text-sm text-gray-600">
              Tenang aja! Masukkan email kamu, nanti kami kirim link buat atur ulang password.
            </p>
          </div>
        </div>

        <template x-if="emailSent">
          <div class="mb-6 rounded-lg border border-green-200 bg-green-50 px-4 py-4">
            <div class="flex items-start">
              <div class="flex-shrink-0">
                <i class="fa-solid fa-check-circle text-lg text-green-400"></i>
              </div>
              <div class="ml-3">
                <h3 class="text-sm font-medium text-green-800">Email berhasil dikirim!</h3>
                <div class="mt-2 text-sm text-green-700">
                  <p x-text="successMessage"></p>
                  <p class="mt-2 font-medium">
                    Belum dapat emailnya? Coba cek folder spam atau
                    <a
                      class="underline hover:no-underline"
                      href="#"
                      @click.prevent="resendEmail"
                      :class="resendCooldown > 0 ? 'pointer-events-none text-gray-400' : ''"
                    >kirim ulang link-nya</a>.
                  </p>

                  <template x-if="resendCooldown > 0">
                    <p class="mt-2 text-xs text-gray-500">
                      Kamu bisa kirim ulang dalam <span x-text="resendCooldown"></span> detik.
                    </p>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </template>

        <template x-if="!emailSent">
          <form @submit.prevent="submitForm">
            <div class="space-y-5">
              <div>
                <label
                  class="mb-2 block text-sm font-medium text-gray-700"
                  for="email"
                >
                  Alamat Email
                </label>
                <input
                  class="w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-sm placeholder-gray-400 focus:border-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-800/20"
                  id="email"
                  type="email"
                  :class="errors.email ? 'border-red-500 focus:border-red-600 focus:ring-red-600/20' : 'focus:border-gray-900 focus:ring-gray-800/20'"
                  placeholder="Tulis email kamu di sini"
                  x-model="inputData.email"
                >

                <template x-if="errors.email">
                  <p
                    class="mt-1 text-sm text-red-500"
                    x-text="errors.email[0]"
                  ></p>
                </template>
              </div>

              <button
                class="w-full rounded-lg bg-gradient-to-r from-gray-900 to-gray-800 px-4 py-3 font-medium text-white shadow-lg transition-all duration-200 hover:from-gray-800 hover:to-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-60"
                type="submit"
              >
                <template x-if="!isLoading">
                  <span class="flex items-center justify-center gap-2">
                    <i class="fa-solid fa-paper-plane text-xs"></i>
                    Kirim Link Reset
                  </span>
                </template>
                <template x-if="isLoading">
                  <span class="flex items-center justify-center gap-2">
                    <i class="fa-solid fa-spinner fa-spin"></i>
                    Mengirim...
                  </span>
                </template>
              </button>
            </div>
          </form>
        </template>

        <div class="mt-6 text-center">
          <a
            class="inline-flex items-center gap-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-900"
            :href="route('selva.auth.login')"
          >
            <i class="fa-solid fa-arrow-left text-xs"></i>
            Kembali ke Login
          </a>
        </div>

        <div class="mt-8 border-t border-gray-200 pt-6">
          <div class="space-y-3 text-center">
            <h3 class="text-sm font-medium text-gray-700">Masih butuh bantuan?</h3>
            <div class="flex flex-col space-y-2 text-xs text-gray-500">
              <p>• Pastikan kamu pakai alamat email yang benar</p>
              <p>• Cek juga folder spam/junk kalau belum ada di inbox</p>
              <p>• Link reset akan kadaluarsa dalam 60 menit</p>
            </div>
            <div class="pt-2">
              <a
                class="text-xs text-indigo-600 underline hover:text-indigo-700 hover:no-underline"
                href="#"
              >
                Hubungi Tim Support
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection


@push('style')
  @vite(['resources/js/selva/auth/forgot-password/import.js'])
@endpush