@extends('layouts.frontend')
@section('content')
<div class="wrapper login-page">
    <div class="container">
        <div class="order-steps-section">
            <div class="steps-box-outer">
                <div class="steps-box active">
                    <div class="steps-box-inner">
                        <div class="section-title">
                            <h2>Sign in to your account</h2>
                            <p>Our all-in-one academic writing service is just one click away!</p>
                        </div>
                        <div class="login-tabs">
                            <ul>
                                <li>
                                    <a href="{{route('register')}}"> {{__trans('new_customer')}}</a>
                                </li>
                                <li class="active">
                                    <a href="{{route('login')}}">{{__trans('returning_customer')}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="login-with">
                            <div class="row">
                                <div class="col-md-12 ps-lg-4 ps-md-3">
                                    <a href="{{route('social.login','google')}}" class="btn btn-main btn-black w-100">
                                        <img src="{{asset('assets/frontend/images/icon-google.png')}}" class="img-fluid">
                                        {{__trans('sign_In_With_Google')}}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="form-title-center">
                            <label><strong>Or</strong></label>
                        </div>
                        <form action="{{route('login')}}" method="POST" class="ajax-form-submit" redirect>
                            @csrf
                            <div class="steps-box-form-inner">
                                <div class="form-group">
                                    <label>Email Address</label>
                                    <input type="text" class="form-control" name="email">
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <input id="password-field" type="password" class="form-control" name="password">
                                    <span toggle="#password-field" class="fa fa-fw fa-eye-slash field-icongk toggle-password"></span>
                                </div>
                                <div class="login-forget">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1">
                                                    <label class="form-check-label" for="flexCheckDefault1">Remember me</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group text-md-end">
                                                <label><a href="{{ route('frontend.forgot-password-modal') }}" class="btn">Forgot Password?</a></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="steps-box-bottom-btn-outer">
                                <button class="btn btn-main w-100">Login</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection