@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: Login</title>
@endsection


@section('heading')
<!-- Page Heading -->
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content">
                    <a href="/" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1>Sign in</h1>
                    <a href="#" class="btn btn-link hidden">
                        Next <i class="fa fa-angle-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')
<!-- Login Page -->

<!-- Section: Login Block -->
<section class="overflow-hidden login-page">
<div class="container px-4 px-md-5 text-lg-start ">
    <div class="row gx-lg-5 mb-5">
        <!-- Message-->
        @if (session('message'))
        <div class="col-12">
            <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                @if(session('message.type')=='danger')
                <strong>Oops!</strong> {!! session('message.text') !!}
                @else
                <strong>Success!</strong> {!! session('message.text') !!}
                @endif
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        @endif
        <!--end message-->
        <div class="col-lg-6 mb-5 mb-lg-0 position-relative">            

            <div class="card bg-glass">                
                <div class="card-body px-4 py-5 px-md-5">
                    <h3 class="mb-4">Sign in</h3>
                    <div class="mb-4">
                        <a href="{{ route('google.login') }}" class="btn btn-main auth-form-btn flex-grow w-100">
                            <img src="{{asset('public/frontend_assets/images/icon/google.svg')}}" class="mr-2" width="18" height="18"> Login with Google
                        </a>
                    </div> 
                    <div class="py-2">
                        <small class="btn-block text-center my-1 text-uppercase or">or</small>
                    </div>
                    

                    <form id="frmLogin" action="{{route('login.process')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="">Email</label>
                            <input type="text" class="form-control" name="login_username" placeholder="Enter your email" />
                        </div>
                        <div class="form-group mb-0">
                            <label for="">Password</label>
                            <input type="password" class="form-control" name="login_password" placeholder="Password" />
                            
                        </div>
                        <div class="text-right mt-0">
                            <a class="mt-2" href="{{route('forgot.password')}}">Forgot password?</a>
                        </div>
                        <div class="form-group">
                            <label class="checkbox-one">Remember me
                                <input type="checkbox" />
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-block btn-main">Sign in</button>
                        </div>
                        <div class="extra-links mt-2">
                            <a href="{{route('confirmation.mail')}}">Didn't receive confirmation email?</a>
                        </div>                    
                    </form>

                                   
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-5 mb-lg-0 right-sec text-center" style="z-index: 10">
            <h3 class="mt-5 mb-1">Don’t have an account yet?</h3>
            <h4 class="display-5 fw-bold ls-tight mb-5">
                <span style="color: #ffdf87">Register Now - It's Free.</span>
            </h4>
            <div class="register-type">
                <div class="register-option">
                    <img src="{{asset('public/frontend_assets/images/men.png')}}" alt="">
                    <p>
                        Create A Free User Account Now!
                    </p>
                    <a href="{{route('register.user')}}" class="btn btn-block btn-main">
                        <span>
                            <span>Register as</span> User
                        </span>
                    </a>
                </div>
                <div class="register-option">
                    <img src="{{asset('public/frontend_assets/images/women.png')}}" alt="">
                    <p>
                        Get listed as an Escort today!
                    </p>
                    <a href="{{route('register.advertiser')}}" class="btn btn-block btn-main">
                        <span>
                            <span>Register as</span> Escort
                        </span>
                    </a>
                </div>
            </div>
        </div>
        
    </div>
</div>
</section>
<!-- Section: Login Block -->
@endsection

@section('custom_js')
<script>
    $(function() {
        $('#frmLogin').validate({
            rules: {
                login_username: {
                    required: true,
                    email: true,
                },

                login_password: {
                    required: true,
                },

            },
            messages: {
                login_username: {
                    required: "Please enter email",

                },
                login_password: {
                    required: "Please enter password",
                },

            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

    });
</script>
@endsection