@extends('layouts.appInnerWithoutSearch')
@section('seoTitle')
    Login @ {{ env('APP_NAME') }}
@endsection
@section('metaDescription')
Sign In to find jobs matching your skills and customized recommendations to accelerate your career @endsection
@section('title')
    Login
@endsection
@section('contentInner')
<div class="flex justify-start pb-3">
    @include('includes.breadcrumb')
</div>
<div class="grid grid-cols-1 md:grid-cols-2 bg-white dark:bg-opacity-5 shadow-md rounded-lg mx-auto overflow-hidden">
        <section class="p-5">
            {{-- <div class="grid grid-cols-1 md:grid-cols-3"> --}}
            <div class="text-xl text-center mb-5">Welcome to <span class="text-blue-800 dark:text-blue-600 font-medium">JobShubharambh.com</span>!</div>
            {{-- <x-errors></x-errors> --}}
            {{-- @include('errors.error') --}}


            <div class=" mx-auto items-center max-w-[300px]">

                <div class="px-4">
                    {{-- <p class="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">Got a technical issue? Want to send feedback about a feature? Need details about our Business plan? Let us know.</p>
        <div class="mb-6 text-gray-400">
            Fields marked with <span class="text-danger">*</span> are mandatory.
        </div> --}}
                    {{-- @include('errors.error') --}}
                    {{-- @include('errors.response') --}}
                    <form action="{{ route('login') }}" method="POST" class="space-y-3" id="frmLogin1">
                        @csrf
                        <div>
                            <x-input label="Your Email" type="email" name="email" id="email" placeholder="Enter your registered email id" autofocus />
                        </div>
                        <div>
                            <x-password label="Password" type="password" name="password" id="password" placeholder="Enter your password" />
                        </div>
                        <div>

                                <x-checkbox type="checkbox" name="remember" id="remember" label="Remember Me" />

                                {{-- <input type="checkbox" name="remember" id="remember"
                                    class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                Remember Me</label> --}}

                        </div>
                        {{-- <x-button-blue type="submit">Login</x-button-blue> --}}
                        <x-button info type="submit"
                            class="py-2 px-5 w-full font-medium text-center text-white rounded-lg bg-color2-400 hover:bg-color2-600 focus:ring-2 focus:ring-offset-2 focus:ring-color2-600 ">Login</x-button>
                        <div class="text-right">
                            @if (Route::has('password.request'))
                                <a class="mb-2 font-medium text-blue-500" href="{{ route('password.request') }}" wire:navigate>
                                    {{ __('Forgot Your Password?') }}
                                </a>
                            @endif
                            <br>
                            Not A Member Yet?
                            <a class="mb-2 font-medium text-blue-500" href="{{ route('register') }}" wire:navigate>
                                {{ __('Register') }}
                            </a>
                        </div>
                    </form>
                </div>
                <div class=" mt-7">
                    <hr class="dark:opacity-10">
                    <div class="flex justify-center -mt-4 bg-white dark:rounded-full dark:bg-opacity-0  px-7 text-xl w-10 mx-auto">or</div>
                </div>
                <div class="px-4 max-w-[300px] h-full grid grid-cols-1">
                    <a href="{{ route('login.google') }}">
            <button type="button" class="login-with-btn w-full items-center bg-white mt-5 border-2 justify-center">
                <i class="google"></i>
                Sign in with Google
            </button>
        </a>
<a href="{{ route('login.facebook') }}">
                    <button href="#" type="button" class="login-with-btn w-full bg-white mt-5 border-2 items-center justify-center">
                        <i class="fab fa-2xl text-blue-500 fa-facebook mr-2 mt-3"></i>
                        Sign in with Facebook
                    </button>
                </a>

                </div>
            </div>
        </section>
        <div class="bgLogin">
            <div class="bg-gray-200 bg-opacity-50 dark:bg-opacity-5 w-full h-full p-10 text-white flex items-center justify-center">
                <div class="space-y-5 text-black dark:text-white dark:text-shadow dark:shadow-gray-950">

                    <h3 class="text-4xl text-center">Why Sign In?</h3>
                    <ul class="text-xl space-y-6 text-center">
                        <li>
                            Jobs to match your skills
                        </li>
                        <li>
                            Customized recommendations to
                            accelerate your career
                        </li>
                        <li>
                            Mentors & Blogs to motivate you
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
@endsection
@push('custom-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js" type="module"></script>
    <script type="module">
    $(document).ready(function() {
        $("#frmLogin").validate({
            rules: {
            email: {
                required: true,
                email: true,
            },
            password: {
                required: true,
            },
        },
        messages: {
            email: {
                required: "Email is required",
                email: "Email must be a valid email address",
            },
            password: {
                required: "Password is required",
            },
        },
    });
    });
</script>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script type="module">
        $(".toggle-password").click(function() {

$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
  input.attr("type", "text");
} else {
  input.attr("type", "password");
}
});
    </script>
@endpush