@extends('landing.auth.layout')

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

@section('content')
    <div x-data="forgotPasswordForm">
        <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>
                            <p class="mt-5 text-xs text-gray-600 md:text-sm">Silakan masukkan alamat email Anda. Anda akan
                                menerima tautan untuk membuat kata sandi baru melalui email.</p>
                        </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" 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">Email</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="email" x-model="inputData.email" type="text"
                                            placeholder="name@example.com">

                                        <template x-if="errors.email">
                                            <p class="mt-1 text-sm text-red-500" x-text="errors.email[0]"></p>
                                        </template>
                                    </div>
                                </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">
                                            <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>
                                    <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/forgot-password/import.js'])
@endpush