@extends('layouts.app')
@section('title', 'Webqlo')
@section('content')
<div class="container vh-100">
    <div class="row justify-content-center h-100 align-items-center">
        <div class="col-xl-8 col-lg-9 col-12">
            <div class="card">
                <div class="card-header text-center fs-1 fw-bold">{{ config('app.name', 'Laravel') }}</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                        <div class="mb-4 mx-md-0 row">
                            <label for="email" class="offset-lg-1 col-md-3 col-12 col-form-label">{{ __('Email Address') }}</label>
                            <div class="col-lg-7 col-md-9 col-12">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="mb-4 mx-md-0 row">
                            <label for="password" class="offset-lg-1 col-md-3 col-12 col-form-label">{{ __('Password') }}</label>
                            <div class="col-lg-7 col-md-9 col-12">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mx-md-0 mb-2">
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-purple btn-login">
                                    {{ __('Sign In') }}
                                </button>
                            </div>
                        </div>
                        <div class="row mx-md-0 my-3 d-flex justify-content-center">
                            <div class="col-lg-10 col-12 d-flex align-items-center">
                                <hr class="flex-grow-1 mx-2">
                                <p class="mb-0 px-2">{{ __('OR') }}</p>
                                <hr class="flex-grow-1 mx-2">
                            </div>
                        </div>
                        <div class="row mx-md-0 mb-2">
                            <div class="col-12 d-flex justify-content-center mb-2">
                                <a href="{{ route('google-redirect') }}" class="btn btn-google btn-login d-flex justify-content-center align-items-center">
                                <div class="col-12 d-flex justify-content-center">
                                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" class="d-block" style="width: 20px; margin-right: 10px;">
                                        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                                        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                                        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
                                        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                                        <path fill="none" d="M0 0h48v48H0z"></path>
                                    </svg>
                                    {{ __('Sign in with Google') }}
                                </div>
                                </a>
                            </div>
                        </div>
                        <div class="row mx-md-0">
                            <div class="col-12 text-center">
                            @if (Route::has('password.request'))
                                <a class="btn btn-link btn-wide" href="{{ route('password.request') }}">
                                    {{ __('Forgot Your Password?') }}
                                </a>
                            @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection