@extends('layouts.frontend')
@section('content')
    {{-- Loader Call--}}
    <div class="overlay d-none" id="loader">
        <div class="overlay__inner">
            <div class='pac-man'></div>
            <div class="overlay__content d-none"><span class="spinner"></span></div>
        </div>
    </div>
    {{--Loader End--}}
    <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 class="active">
                                        <a href="{{route('register')}}"> {{__trans('new_customer')}}</a>
                                    </li>
                                    <li>
                                        <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('register')}}" method="POST" class="ajax-form-submit-register" redirect>
                                @csrf
                                <input type="hidden" name="referral_code" value="{{$referral_code}}">
                                <div class="steps-box-form-inner">
                                    <div class="form-group">
                                        <label>Name</label>
                                        <input type="text" class="form-control" name="name">
                                    </div>
                                    <div class="form-group">
                                        <label>Email Address</label>
                                        <input type="text" class="form-control" name="email">
                                    </div>
                                    <!-- <div class="form-group">
                                        <label>Phone Number</label>
                                        <input type="text" class="form-control" name="phone">
                                    </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="form-group">
                                        <label>Confirm Password</label>
                                        <input type="password" class="form-control" name="password_confirmation">
                                    </div> -->
                                    <div class="login-terms">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="1" name="refund_policy" id="term-n-condition">
                                                        <label class="form-check-label" for="term-n-condition">I agree to receive discount coupons, exclusive offers, and the latest news by email, SMS, phone, and other electronic</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="1" name="term_n_condition" id="privacy-policy">
                                                        <label class="form-check-label" for="privacy-policy">I agree to the <a href="#">Terms & Conditions</a> and <a href="#">Privacy Policy</a></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="steps-box-bottom-btn-outer">
                                    <button class="btn btn-main w-100">{{__trans('create_Account_&_Sign_In')}}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"  data-backdrop="static" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <img src="{{getLogo()}}" class="logo-img" alt="Logo">
                    <button type="button" class="btn-close btn-close-gk" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4 text-center">
                    <h5>Check Your Inbox</h5>
                    <p>Verification Link has been sent to your email address. <br> Click the link to activate your account.</p>
                </div>
                <div class="text-center">
                    <p>Want to register with another account? <br><a href="{{route('register')}}">Go back to registration</a></p>
                </div>
            </div>
        </div>
    </div>
@endsection