@extends('Admin.layouts.app_login')
@section('title', 'Cheers To Season - Otp')
@section('content')
<div class="row w-100" style="height: 100vh;">
    <div class=" col-md-6 m-auto h-100 d-flex flex-column align-itms-center justify-content-center"
            style="background-color: #05244D;">
            <div class="d-flex justify-content-center">
                <img src="{{ asset('public/assets/img/seasons_logo.png')}}" width="150" height="150" alt="">
            </div>
        </div>
        <div class=" col-md-6 h-100 d-flex justify-content-center align-items-center login-background-img"
            style="background-image: url(public/assets/img/login_screen_background.png);">
            <div class="row d-flex flex-column justify-content-center align-items-center m-auto"
                style="width: 60%; z-index: 999;">
                <h4 class="text-start font-weight-bold text-white">VERIFICATION CODE</h4>
                <h5 class="text-white mb-3">Please enter the OTP</h5>
                <form id="otpVerificationForm">
                <div class="col-sm-12  bgWhite">
                        <input type="hidden" name="time" value="{{ session('admin_data.valid_till') }}">
                        <input type="hidden" id="admin_otp_id" name="id" value="{{ session('admin_data.principal_xid') }}">
                        <input class="otp" type="text" name="digit1" maxlength="1">
                        <input class="otp" type="text" name="digit2" maxlength="1">
                        <input class="otp" type="text" name="digit3" maxlength="1">
                        <input class="otp" type="text" name="digit4" maxlength="1">
                </div>
                <div class="col-md-12">
                    <div>
                        <button type="submit" id="otp_verify_button" class="download-btn w-100">Submit</a></button>
                    </div>
                </div>
            </form>
            </div>
        </div>
</div>

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
$(document).on('click', '#otp_verify_button', function(e) {
    e.preventDefault();

    // Get base URL
    let base_url = url_path;

    // Get admin ID
    var id = $('#admin_otp_id').val();

    // Get OTP by concatenating values of all OTP input fields
    var otp = $('.otp').map(function() {
        return this.value;
    }).get().join('');
    
    if (otp === '') {
        toastr.error('Please enter OTP');
        return;
    }
    // Send AJAX request for OTP verification
    $.ajax({
        url: base_url + '/otp_verify',
        type: 'POST',
        data: {
            id: id,
            otp: otp,
            '_token': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
            if (response.status_code == 200) {
                // Display success message
                toastr.success('Otp Verify Successfully');
                // Redirect to the dashboard after a delay
                setTimeout(function () {
                    window.location.href = base_url + "/password_reset";
                }, 1000);
            } else if (response.status == 401) {
                toastr.error(response.message);
            } else {
                toastr.error(response.message);
            }
        },
    });
});


$(document).on('input', '.otp', function() {
    this.value = this.value.replace(/[^0-9]/g, '');

    if (this.value.length >= this.maxLength) {
        $(this).next('.otp').focus();
    }
});
</script>
@endsection
