@extends('landing.auth.layout')

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

@section('content')

    <div x-data="resetPasswordForm('{{ $token }}', '{{ $email }}')">
        <section class="relative flex h-screen items-center bg-cover bg-center bg-no-repeat px-4 py-8 md:py-0"
            style="background-image: url('{{ asset('landing/images/bg/2.jpg') }}')">
            <div class="z-2 absolute inset-0 bg-gradient-to-b from-transparent to-black" id="particles-snow"></div>
            <div class="z-3 container relative mx-auto flex h-full items-center">
                <div class="flex w-full justify-center">
                    <div
                        class="mx-4 my-8 w-full max-w-[450px] rounded-2xl border border-white/20 bg-white/95 p-6 shadow-2xl backdrop-blur-sm md:mx-0 md:my-0 md:p-8">
                        <div class="mb-4 text-center md:mb-6">
                            <a class="" href="/beranda">
                                <img class="mx-auto inline-block" class="h-[27px] w-[150px] md:h-[33px] md:w-[185px]"
                                    src="{{ asset('landing') }}/images/logo-dark.png" alt=""
                                    style="width: 150px; height: 27px; object-fit: cover;">
                            </a>
                            <h4 class="mt-5 text-sm md:text-xl text-gray-900 font-bold">
                                Atur Ulang Kata Sandi
                            </h4>
                            <p class="text-xs md:text-sm text-gray-600 font-medium">
                                Silakan masukkan kata sandi baru kamu di bawah ini.
                            </p>

                        </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" class="space-y-3 md:space-y-4">
                                <div class="space-y-1 md:space-y-2">
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm"
                                        for="LoginEmail">Password</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400 md:h-5 md:w-5" data-feather="mail"></i>
                                        </div>
                                        <input id="password" :type="showPassword ? 'text' : 'password'"
                                            class="w-full rounded-xl border-2 border-gray-200 py-2.5 pl-9 pr-4 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20 md:py-3 md:pl-10 md:text-base"
                                            x-model="inputData.password" placeholder="Masukan 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 class="space-y-1 md:space-y-2">
                                    <label class="block text-xs font-semibold text-gray-700 md:text-sm"
                                        for="Konfirmasi Kata Sandi">Konfirmasi Kata Sandi</label>
                                    <div class="relative">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <i class="h-4 w-4 text-gray-400 md:h-5 md:w-5" data-feather="mail"></i>
                                        </div>
                                        <input
                                            class="w-full rounded-xl border-2 border-gray-200 py-2.5 pl-9 pr-4 text-sm outline-none transition-all duration-200 hover:border-gray-300 focus:border-green-500 focus:ring-4 focus:ring-green-500/20 md:py-3 md:pl-10 md:text-base"
                                            id="password_confirmation"  :type="showPasswordConfirmation ? 'text' : 'password'"
                                            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="togglePasswordConfirmation">
                                            <i class="text-sm"
                                            :class="showPasswordConfirmation ? '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="flex w-full items-center justify-center space-x-2 rounded-xl bg-gradient-to-r from-green-600 to-green-700 py-3 text-sm font-semibold text-white transition-all duration-200 hover:-translate-y-0.5 hover:from-green-700 hover:to-green-800 hover:shadow-lg active:translate-y-0 md:py-3.5 md:text-base"
                                    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>
                                    <i class="h-4 w-4 md:h-5 md:w-5" data-feather="send"></i>
                                </button>

                                <div class="border-t border-gray-100 pt-2 text-center md:pt-3">
                                    <span class="text-xs text-gray-500 md:text-sm">Sudah ingat passwordnya?</span>
                                    <a class="ml-1 text-xs font-bold text-green-600 transition-colors hover:text-green-700 md:text-sm"
                                        href="/login">
                                        Login
                                    </a>
                                </div>
                            </form>

                        </template>
                    </div>
                </div>
            </div>
        </section>

        <div class="fixed bottom-4 end-4 z-10 md:bottom-6 md:end-6">
            <a class="back-button flex size-10 items-center justify-center rounded-full bg-green-600 text-white shadow-lg transition-all duration-200 hover:-translate-y-1 hover:bg-green-700 hover:shadow-xl md:size-12"
                href="#" title="Kembali">
                <i class="h-4 w-4 md:h-5 md:w-5" data-feather="arrow-left"></i>
            </a>
        </div>
    </div>
@endsection

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