@extends('layouts.app')
@section('content')
<style>
    /* @import url("https://fonts.googleapis.com/css?family=Raleway:200"); */
    @import url("https://fonts.googleapis.com/css?family=Raleway:200");
    @import url("https://fonts.googleapis.com/css2?family=Padyakke+Expanded+One&display=swap");
    /* <link href="https://fonts.googleapis.com/css2?family=Padyakke+Expanded+One&display=swap" rel="stylesheet">.*/
    .digit-group input {
        width: 32px !important;
        height: 50px !important;
        background-color: #ededed !important;
        border: 1px solid;
        line-height: 50px !important;
        text-align: center !important;
        font-size: 15px !important;
        /* font-family: 'Padyakke Expanded One', cursive; */
        font-weight: 900 !important;
        color: black !important;
        margin: 0 2px !important;
        border-radius: 4px;
    }
    .digit-group .splitter {
        padding: 0 1px !important;
        color: #110f02 !important;
        font-size: 14px !important;
    }
    .prompt {
        margin-bottom: 20px !important;
        font-size: 20px !important;
        color: #0572b9 !important;
        text-align: center;
        /* font-family: 'Padyakke Expanded One', cursive; */
        font-family: "Raleway", sans-serif;
        font-weight: 600;
    }
    .by-cnt {
        /* background-color: #0f0f1a; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .customBtn {
        border-radius: 0px;
        padding: 10px;
        text-transform: uppercase;
        letter-spacing: 0.2em;
    }
    p.sub-title {
        color: #000;
        font-size: 14px;
        margin-bottom: 25px;
        text-align: center;
        /*font-family: "Raleway", sans-serif;*/
        font-weight: 600;
    }
    .sub-title {
        color: #000;
        font-size: 14px;
        margin-bottom: 15px;
        text-align: center;
        /*font-family: "Raleway", sans-serif;*/
        font-weight: 600;
    }
    p span.phone-number {
        display: block;
        color: #093030;
        font-weight: 600;
        font-family: "Raleway", sans-serif;
        font-weight: 600;
    }
    .alert.alert-success {
        border: 1px solid rgba(36, 241, 6, 0.46);
        background-color: rgb(7 149 66 / 0%);
        box-shadow: 0px 0px 2px #259c08;
        color: #0ad406;
        text-shadow: 2px 1px #00040a1c;
        transition: 0.5s;
        cursor: pointer;
    }
    .alert.alert-success:before {
        content: '';
        position: absolute;
        width: 0;
        height: calc(100% - 44px);
        border-left: 1px solid;
        border-right: 2px solid;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        height: 20px;
    }
    .alert>.start-icon {
        margin-right: 5px;
    }
    .alert>.start-icon {
        margin-right: 0;
        min-width: 20px;
        text-align: center;
    }
    .alert-simple.alert-success {
        border: 1px solid rgba(36, 241, 6, 0.46);
        background-color: rgba(7, 149, 66, 0.12156862745098039);
        box-shadow: 0px 0px 2px #259c08;
        color: #0ad406;
        text-shadow: 2px 1px #00040a;
        transition: 0.5s;
        cursor: pointer;
    }
    .toast {
        text-align: left;
        padding: 21px 0;
        background-color: #fff;
        border-radius: 4px;
        max-width: 500px;
        top: 0px;
        position: relative;
        box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.2);
    }
    .toast:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .toast__icon {
        position: absolute;
        top: 50%;
        left: 22px;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        padding: 7px;
        border-radius: 50%;
        display: inline-block;
    }

    .toast__type {
        color: #3e3e3e;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 8px;
    }

    .toast__message {
        font-size: 14px;
        margin-top: 0;
        margin-bottom: 0;
        color: #878787;
    }

    .toast__content {
        padding-left: 70px;
        padding-right: 60px;
    }

    .toast--green:before {
        background-color: #2BDE3F;
    }

    p.sub-title.otp-mobile-no {
        font-size: 22px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

</style>
<section class="pt-lg-5 pt-md-5 pb-5 bg-blue-c">
    <div class="container">
        <div class="row m-lg-5 m-md-5 m-2 shadow justify-content-center">
            <div class="d-none col-lg-5 bg-color order-lg-1 order-2 d-md-flex align-items-center">
                <img class="img-fluid" src="/images/login.svg" alt="Login">
            </div>
            <div class="col-lg-7 atrangi order-lg-2 order-1 by-cnt rounded rounded-md-0">
                <div class="d-flex align-items-center h-100">
                    <div class="p-lg-5 p-md-5 p-2 w-100 ">
                        <div class="card-body by-cnt">
                            <div>
                                <div class="prompt">
                                    Enter the code sent on your mobile device below to login!
                                </div>
                                <p class="sub-title otp-mobile-no">
                                    {{$phone}}
                                    <a href="/login?phone={{$phone}}" class=""><small><i class="fas fa-pencil-alt" style="font-size:small;" title="Change Phone Number"></i> </small></a>
                                </p>
                            </div>
                            @if (session('status'))
                            <div class="mb-2" role="alert">
                                <i class="start-icon far fa-check-circle faa-tada animated" aria-hidden="true"></i> {{session('status')}}
                            </div>
                            @endif
                            @if (session('error'))
                            <div class="mb-2" role="alert">
                                <i class="start-icon far fa-times-circle faa-tada animated" aria-hidden="true"></i> {{session('error')}}
                            </div>
                            @endif
                            <form method="post" class="digit-group" data-group-name="digits" data-autosubmit="false" autocomplete="off" action="{{ route('otp.getlogin') }}">
                                @csrf

                                <input type="hidden" name="phone" value="{{$phone}}" />
                                <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 1);" autofocus id="digit-1" name="digit-1" data-next="digit-2" />
                                <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 1);" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" />
                                <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 1);" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" />
                                <span class="splitter">&ndash;</span>
                                <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 1);" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" />
                                <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 1);" id="digit-5" name="digit-5" data-next="digit-6" data-previous="digit-4" />
                                <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 1);" id="digit-6" name="digit-6" data-previous="digit-5" />

                                <p class="sub-title mb-0">
                                    <div class="wrap-countdown mercado-countdown sub-title" data-expire="{{ Carbon\Carbon::parse($expire_at)->format('i:s') }}"></div>
                                </p>
                                <p class="sub-title  mb-0">
                                    <button type="button" class="btn btn-link d-none" id="resendBtn">Resend OTP</button>
                                </p>

                                <div class="by-cnt">
                                    <div class="">
                                        <button type="submit" class="bedlogbtn">
                                            {{ __('Confirm And Login') }}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    jQuery(document).ready(function() {
        jQuery('.toast__close').click(function(e) {
            e.preventDefault();
            var parent = $(this).parent('.toast');
            parent.fadeOut('slow', function() {
                $(this).remove();
            });
        });
    });
    $('.digit-group').find('input').each(function() {
        $(this).attr('maxlength', 1);
        $(this).on('keyup', function(e) {
            const parent = $($(this).parent());
            console.log(e);
            if (e.keyCode === 8 || e.keyCode === 37) {
                const prev = parent.find('input#' + $(this).data('previous'));

                if (prev.length) {
                    $(prev).select();
                }
            } else if ((e.keyCode >= 48 && e.keyCode <= 57 && !isNaN(e.key)) ||
                (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
                const next = parent.find('input#' + $(this).data('next'));

                if (next.length) {
                    $(next).select();
                } else {
                    if (parent.data('autosubmit')) {
                        parent.submit();
                    }
                }
            }
        });
    });

</script>
@endsection
@section('extras')
<script>
    $(document).ready(function() {
        const resendBtn = document.getElementById('resendBtn');
        const otpInput = $('#otpInput');
        let countdownInterval;

        const startCountdown = function() {
            let timer = 60; // 2 minutes in seconds

            countdownInterval = setInterval(function() {
                const minutes = Math.floor(timer / 60);
                const seconds = timer % 60;
                const formattedTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
                $('.mercado-countdown').html('Resend Authorization Code in ' + formattedTime);

                if (timer <= 0) {
                    clearInterval(countdownInterval);
                    $('.mercado-countdown').html('');
                    resendBtn.classList.remove('d-none'); // Show the Resend OTP button after the timer expires
                }

                timer--;
            }, 1000);
        };

        startCountdown();

        const resendOTP = function() {
            const otpValue = otpInput.val();
            // Replace the URL and options with your actual API endpoint and options
            const phone = document.querySelector('.otp-mobile-no').textContent;
            fetch(`/otp/${phone}`, {
                    method: 'POST'
                    , headers: {
                        'Content-Type': 'application/json'
                    , }
                    , body: JSON.stringify({
                        _token: "{{ csrf_token()}}"
                    })
                , })
                .then(response => response.json())
                .then(data => {
                    resendBtn.classList.add('d-none'); // Hide the Resend OTP button after clicking
                    clearInterval(countdownInterval); // Clear the countdown interval
                    startCountdown(); // Start the 2-minute countdown after successful response

                    document.querySelectorAll('[role="alert"]').forEach(element => {
                        element.classList.add('d-none')
                    });

                    const htmlValue = `<div class="mb-2 text-center" role="alert">
                                                <i class="start-icon far fa-check-circle faa-tada animated" aria-hidden="true"></i>
                                                ${data.message}
                                            </div>`;

                    const form = document.querySelector('.otp-mobile-no');
                    form.insertAdjacentHTML('beforebegin', htmlValue);
                })
                .catch(error => {
                    console.error('Error resending OTP', error);
                });
        };

        resendBtn.addEventListener('click', function() {
            resendOTP();
        });
    });

</script>
@endsection