@extends('layouts.bare-logo')

@section('content')
<div class="container">
    <div class="col-sm-8 offset-sm-2 my-4 py-3 " id=login-div>
        <div class="d-flex col-sm-8 offset-sm-2  flex-column" id=inner-login-div>
            <h1 class="display-3 text-center py-3">{{ __('Login') }}</h1>
            <a href="{{url('auth/google')}}" class="btn btn-primary border-0  mt-2 py-2 justify-content-center" style="/*background-color: #4c8bf5*/"><img src={{url("/Icons-SVG/Googleicon.svg")}} class="mr-1" style="width:20px;filter:brightness(0) invert(1);margin-top:-3px">Continue with Google
            </a>
            <div class="mt-2">
                <p class="text-center text-muted" style="font-size:12px;line-height:1.9em">
                    Note: You agree to the
                    <a href="{{config('app.website_url')}}/end-user-license-agreement" target="_blank"> Terms and Conditions </a>
                    <br class="d-block d-sm-none">when you sign in</p>
            </div>
            @if (session('source') == "google-login")
            @if(!empty($errors->all()))
            <div class="col-12">
                <div class="alert alert-danger">
                    @foreach ($errors->all() as $error)
                    <span>{{ $error }}</span><br />
                    @endforeach
                </div>
            </div>
            @endif
            @endif

            <div class="text-center mt-2">
                <button class="btn btn-link" onclick="$('#login-with-email').toggle()">Or, Login with your Email</button>
            </div>

            <div class="p-3 card" style="@if(session('source') == " google-login" || empty($errors->all())) display:
                none; @endif" id="login-with-email">
                <form class="mb-3" method="POST" action="{{ route('login') }}">
                    @csrf

                    <div>
                        <label for="email" class="my-1">{{ __('E-Mail Address') }}</label>

                        <div>
                            <div class="position-relative" style="min-height:45px">
                                <input id="email" type="email" style="top:0;left:0" class="form-control position-absolute w-100 pr-4 @if (session('source') != " google-login") @error('email') is-invalid @enderror @endif" name="email" value="{{ old('email') }}" required autocomplete="email" @if (session('source') !="google-login" ) autofocus @endif>
                                @error('email')
                                <span class="btn text-danger" id="btn-close" style="position:absolute;top:0;right:0;border:none;outline:none;background:rgba(0,0,0,0)">
                                    <x-icons.close-icon /></span>
                                @enderror
                            </div>
                            @if (session('source') != "google-login")
                            @error('email')
                            <span class="invalid-feedback" id="error-message" style="display:block" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            @endif

                        </div>

                    </div>

                    <div>
                        <label for="password" class="my-1 mt-2">{{ __('Password') }}</label>

                        <div>
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror form-control-md" name="password" required autocomplete="current-password">
                            @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div>

                        <button type="submit" class="btn btn-secondary btn-block mt-3 py-1">
                            {{ __('Login') }}
                        </button>




                    </div>
                </form>
                @if (Route::has('password.request'))
                <div class="row ml-n5">
                    <a class="btn col-md-8 col-sm-12 pr-0" href="{{ route('password.request') }}">
                        {{ __('Forgot Your Password?') }}
                    </a>
                    <span class="align-items-center col-md-1 d-none d-sm-block mt-1 pl-0">|</span>
                    <a class="btn col-md-3 col-sm-12 pl-md-0" href="{{ url('/register') }}">
                        Sign Up
                    </a>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
    $(window).on('load', () => {
        $('#btn-close').on('click', (e) => {
            $('#email').val('').removeClass('is-invalid');
            $('#error-message').css('display', 'none');
            e.currentTarget.remove();
        })
    })
</script>
@endsection