@extends('layouts.appInnerWithoutSearch')
@section('title')
    Login
@endsection
@section('contentInner')
    <div class="grid grid-cols-1 md:grid-cols-2 bg-white shadow-md rounded-lg mx-auto overflow-hidden">
        <section class="bg-white 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-red-800 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"
                                class="text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
                                placeholder="Enter your registered email id" />
                        </div>
                        <div>
                            <x-password label="Password" type="password" name="password" id="password"
                            class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500"
                            placeholder="Enter your password" />
                        </div>
                        <div>
                            <label for="remember" class="mb-2 font-medium text-gray-900">
                                <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>
                        <button type="submit"
                            class="py-2 px-5 w-full font-medium text-center text-white rounded-lg bg-blue-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 ">Login</button>
                        <div class="text-right">
                            @if (Route::has('password.request'))
                                <a class="mb-2 font-medium text-blue-500" href="{{ route('password.request') }}">
                                    {{ __('Forgot Your Password?') }}
                                </a>
                            @endif
                            <br>
                            Not A Member Yet?
                            <a class="mb-2 font-medium text-blue-500" href="{{ route('register') }}">
                                {{ __('Register') }}
                            </a>
                        </div>
                    </form>
                </div>
                <div class=" my-7">
                    <hr class="">
                    <div class="flex justify-center -mt-4 opacity-70 bg-white px-7 text-xl w-10 mx-auto">or</div>
                </div>
                <div class="px-4 max-w-[300px] h-full space-x-6 flex justify-center">
                    <div id="g_id_onload"
                        data-client_id="1075327356884-top50letglitekjmibclh870v9qrl5kq.apps.googleusercontent.com"
                        data-context="signin" data-ux_mode="popup" data-login_uri="https://jobshubharambh.com/login/google"
                        data-auto_prompt="false">
                    </div>

                    <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline"
                        data-text="signin_with" data-size="large" data-logo_alignment="left">
                    </div>
                    {{-- <a href="{{ route('login.google') }}">
            <button href="#" type="button" class="login-with-btn w-full bg-white mt-5 border-2">
                <i class="google"></i>
                Sign in with Google
            </button>
        </a> --}}

                    <script>
                        function checkLoginState() { // Called when a person is finished with the Login Button.
                            FB.getLoginStatus(function(response) { // See the onlogin handler
                                statusChangeCallback(response);
                            });
                        }

                        function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
                            // console.log('statusChangeCallback');
                            if (response.status === 'connected') { // Logged into your webpage and Facebook.
                                console.log(response); // The current login status of the person.
                                window.location.href = "https://jobshubharambh.com/login/facebook";
                            } else { // Not logged into your webpage or we are unable to tell.
                            }
                        }
                        window.fbAsyncInit = function() {
                            FB.init({
                                appId: '1460692294701057',
                                cookie: true,
                                xfbml: true,
                                version: 'v17.0'
                            });
                            FB.AppEvents.logPageView();
                            // FB.getLoginStatus(function(response) {
                            //     statusChangeCallback(response);
                            // });
                        };

                        (function(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement(s);
                            js.id = id;
                            js.src = "https://connect.facebook.net/en_US/sdk.js";
                            fjs.parentNode.insertBefore(js, fjs);
                        }(document, 'script', 'facebook-jssdk'));
                    </script>
                    <div class="fb-login-button" data-width="210" data-size="large" data-button-type="" data-layout=""
                        data-auto-logout-link="false" data-use-continue-as="true" onlogin="checkLoginState();"></div>
                    {{-- <a href="{{ route('login.facebook') }}">
                    <button href="#" type="button" class="login-with-btn w-full bg-white mt-5 border-2">
                        <i class="fab fa-2xl text-blue-500 fa-facebook mr-2 mt-3"></i>
                        Sign in with Facebook
                    </button>
                </a> --}}
                    {{-- <a href="{{ route('login.facebook') }}">
            <button href="#" type="button" class="login-with-google-btn w-full bg-white mt-5 border-2">
                Sign in with Facebook
            </button>
        </a> --}}
                    {{-- <x-link-button  href="{{ route('login.google') }}" type="button" class="w-full login-with-google-btn">
                Sign in with Google
            </x-link-button> --}}
                    {{-- <x-link-button  href="{{ route('login.facebook') }}" type="button" class="w-full text-slate-500 bg-white hover:bg-[#3b5998]/90 focus:ring-4 focus:outline-none focus:ring-[#3b5998]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 mr-2 mb-0">
            <svg class="w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
              <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd"/>
            </svg>
            Sign in with Facebook
          </x-link-button> --}}

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

                    <h3 class="text-4xl text-center">Why Sign In?</h3>
                    <ul class="text-xl text-slate-200 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