@extends('website.layouts.index')
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-6 mx-auto">
                    <div class="login-wrap">
                        <div class="login-header">
                            <h3>Login</h3>
                            {{-- <p>We'll send a confirmation code to your email.</p>
                            <h6>Sign in with <a href="login-phone.html">Phone Number</a></h6> --}}
                        </div>

                        <!-- Login Form -->
                        <form action="{{route('login-process')}}" method="POST">
                            @csrf
                            <div class="log-form">
                                <div class="form-group">
                                    <label class="col-form-label">E-mail</label>
                                    <input type="text" class="form-control" placeholder="example@email.com" name="email" required>
                                    @error('email')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label class="col-form-label d-block">Password</label>
                                    <div class="pass-group">
                                        <input type="password" class="form-control pass-input" placeholder="*************" name="password" required>
                                        <span class="toggle-password feather-eye"></span>
                                    </div>
                                    @error('password')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="char-length">
                                            <p>Must be 6 Characters at Least</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-md-end">
                                            <a class="forgot-link" href="password-recovery.html">Forgot password?</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary w-100 login-btn" type="submit">Login</button>
                            <div class="login-or">
                                <span class="or-line"></span>
                                <span class="span-or">Or, Login with your email</span>
                            </div>
                            {{-- <div class="social-login">
                            <a href="#" class="btn btn-google w-100"><img src="assets/img/icons/google.svg" class="me-2" alt="img">Login with Google</a>
                            <a href="#" class="btn btn-google w-100"><img src="assets/img/icons/fb.svg" class="me-2" alt="img">Login with Facebook</a>
                        </div> --}}
                            <p class="no-acc">Don't have an account ? <a href="{{ route('choose-role') }}">Register</a></p>
                        </form>
                        <!-- /Login Form -->

                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection