@extends('layouts.login')

@section('title', 'Dashboard OTP')

@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">Kode OTP</h2>
            <p class="text-sm text-gray-500 mb-8">Silahkan masukkan kode OTP yang telah dikirim ke email
                <strong>{{ $email }}</strong>.
            </p>

            <form action="{{ route('login.otp-confirmation') }}" method="POST" class="space-y-5" id="frmConfirmation">
                @csrf
                <input type="hidden" name="email" value="{{ Crypt::encryptString($email) }}">
                <input type="hidden" id="otp" name="otp">
                <div>

                    <div class="flex justify-center gap-3" id="otp-boxes">
                        @for ($i = 0; $i < 4; $i++)
                            <input type="text"
                                class="otp-digit w-14 h-14 text-center text-xl font-semibold bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:border-transparent transition"
                                maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code"
                                data-index="{{ $i }}" aria-label="Digit OTP {{ $i + 1 }}">
                        @endfor
                    </div>
                </div>

                <button type="submit" id="btnKonfirmasi"
                    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-check"></i> Konfirmasi
                </button>
            </form>

        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function getOtpValue() {
            return $('.otp-digit').map(function () {
                return $(this).val();
            }).get().join('');
        }

        function syncOtpHidden() {
            $('#otp').val(getOtpValue());
        }

        $('.otp-digit').on('input', function () {
            const value = $(this).val().replace(/\D/g, '');
            $(this).val(value.slice(-1));

            if (value && $(this).data('index') < 3) {
                $('.otp-digit').eq($(this).data('index') + 1).focus();
            }

            syncOtpHidden();
        });

        $('.otp-digit').on('keydown', function (e) {
            const index = $(this).data('index');

            if (e.key === 'Backspace' && !$(this).val() && index > 0) {
                $('.otp-digit').eq(index - 1).focus().val('');
                syncOtpHidden();
            }
        });

        $('.otp-digit').on('paste', function (e) {
            e.preventDefault();
            const digits = (e.originalEvent.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 4);

            digits.split('').forEach(function (digit, i) {
                $('.otp-digit').eq(i).val(digit);
            });

            if (digits.length > 0) {
                $('.otp-digit').eq(Math.min(digits.length, 3)).focus();
            }

            syncOtpHidden();
        });

        function loadingKonfirmasi(isLoading) {
            const $btn = $('#btnKonfirmasi');

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

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

            syncOtpHidden();

            const email = @json($email);
            const otp = getOtpValue();

            if (otp.length !== 4) {
                Swal.fire({
                    title: 'Error',
                    text: 'Masukkan 4 digit kode OTP',
                    icon: 'error'
                });
                return;
            }

            $.ajax({
                url: "{{ route('login.otp-confirmation') }}",
                method: 'POST',
                data: $(this).serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    loadingKonfirmasi(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 || 'Kode OTP tidak valid',
                        icon: 'error'
                    });
                },
                complete: function (xhr) {
                    if (xhr.status !== 200) {
                        loadingKonfirmasi(false);
                    }
                }
            });
        });

        $('.otp-digit').first().focus();
    </script>
@endpush