@extends('layouts.register-layout')

@section('content')
    @include('layouts.partials.register-partial-1')
    <div class="col-6">
        <div class="card custom-card" id="card-verification" style="height: 100%;min-height: calc(100vh - 30vh);">
            <div class="card-body position-relative">
                <div class="row" style="padding-bottom: 1rem;">
                    <div class="col-12">
                        <img class="d-block" alt="shield-icon" src="{{ asset('asset_web/img/pages/shield-icon.svg') }}"
                            style="margin-left: auto;margin-right: auto;">
                    </div>
                    <div class="col-12" style="padding-top: 0.5rem;">
                        <h4 class="text-center fw-semibold" style="font-size: 1.5rem;">Verifikasi Akun</h4>
                    </div>
                    <div class="col-12" style="padding-left: 5rem;padding-right: 5rem;padding-top: 0.5rem;">
                        <p class="text-center" style="font-size: 0.875rem;">
                            Masukkan kode OTP yang telah kami kirim ke email <span
                                class="fw-bold">{{ session('register_email') }}</span> dalam kotak di bawah ini untuk
                            melanjutkan.
                        </p>
                    </div>
                </div>
                <form method="POST" action="{{ url('/register/verification') }}">
                    @csrf
                    <div class="d-flex justify-content-center" style="gap: 1rem;padding-bottom: 2rem;">
                        <div style="width: 3.125rem;height: 3.75rem;">
                            <input name="kode_otp[]" class="otp-input" type="text" id="otp-1" maxlength="1"
                                minlength="1">
                        </div>
                        <div style="width: 3.125rem;height: 3.75rem;">
                            <input name="kode_otp[]" class="otp-input" type="text" id="otp-2" maxlength="1"
                                minlength="1">
                        </div>
                        <div style="width: 3.125rem;height: 3.75rem;">
                            <input name="kode_otp[]" class="otp-input" type="text" id="otp-3" maxlength="1"
                                minlength="1">
                        </div>
                        <div style="width: 3.125rem;height: 3.75rem;">
                            <input name="kode_otp[]" class="otp-input" type="text" id="otp-4" maxlength="1"
                                minlength="1">
                        </div>
                        <div style="width: 3.125rem;height: 3.75rem;">
                            <input name="kode_otp[]" class="otp-input" type="text" id="otp-5" maxlength="1"
                                minlength="1">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12" style="padding-bottom: 1rem;">
                            <button id="btn-verification" type="submit" class="d-block btn btn-verification"
                                disabled="disabled">
                                Verifikasi Sekarang
                            </button>
                        </div>
                        <div class="col-12">
                            <p id="send-otp" class="text-center" style="font-size: 0.875rem;">
                                Tidak menerima kode OTP?
                                <button type="button" class="fw-bold"
                                    style="outline: none;border: none;box-shadow: none;background-color: transparent;color: #375cb4;"
                                    id="btn-send-otp">
                                    Kirim Ulang.
                                </button>
                            </p>
                            <p id="countdown-otp" class="text-center" style="font-size: 0.875rem;display: none;">
                                Tunggu <span style="color: #737373;font-weight: 700;">01:00</span> untuk mengirim ulang
                            </p>
                        </div>
                    </div>
                </form>
                <div class="position-absolute" style="bottom: 0.5rem;left: 0.5rem;right: 0;">
                    <a href="/register" class="btn btn-previous">
                        <img alt="small-arrow-right" src="{{ asset('asset_web/img/pages/arrow-small-left.svg') }}">
                        <span class="fw-bold" style="color: #375cb4;font-size: 0.8rem;">Kembali</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="toast-container position-fixed top-0 start-50 translate-middle-x">
            <div id="toast-otp" class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header" style="background-color: #dc2626;">
                    <strong class="me-auto" style="color: #ffffff;">Verifikasi Akun Gagal</strong>
                    <small style="color: #ffffff;">Just Now</small>
                    <button id="btn-close-toast" type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"
                        data-bs-target="#toast-otp" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    Kode OTP yang dikirimkan tidak valid.
                </div>
            </div>
        </div>
    @endif

    <div class="toast-container position-fixed top-0 start-50 translate-middle-x">
        <div id="toast-send-otp" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header" style="background-color: #3152a2;">
                <strong class="me-auto" style="color: #ffffff;">Kode OTP Berhasil Dikirim</strong>
                <small style="color: #ffffff;">Just Now</small>
                <button id="btn-close-toast-send-otp" type="button" class="btn-close btn-close-white"
                    data-bs-dismiss="toast" data-bs-target="#toast-otp" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Kode OTP yang baru sudah dikirim, silahkan cek email anda.
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            let countOtpInput = $(".otp-input").length;
            $(".otp-input").keyup(function(event) {
                let keycode = event.keyCode;
                let index = $(".otp-input").index(this);

                // backspace key
                if (keycode === 8) {
                    if (index === 0) {
                        return;
                    }

                    $(".otp-input").eq(index - 1).focus();

                    return;
                }

                if ((index + 1) === countOtpInput) {
                    // auto submit
                    $("#btn-verification").removeAttr("disabled");
                    return;
                }

                $(".otp-input").eq(index + 1).focus();
            });

            $("#btn-close-toast").click(function(e) {
                e.preventDefault();

                $("#toast-otp").toast("hide");
            });

            $("#btn-close-toast-send-otp").click(function(e) {
                e.preventDefault();

                $("#toast-send-otp").toast("hide");
            });

            const startCountDownOTP = function() {
                let timer = 60;
                let minutes = null;
                let seconds = null;

                const interval = setInterval(() => {
                    minutes = parseInt(timer / 60, 10);
                    seconds = parseInt(timer % 60, 10);

                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    $("#countdown-otp span").text(`${minutes}:${seconds}`);

                    if (timer-- < 0) {
                        clearInterval(interval);

                        $("#countdown-otp span").text("01:00");
                        $("#send-otp").show();
                        $("#countdown-otp").hide();
                        $("#btn-send-otp").removeAttr("disabled");
                    }
                }, 1000);
            }

            $("#btn-send-otp").click(function(e) {
                e.preventDefault();

                let _this = $(this);

                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/generate-otp') }}",
                    data: {
                        user_id: "{{ session('register_nik') }}"
                    },
                    dataType: "json",
                    async: true,
                    beforeSend: function() {
                        _this.attr("disabled", "disabled");
                    },
                    success: function(response) {
                        $("#countdown-otp").show();
                        $("#send-otp").hide();

                        $("#toast-send-otp").toast("show");

                        startCountDownOTP();
                    }
                });
            });
        });
    </script>
@endsection