@extends('layouts.guest.app')

@section('content')
    <div class="col-sm-12 col-md-4">
        <div class="loginTabs">
            <h4 class="mb-2">{{ __('static.verify_your_mobile') }}</h4>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="email-id" role="tabpanel" aria-labelledby="org-tab">
                    @php
                        $route = $type == App\Helpers\ConstantHelper::LOGIN ? route('auth.otp.getlogin') : route('auth.otp.verify');
                    @endphp
                    <form class="auth-login-form mt-2" action="{{ $route }}" method="POST">
                        @csrf
                        <input type="hidden" name="request_token" value="{{ $token }}" />
                        <input type="hidden" name="device_name" value="{{ $_SERVER['HTTP_USER_AGENT'] }}" />
                        <input type="hidden" name="request_type" value="{{ $type }}" />
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="mb-0">{{ __('label.enter_otp') }}<span
                                            class="text-danger">*</span></label>
                                    <div class="d-flex justify-content-start otp-input">
                                        <input class="numberonly" id="first" type="text" name="n1"
                                            aria-describedby="first" autofocus="" placeholder="*" tabindex="1"
                                            maxlength="1" oninput="inputInsideOtpInput(this)" />
                                        <input class="numberonly" id="second" type="text" name="n2"
                                            aria-describedby="second" autofocus="" placeholder="*" tabindex="2"
                                            maxlength="1" oninput="inputInsideOtpInput(this)" />
                                        <input class="numberonly" id="third" type="text" name="n3"
                                            aria-describedby="third" autofocus="" placeholder="*" tabindex="3"
                                            maxlength="1" oninput="inputInsideOtpInput(this)" />
                                        <input class="numberonly" id="fourth" type="text" name="n4"
                                            aria-describedby="fourth" autofocus="" placeholder="*" tabindex="4"
                                            maxlength="1" oninput="inputInsideOtpInput(this)" />
                                        <input class="numberonly" id="fifth" type="text" name="n5"
                                            aria-describedby="fifth" autofocus="" placeholder="*" tabindex="5"
                                            maxlength="1" oninput="inputInsideOtpInput(this)" />
                                        <input class="numberonly" id="sixth" type="text" name="n6"
                                            aria-describedby="sixth" autofocus="" placeholder="*" tabindex="6"
                                            maxlength="1" oninput="inputInsideOtpInput(this)" />
                                    </div>
                                    @error('otp_number')
                                        <span class="text-danger" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    @if (session('error'))
                                        <span class="text-danger" role="alert">
                                            <strong>{{ session('error') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="text-left mt-2" id="otp-timer">
                                <p>{{ __('static.resend_otp_in') }} <span id="timer">00:00</span></p>
                            </div>

                        </div>
                        <div class="row mt-4">
                            <div class="col-md-5">
                                <button type="submit"
                                    class="btn btn-primary mt-4 btn-block">{{ __('static.verify_otp') }}</button>
                            </div>
                            <div class="col-md-7">
                                <button class="btn btn-dark mt-4 btn-block" type="button" tabindex="4" id="resend-otp"
                                    disabled data-request="resend-otp"
                                    data-target="[role=resend-otp]">{{ __('static.resend_otp') }}
                                </button>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <p class="text-center mt-4 f-14">{{ __('static.go_back_to') }} <a
                                        href="{{ route('login') }}">{{ __('anchor.sign_in') }}</a>
                                </p>
                            </div>
                        </div>
                    </form>

                    <form action="/api/otp/regenerate" method="POST" role="resend-otp">
                        {{-- <input type="hidden" name="mobile" id="mobile" value="{{ $mobile }}">
                        <input type="hidden" name="email" id="email" value="{{ $email }}"> --}}
                        <input type="hidden" name="token" value="{{ $token }}" />
                        <input type="hidden" name="type" id="type" value="{{ $type }}">
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(function() {
            // Generate OTP
            $(document).on("click", '[data-request="resend-otp"]', function() {
                /*REMOVING PREVIOUS ALERT AND ERROR CLASS*/
                $(".is-invalid error").removeClass("is-invalid error");
                $(".help-block").remove();
                var $this = $(this);
                var $target = $this.data("target");
                var $url = $(this).data("action") ? $(this).data("action") : $($target).attr("action");
                var $method = $(this).data("action") ? "POST" : $($target).attr("method");
                var $redirect = $($target).attr("redirect");
                var $reload = $($target).attr("reload");
                var $callback = $this.data("callback");
                var $data = new FormData($($target)[0]);
                if (!$method) {
                    $method = "get";
                }
                $this.prop('disabled', true);

                $.ajax({
                    url: app_url + $url,
                    data: $data,
                    cache: false,
                    type: $method,
                    dataType: "JSON",
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        $('#loaderDiv').show();
                    },
                    success: function($response) {
                        $('#loaderDiv').hide();
                        $('#otp-timer').show();
                        $('#otp-login-btn').prop('disabled', false);

                        // Run OTP Timer
                        timer(60); // timer start for 60 seconds
                        if ($response.status === 200) {
                            setTimeout(function() {
                                $this.prop('disabled', false);
                            }, 60000); //60000 = 60 seconds

                            Swal.fire({
                                icon: 'success',
                                text: $response.message,
                                confirmButtonText: '{{ __("static.ok_text") }}',
                            })
                        }
                    },
                    error: function($response) {
                        $('#otp-success').empty();
                        $('#loaderDiv').hide();
                        $this.prop('disabled', false);
                        if ($response.status === 422) {
                            if (
                                Object.size($response.responseJSON) > 0 &&
                                Object.size($response.responseJSON.errors) > 0
                            ) {
                                show_validation_error($response.responseJSON.errors);
                            }
                        } else {
                            Swal.fire(
                                "Error!",
                                $response.responseJSON.message,
                                "warning"
                            );
                            setTimeout(function() {}, 1200);
                        }
                    },
                });
            });
        });

        $(document).ready(function() {
            timer(60);
        });
        // OTP Timer
        let timerOn = true;

        function timer(remaining) {
            var m = Math.floor(remaining / 60);
            var s = remaining % 60;

            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            document.getElementById('timer').innerHTML = m + ':' + s;
            remaining -= 1;

            if (remaining >= 0 && timerOn) {
                setTimeout(function() {
                    timer(remaining);
                }, 1000);
                return;
            }

            $('#otp-timer').hide();
            $("#resend-otp").prop('disabled', false);
        }

        function inputInsideOtpInput(el) {
            if (el.value.length > 1) {
                el.value = el.value[el.value.length - 1];
            }
            try {
                if (el.value == null || el.value == "") {
                    this.foucusOnInput(el.previousElementSibling);
                } else {
                    this.foucusOnInput(el.nextElementSibling);
                }
            } catch (e) {
                console.log(e);
            }
        }

        function foucusOnInput(ele) {
            ele.focus();
            let val = ele.value;
            ele.value = "";
            setTimeout(() => {
                ele.value = val;
            })
        }
        if ("{{ session('success') }}") {
            Swal.fire({
                icon: 'success',
                text: "{{ session('success') }}",
            })
        }
    </script>
@endsection