@extends('layouts.login')

@section('title', 'Reset 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">Reset Password</h2>
            <p class="text-sm text-gray-500 mb-8">Masukkan password baru untuk akun <strong>{{ $email }}</strong>.</p>

            <form action="{{ route('login.ganti-password') }}" method="POST" class="space-y-5" id="frmResetPassword">
                @csrf
                <input type="hidden" name="email" value="{{ $email }}">

                <div>
                    <label for="password" class="block text-xs font-semibold text-gray-700 mb-2">Password Baru</label>
                    <div class="relative">
                        <input type="password" id="password" name="password" placeholder="••••••••" required minlength="6"
                            class="w-full px-4 py-2.5 pr-11 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:border-transparent transition">
                        <button type="button"
                            class="toggle-password absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 transition"
                            data-target="#password" aria-label="Tampilkan password">
                            <i class="fa-solid fa-eye"></i>
                        </button>
                    </div>
                    <small class="text-red-500 text-xs">Password minimal 6 karakter dan harus mengandung huruf besar,
                        huruf
                        kecil, dan angka</small>
                </div>

                <div>
                    <label for="password_confirmation" class="block text-xs font-semibold text-gray-700 mb-2">Konfirmasi
                        Password</label>
                    <div class="relative">
                        <input type="password" id="password_confirmation" name="password_confirmation"
                            placeholder="••••••••" required minlength="6"
                            class="w-full px-4 py-2.5 pr-11 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:border-transparent transition">
                        <button type="button"
                            class="toggle-password absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 transition"
                            data-target="#password_confirmation" aria-label="Tampilkan konfirmasi password">
                            <i class="fa-solid fa-eye"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" id="btnSimpanPassword"
                    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 disabled:opacity-70 disabled:cursor-not-allowed">
                    <i class="fa-solid fa-save"></i> Simpan Password
                </button>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        $('.toggle-password').on('click', function () {
            const $input = $($(this).data('target'));
            const $icon = $(this).find('i');
            const isHidden = $input.attr('type') === 'password';

            $input.attr('type', isHidden ? 'text' : 'password');
            $icon.toggleClass('fa-eye fa-eye-slash');
            $(this).attr('aria-label', isHidden ? 'Sembunyikan password' : 'Tampilkan password');
        });

        function setSimpanLoading(isLoading) {
            const $btn = $('#btnSimpanPassword');

            if (isLoading) {
                $btn.prop('disabled', true)
                    .html('<i class="fa-solid fa-spinner fa-spin"></i> Memproses...');
            } else {
                $btn.prop('disabled', false)
                    .html('Simpan Password <i class="fa-solid fa-check"></i>');
            }
        }

        $('#frmResetPassword').on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                url: "{{ route('login.ganti-password') }}",
                method: 'POST',
                data: $(this).serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    setSimpanLoading(true);
                },
                success: function (response) {
                    if (response.code === 200) {
                        Swal.fire({
                            title: 'Sukses',
                            text: response.message,
                            icon: 'success'
                        }).then(function () {
                            window.location.href = response.redirect;
                        });
                    }
                },
                error: function (xhr) {
                    const response = xhr.responseJSON || {};
                    Swal.fire({
                        title: 'Error',
                        text: response.message || 'Terjadi kesalahan saat mengubah password',
                        icon: 'error'
                    });
                },
                complete: function (xhr) {
                    if (xhr.status !== 200) {
                        setSimpanLoading(false);
                    }
                }
            });
        });
    </script>
@endpush