@extends('layouts.auth')
@section('title')
    {{ __('Login Admin Panel') }}
@endsection
@section('content')
    <form action="{{ route('admin.auth.otp_submit') }}" method="post" class="validate-form">

        <span class="login100-form-title p-b-43">
            {{ __('Enter Confirmation Code') }}
        </span>
        <input class="input100" type="hidden" name="user_id" id="otp" value="{{ $user_id }}">


        <p id="timer" class="float-right mr-2"></p><span id="timer_label" class="float-right mr-2">The confirmation code will
            expire in </span>
        <div class="wrap-input100 validate-input @if ($errors->has('email')) error-validation @endif">
            <input class="input100" type="number" name="otp" id="otp" value="{{ old('otp') }}" maxlength="6"
                required>
            <span class="focus-input100"></span>
            <span class="label-input100">{{ __('Code') }}</span>
        </div>


        <div class="container-login100-form-btn">
            <button class="login100-form-btn" type="submit">
                {{ __('Enter') }}
            </button>
        </div>

        <div id="reset_time_time_up">
            
        </div>
    </form>


    <input type="hidden" value="{{ $otp_code->expired_at }}" id="expire_at">
    {{-- <span class="login100-form-title p-b-30 p-t-30">
    <a href="{{url('/')}}"> 
        <h5 class="d-inline">
            <i class="fas fa-user-injured"></i> 
            {{__('Login Client')}}
        </h5>
    </a>
</span> --}}
@endsection

@section('scripts')
    <script>
        (function($) {

            console.log($('#reset_code').val());
            console.log($('#expire_at').val());
            const targetTime = new Date($('#expire_at').val()).getTime();

            function updateTimer() {
                const currentTime = new Date().getTime();
                const timeDifference = targetTime - currentTime;

                // Calculate remaining hours, minutes, and seconds
                const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

                // Display the countdown timer
                const countdown =
                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                $('#timer').text(countdown);

                // Stop the countdown if the target time is reached
                if (timeDifference <= 0) {
                    clearInterval(timerInterval);
                    $('#timer').text('Time is up!');
                    $('#timer_label').text('');
                    $('#reset_time_time_up').append(`
                    <a href="" class="float-right">Regenerate Code</a>
                    `);
                }
            }

            // Update the timer immediately
            updateTimer();

            // Update the timer every second
            const timerInterval = setInterval(updateTimer, 1000);
            // Attach a click event to the reset button
        })(jQuery);
    </script>
@endsection