@extends('frontend.layouts.app_otp')
@section('title', 'Login')
@section('content')
@php
use Illuminate\Support\Facades\Cookie;
@endphp
@push('style')
<style>

.show-password {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 25px;
    color: black !important;
}
</style>
@endpush
<div class="d-none">
        <div class="darkLight">
                <div class="dark-light" id="theme-toggle">
                    <i class='bx bx-moon moon'></i>
                    <i class='bx bx-sun sun'></i>
                </div>
          </div>
</div>
<div class="containers">
		<div class="forms-containers">
			<div class="signin-signup">
				{{--<form method="POST" action="{{ route('fe.student.studentOTP') }}" class="sign-in-form"> --}}
                <form id="myForm">
                     @if (session()->has('status'))
                        <div class="alert alert-success" role="alert">
                            {{ __('A verification link has been sent to your email address.') }}
                        </div>
                    @endif
                @csrf	
                <h2 class="title">Verify Your OTP</h2>
                    @include('common.alert')
					<div class="input-field">
                        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                            <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>
						<input type="text" id="otp" placeholder="Enter OTP" class="@error('OTP') is-invalid @enderror" name="otp" @if(cookie::has('student_username')) value="{{ Cookie::get('student_username')}}" @endif required autocomplete="off" />
                        @error('mail')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                    </div>
                    <div id="message" class="alert alert-danger mt-3" style="display: none;"></div>
					<button type="submit" class="default-btn">Verify</button>
                     
				</form>
			</div>
		</div>

		<div class="panels-containers container-fluid">
			<div class="panel left-panel">
				<div class="content">
					<h3 class="text-secondary">New User ?</h3>
					<p>
                    Welcome back! Sign in to your account to pick up where you left off.
					</p>
					<a href="/register">
                        <button class="my-1 btn transparent" id="sign-up-btn">
                        Sign up
					</button>
                    </a>
                    <a href="/" id="back-to-home-btn">
                        <button class="my-1 btn transparent">Back to Home</button>
                    </a>
				</div>
				<!-- <img src="{{ asset('assets/b2c_img/login_img.svg') }}" class="image" alt="img"/> -->
                <lottie-player class="lottie_img"src="{{ asset('assets/b2c_lottie/login_in.json') }}" background="transparent"  speed="1"  loop autoplay></lottie-player>
            </div>
		</div>
	</div>

@include('frontend.block.subscribe')

@endsection
@push('script')
<script>
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const containers = document.querySelector(".containers");

sign_up_btn.addEventListener("click", () => {
  containers.classList.add("sign-up-mode");
});

sign_in_btn.addEventListener("click", () => {
  containers.classList.remove("sign-up-mode");
});
</script>
<script>
    $(".show-password").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    input = $(this).parent().find("input");
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('#myForm').on('submit',function(e){
        e.preventDefault();
        var otp_code = $('#otp').val();
        var _token = "{{ csrf_token() }}";
    $.ajax({
        url: "{{ route('fe.student.studentOTP') }}",
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:"POST",
        data:{
            otp:otp_code,
            user_id: {{user()->id}},
            _token: '{{csrf_token()}}',
        },
        success:function(response){
            if(response.status == 'success'){
                window.location = "{{route('fe.index')}}";
                // window.location.reload(true); 
            } else {
                // document.getElementById('message').innerHTML = "<font color='red'>Incorrect OTP</font>";
                $('#message').html("<strong>Incorrect OTP</strong>").show();
            }
           
        },
        error: function(response) {
            // document.getElementById('message').innerHTML = "<font color='red'>Incorrect OTP</font>";
            $('#message').html("<strong>Incorrect OTP</strong>").show();
        },
      });

    });

</script> 
<script src="{{ asset('assets/knewton_front/js/main.js') }}"></script>
@endpush