@extends('frontend.layouts.app')
@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;
}
.content .image{
    /* width:250px;
    height:250px; */
}
.containers .panel{
    align-items: center;
}
.content .img{
    width:300px;
}
@media screen and (max-width:400px){
    .content .img{
    width:250px;
}
}
@media screen and (max-width:700px){
    .d{
        flex-direction:column;
    }
}
</style>
@endpush
{{-- <section class="login-sec bg-background">
    <!-- <div class="container">
        <div class="row">
            <div class="col-lg-6 ">
                <div class="login-box">
                    <h3 class="text-primary text-center">{{ __('Login') }}</h3>
                    @if (session()->has('status'))
                        <div class="alert alert-success" role="alert">
                            {{ __('A verification link has been sent to your email address.') }}
                        </div>
                    @endif
                    @include('common.alert')
                    <form method="POST" action="{{ route('fe.login') }}">
                        @csrf
                        <div class="form-group">
                            <label for="inputEmail">Email address</label>
                            <input id="inputEmail" type="email" placeholder="Enter email" class="form-control @error('email') is-invalid @enderror" name="email" @if(cookie::has('student_username')) value="{{ Cookie::get('student_username')}}" @endif required autocomplete="off">
                        </div>
                        <br/>
                        <div class="form-group">
                            <label for="inputPassword">Password</label>
                            <input id="inputPassword" type="password" placeholder="Password" class="form-control @error('password') is-invalid @enderror" name="password" @if(cookie::has('student_password')) value="{{ Cookie::get('student_password')}}" @endif required autocomplete="off">
                        </div>
                        <br/>
                        <div class="row text-center">
                            <div class="col-lg-6">
                                <div class="form-group form-check">
                                    <input type="checkbox" name="remember" value="1" class="form-check-input" id="exampleCheck1">
                                    <label class="form-check-label" for="exampleCheck1">Remember Me</label>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <a href="{{ route('fe.password.request') }}" class="text-secondary">Forgot password ?</a>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <div class="social-btn text-center">
                        <span>Or Sign in with Social</span>
                        <div class="col-md-auto ">
                            <a href="{{ route('fe.auth.redirect', 'facebook') }}" >
                                <img src="{{asset('themes/default/images/f.svg')}}" alt="images" class="img-fluid">
                            </a>
                            <a href="{{ route('fe.auth.redirect', 'google') }}" >
                                <img src="{{asset('themes/default/images/g.svg')}}" alt="images" class="img-fluid">
                            </a>
                            <a href="{{ route('fe.auth.redirect', 'linkedin') }}" >
                                <img src="{{asset('themes/default/images/in.svg')}}" alt="images" class="img-fluid">
                            </a>
                        </div>
                        <p>Not Registered yet? <a href="{{ route('fe.register') }}" class="text-secondary">Create an Account</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 login-image">
                <div class="">
                    <img src="{{asset('themes/default/images/login-img.png')}}" alt="logo" class="img-login-box"> 
                </div>
            </div>
        </div>
    </div> -->
    
	<div class="container p-5">
        <div class="row gy-5">
            <div class="col-lg-6 col-sm-12">
            <lottie-player class="" src="{{ asset('assets/b2c_lottie/login.json') }}" background="transparent"  speed="1" loop autoplay></lottie-player>
            </div>
		<div class="col-lg-6 col-sm-12 login-content">
                    @if (session()->has('status'))
                        <!-- <div class="alert alert-success" role="alert">
                            {{ __('A verification link has been sent to your email address.') }}
                        </div> -->
                    @endif
                    @include('common.alert')
			<!-- <form method="POST" action="{{ route('fe.login') }}">
			@csrf
				<img src="{{asset('assets/login-avatar.svg')}}">
				<h2 class="title">Welcome</h2>
           		<div class="input-div one">
           		   <div class="i">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--color-primary)" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>

           		   </div>
           		   <div class="div">
           		   		<h5>Username</h5>
           		   		<input type="text" class="input" autocomplete="off">
           		   </div>
           		</div>
           		<div class="input-div pass">
           		   <div class="i"> 
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--color-primary)" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                        </svg>
           		   </div>
           		   <div class="div">
           		    	<h5>Password</h5>
           		    	<input type="password" class="input" autocomplete="off">
            	   </div>
            	</div>
                <div class="d-flex justify-content-between">
            	<a href="{{ route('fe.password.request') }}">Forgot Password?</a>
                <a href="{{ route('fe.register') }}">Create an Account</a>
                </div>
            	<input type="submit" class="btn" value="Login">
            </form> -->
			<form method="POST" action="{{ route('fe.login') }}">
                        @csrf
						<img src="{{asset('assets/login-avatar.svg')}}">
						<h2 class="title">Welcome</h2>
                        <div class="form-group">
                            <label for="inputEmail">Email address</label><br/>
                            <input id="inputEmail" type="email" placeholder="Enter email" class="input @error('email') is-invalid @enderror" name="email" @if(cookie::has('student_username')) value="{{ Cookie::get('student_username')}}" @endif required autocomplete="off">
                        </div>
                        <br/>
                        <div class="form-group">
                            <label for="inputPassword">Password</label><br/>
                            <input id="inputPassword" type="password" placeholder="Password" class="input @error('password') is-invalid @enderror" name="password" @if(cookie::has('student_password')) value="{{ Cookie::get('student_password')}}" @endif required autocomplete="off">
                        </div>
                        <br/>
                        <div class="row text-center">
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group form-check">
                                    <input type="checkbox" name="remember" value="1" class="form-check-input" id="exampleCheck1">
                                    <label class="form-check-label" for="exampleCheck1">Remember Me</label>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <a href="{{ route('fe.password.request') }}" class="">Forgot password ?</a>
                            </div>
                        </div>
                        <button type="submit" class="default-btn my-3">Submit</button>
						<p>Not Registered yet? <a href="{{ route('fe.register') }}" class="text-secondary">Create an Account</a></p>
                    </form>
            </div>
        </div>
    </div>
</section> --}}


<div class="d-none">
@include('frontend.common.header')
</div>
<div class="containers">
		<div class="forms-containers">
			<div class="signin-signup">
				<form method="POST" action="{{ route('fe.login') }}" class="sign-in-form">

                     @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">Sign in</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="inputEmail" placeholder="Email" class="@error('email') is-invalid @enderror" name="email" @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 class="input-field">
                        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
                            <path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>
						<input type="password" id="inputPassword" placeholder="Password" class="@error('password') is-invalid @enderror" name="password" @if(cookie::has('student_password')) value="{{ Cookie::get('student_password')}}" @endif required autocomplete="off" maxlength="28"/>
                        <i class="show-password fa fa-fw fa-eye-slash"></i>
                        @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                    </div>
                        <div class="d-flex gap-md-5 gap-3 flex-wrap">
                            <div class="">
                                <div class="form-group form-check">
                                    <input type="checkbox" name="remember" value="1" class="form-check-input" id="exampleCheck1" >
                                    <label class="form-check-label dt-p-w" for="exampleCheck1">Remember Me</label>
                                </div>
                            </div>
                            <div class="">
                                <a href="{{ route('fe.password.request') }}" class="text-secondary dt-p-w">Forgot password</a>
                            </div>
                        </div>
					<button type="submit" class="default-btn">Login</button>
				</form>
			</div>
		</div>

		<div class="panels-containers container-fluid">
			<div class="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>
                    <!-- <div class="py-4">
                        <img  src="{{ asset('assets/b2c_img/plus-01.png') }}" class="img" alt="img"/>
                    </div> -->
                    <div class="d d-flex justify-content-center gap-2">
                        <a href="/register">
                            <button class="my-1 btn " id="sign-up-btn">
                            Sign up
                        </button>
                        </a>
                        <a href="/">
                            <button class="my-1 btn" id="sign-up-btn">
                            Home
                        </button>
                        </a>
                    </div>	
				</div>
                <!-- <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="{{ asset('assets/knewton_front/js/main.js') }}"></script>
@endpush