@extends('layouts.app')

@section('content')
    <style>
        .otp-input input {
            width: 45px;
            margin-right: 13px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-weight: 700;
            font-size: 18px;
            border-radius: 15px;
            border: #F7F7F7 1px solid;
            background: #F7F7F7;
            outline: none;
            color: #031912;
            margin-top: 10px
        }

        .otp-input input:focus {
            border: 1px solid #48a35a;
        }

        .otp-input input::placeholder {
            color: transparent
        }

        .otp-input input:not(:placeholder-shown) {
            border: 1px solid #48a35a;
        }
    </style>
    <section class="pay-booking py-4 py-sm-5">
        <div class="container">
            <div class="row align-items-end">
                <div class="col-md-8">
                    <div class="top-head">
                        <h2>Verify your {{ $type }}</h2>
                        <p class="top-sub-ttile mb-0">Enter the otp to verify your {{ $type }}</p>
                    </div>
                </div>
                <div class="col-md-4 text-sm-right mt-2">
                    {{-- <button type="button" class="btn-md px-3 py-2 btn-primary" role="button" data-request="ajax-submit"
                        data-target="[role=post-data]"><i class="fa fa-check-square-o"></i>
                        {{ __('static.verify_otp') }}</button> --}}
                    {{-- <button class="btn-md px-3 py-2 btn-secondary" type="button" tabindex="4" id="resend-otp" disabled
                        data-request="resend-otp" data-target="[role=resend-otp]">{{ __('static.resend_otp') }}
                    </button> --}}
                </div>
            </div>
        </div>
    </section>
    <section class="py-2 py-sm-4">
        <div class="container">
            <form class="auth-login-form mt-2" method="POST" action="{{ route('verify-email-mobile') }}">
                @csrf
                <div class="row">
                    <div class="row mt-2 mt-sm-4">
                        <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="col-md-6 col-12">
                            <div class="form-group custominnergroup">
                                <label class="mb-0">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>
                            </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 class="text-left mt-2" id="otp-timer">
                                <p>{{ __('static.resend_otp_in') }} <span id="timer">00:00</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <button type="submit" class="btn-md px-3 py-2 btn-primary"><i class="fa fa-check-square-o"></i>
                        {{ __('static.verify_otp') }}</button>
                    <br>
                    <button type="button" class="btn-md px-3 py-2 ml-2 btn-secondary" tabindex="4" id="resend-otp"
                        data-request="ajax-submit" data-target="[role=resend-otp]" disabled>{{ __('static.resend_otp') }}
                    </button>

                </div>
            </form>

            <form class="form" role="resend-otp" method="POST" action="/api/resend-verification-code"
                redirect="{{ url('/verify-email-mobile-request/' . $type . '/' . $user_id) }}">
                <input type="hidden" name="token" value="{{ $token }}" />
                <input type="hidden" name="type" id="type" value="{{ $type }}">
            </form>
        </div>
    </section>
@endsection

@section('script')
    <script>
        $(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