@extends("web.layouts.master")

@section("content")
    <section class="height-auto text-center background-light-grey">
        <div class="container pos-vertical-center">
            <div class="row">
                <div class="col-12 col-md-10 text-center" data-aos="fade-zoom-in" data-aos-duration="1500">
                    <div class="feature custom-feature p-5">
                        <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold type--uppercase mb-3">Code Verification</p>
                        <p class="font-size-16 text-dark-grey Font-Manrope-Regular">Code Verification sent to email address <span class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $recipientEmail }}</span></p>

                        <form id="form-code-verification" method="POST" action="{{ route("web.reschedule.code-verification.validate") }}">
                            <input type="hidden" name="order_id" value="{{ $transaction->order_id }}"/>
                            <div class="row mb-2">
                                <div class="col-12 col-md-4">
                                    <div class="row">
                                        <div class="col-3 col-md-3 p-2">
                                            <div class="form-group">
                                                <div class="custom-big-input-container">
                                                    <input type="text" name="code_verifications[0][value]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-input-field p-0 code-verification-value text-center" maxlength="1"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 col-md-3 p-2">
                                            <div class="form-group">
                                                <div class="custom-big-input-container">
                                                    <input type="text" name="code_verifications[1][value]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-input-field p-0 code-verification-value text-center" maxlength="1"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 col-md-3 p-2">
                                            <div class="form-group">
                                                <div class="custom-big-input-container">
                                                    <input type="text" name="code_verifications[2][value]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-input-field p-0 code-verification-value text-center" maxlength="1"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 col-md-3 p-2">
                                            <div class="form-group">
                                                <div class="custom-big-input-container">
                                                    <input type="text" name="code_verifications[3][value]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-input-field p-0 code-verification-value text-center" maxlength="1"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row text-center">
                                <div class="col-12 col-md-12 pt-2">
                                    <a id="resend-btn" href="#">
                                        <span class="btn__text font-size-12 Font-Manrope-Light text-dark-grey dark-grey-underline">Resend Code</span>
                                    </a>
                                </div>
                                <div class="col-12 col-md-12 text-center">
                                    <div class="row text-center">
                                        <div class="col-5 col-md-4">
                                            <a id="submit-btn" class="btn custom-big-fluid-btn custom-btn-danger type--uppercase mt-5">
                                                <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                    Submit
                                                    <img src="{{ asset("web/assets/icons/chevron-right.png") }}" style="margin-top: -3px; margin-right: 10px;"   class="mb-1"/>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    @include("web.components.modal-with-loading-icon", [
        "modalIndex" => 0
    ])
    @include("web.components.cancelable-notification-modal", [
        "modalIndex" => 1
    ])
@endsection

@push("stackJs")
    <script>
        $(document).ready(function () {
            var $submitBtn = $("#submit-btn");
            var $formCodeVerification = $("#form-code-verification");

            $submitBtn.on("click", function (e) {
                e.preventDefault();

                var serializeArray = $formCodeVerification.serializeArray();

                var data = {};
                for (var key in serializeArray) {
                    var obj = serializeArray[key];
                    data[obj.name] = obj.value;
                }

                showModalWithLoadingIcon();
                $.ajax({
                    url: "{{ route("web.reschedule.code-verification.validate") }}",
                    method: "POST",
                    data: data,
                    success: function (res) {
                        hideModalWithLoadingIcon();

                        if (res.success) {
                            window.location = res.redirect_url;
                        } else {
                            showCancelableModalNotification({
                                "message": res.message
                            });
                        }
                    },
                    error: function (res) {
                        hideModalWithLoadingIcon();

                        showCancelableModalNotification({
                            "message": "Failed to validate Verification Code."
                        });
                    }
                });
            });

            const inputs = document.querySelectorAll('.code-verification-value');
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].addEventListener('keydown', function(event) {
                    if (event.key === "Backspace") {
                        inputs[i].value = '';
                        if (i !== 0)
                            inputs[i - 1].focus();
                    } else {
                        if (i === inputs.length - 1 && inputs[i].value !== '') {
                            return true;
                        } else if (event.keyCode > 47 && event.keyCode < 58) {
                            inputs[i].value = event.key;
                            if (i !== inputs.length - 1)
                                inputs[i + 1].focus();
                            event.preventDefault();
                        } else if (event.keyCode > 64 && event.keyCode < 91) {
                            inputs[i].value = String.fromCharCode(event.keyCode);
                            if (i !== inputs.length - 1)
                                inputs[i + 1].focus();
                            event.preventDefault();
                        }
                    }
                });
            }

            var $resendBtn = $("#resend-btn");

            $resendBtn.on("click", function (e) {
                e.preventDefault();

                showModalWithLoadingIcon();
                $.ajax({
                    url: "{{ $resendCodeVerificationLink }}",
                    method: "GET",
                    success: function (res) {
                        hideModalWithLoadingIcon();

                        if (res.success) {
                            showCancelableModalNotification({
                                "message": "Verification Code resend successfully."
                            });
                        } else {
                            showCancelableModalNotification({
                                "message": res.message
                            });
                        }
                    },
                    error: function (res) {
                        hideModalWithLoadingIcon();

                        showCancelableModalNotification({
                            "message": "Failed to resend Verification Code."
                        });
                    }
                });
            });
        });
    </script>
@endpush