@extends('selva.auth.layout')

@section('title', 'Atur Ulang Kata Sandi')

@section('content')
  <div
    class="flex min-h-screen items-center justify-center p-4"
    x-data="resetPasswordForm('{{ $token }}', '{{ $email }}')"
  >
    <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">Atur Ulang Kata Sandi</h2>
            <p class="text-sm text-gray-600">
              Silakan masukkan kata sandi baru kamu di bawah ini.
            </p>
          </div>
        </div>

        <template x-if="resetSuccess">
          <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">Kata sandi berhasil diubah!</h3>
                <div class="mt-2 text-sm text-green-700">
                  <p>Kamu sekarang bisa login pakai kata sandi baru.</p>
                  <p class="mt-2 font-medium">Mengalihkan ke halaman login dalam <span x-text="countdown"></span> detik...</p>
                </div>
              </div>
            </div>
          </div>
        </template>

        <template x-if="!resetSuccess">
          <form @submit.prevent="submitForm">
            <div class="space-y-5">
              <div>
                <label
                  class="mb-2 block text-sm font-medium text-gray-700"
                  for="password"
                >
                  Kata Sandi Baru
                </label>
                <div class="relative">
                  <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="password"
                    :type="showPassword ? 'text' : 'password'"
                    :class="errors.password ? 'border-red-500 focus:border-red-600 focus:ring-red-600/20' : 'focus:border-gray-900 focus:ring-gray-800/20'"
                    x-model="inputData.password"
                    placeholder="Masukkan kata sandi baru"
                  >
                  <button
                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                    type="button"
                    @click="togglePassword"
                  >
                    <i
                      class="text-sm"
                      :class="showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'"
                    ></i>
                  </button>
                </div>

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

              <div>
                <label
                  class="mb-2 block text-sm font-medium text-gray-700"
                  for="password_confirmation"
                >
                  Konfirmasi Kata Sandi
                </label>
                <div class="relative">
                  <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="password_confirmation"
                    :type="showPassword ? 'text' : 'password'"
                    :class="errors.password_confirmation ? 'border-red-500 focus:border-red-600 focus:ring-red-600/20' : 'focus:border-gray-900 focus:ring-gray-800/20'"
                    x-model="inputData.password_confirmation"
                    placeholder="Ulangi kata sandi baru"
                  >
                  <button
                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                    type="button"
                    @click="togglePassword"
                  >
                    <i
                      class="text-sm"
                      :class="showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'"
                    ></i>
                  </button>
                </div>

                <template x-if="errors.password_confirmation">
                  <p
                    class="mt-1 text-xs text-red-500"
                    x-text="errors.password_confirmation[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">
                    Atur Ulang Kata Sandi
                  </span>
                </template>
                <template x-if="isLoading">
                  <span class="flex items-center justify-center gap-2">
                    <i class="fa-solid fa-spinner fa-spin"></i>
                    Memproses...
                  </span>
                </template>
              </button>
            </div>
          </form>
        </template>

        <div class="mt-6 text-center">
          <p class="text-sm font-medium text-gray-600">
            Sudah ingat kata sandinya?
            <a
              class="font-medium text-gray-800 underline hover:text-gray-900 hover:no-underline"
              href="{{ route('selva.auth.login') }}"
            >
              Masuk di sini
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
@endsection

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