@extends('Admin.layouts.app_login')
@section('title', 'Cheers to the 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 src="{{ asset('public/assets/js/admin/auth/login.js') }}"></script>

@endsection
