@extends('layouts.login')

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

@section('content')



    <div class="w-full lg:w-1/2 p-8 sm:p-16 flex flex-col justify-between bg-[#F8FAFC]">

        <div class="max-w-md w-full mx-auto my-auto py-12">
            <h2 class="text-2xl font-bold text-gray-900 mb-2">Lupa Password,</h2>
            <p class="text-sm text-gray-500 mb-8">Silahkan masukkan email Anda untuk mendapatkan kode OTP.</p>

            <form action="{{ route('login.send-otp') }}" method="POST" class="space-y-5" id="frmForgot">
                @csrf
                <div>
                    <label for="email" class="block text-xs font-semibold text-gray-700 mb-2">Email</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400 text-sm">✉</span>
                        <input type="email" id="email" name="email" placeholder="you@company.com" required
                            class="w-full pl-9 pr-4 py-2.5 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:border-transparent transition">
                    </div>
                </div>

                <button type="submit"
                    class="w-full bg-[#5A52E5] hover:bg-[#4F46E5] text-white font-medium py-2.5 px-4 rounded-xl text-sm transition flex items-center justify-center gap-2 shadow-sm cursor-pointer">
                    Kirim Kode OTP <i class="fa-solid fa-send"></i>
                </button>
            </form>

        </div>

        {{-- <div class="text-center text-[11px] text-gray-400">
            Dengan login, Anda setuju dengan <a href="#" class="underline hover:text-gray-600">Syarat dan Ketentuan</a> dan
            <a href="#" class="underline hover:text-gray-600">Kebijakan Privasi</a>.
        </div> --}}
    </div>

    @push('scripts')
        <script>
            $('#frmForgot').on('submit', function (e) {
                e.preventDefault();
                var email = $('#email').val();

                $.ajax({
                    url: "{{ route('login.send-otp') }}",
                    method: 'POST',
                    data: $(this).serialize(),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        Swal.fire({
                            title: 'Sukses',
                            text: response.message,
                            icon: 'success'
                        }).then(function () {
                            window.location.href = '/login/otp/' + (email);
                        });
                    },
                    error: function (xhr) {
                        const response = xhr.responseJSON || {};
                        Swal.fire({
                            title: 'Error',
                            text: response.message || 'Terjadi kesalahan saat mengirim OTP',
                            icon: 'error'
                        });
                    }
                });
            });
        </script>
    @endpush
@endsection