@extends('frontend.layout.mainwithoutheader')
@section('main-container')
<style>
    .alert-danger {
        color: #721c24 !important;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    .alert {
        text-align: center;
        padding: 10px;
    }
    .alert-success {
        color: #155724 !important;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
</style>
<section class="user-form-part">
        <div class="user-form-banner">
            <div class="user-form-content">
                <!-- <a href="#"><img src="images/logo.png" alt="logo"></a> -->
                <h1>Business Profile</h1>
                <h1>Empowering Your Business Identity, <span>Profile by Profile</span></h1>
                <p>Setup a new account  and get $40 bonus.</p>
            </div>
        </div>
        <div class="user-form-category">
            <div class="user-form-header">
                <a href="#">
					<!-- <img src="images/logo.png" alt="logo"> -->
				</a>
				<!-- <a href="#"><i class="fas fa-arrow-left"></i></a> -->
			</div>
            <div class="user-form-category-btn">
                <ul class="nav nav-tabs">
                    <li><a href="#login-tab" class="nav-link active" data-toggle="tab">sign in</a></li>
                    <li><a href="#register-tab" class="nav-link" data-toggle="tab">sign up</a></li>
                </ul>
            </div>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if(session('success'))
                <div class="alert alert-success text-center text-white">
                    {{ session('success') }}
                </div>
            @endif
            @if(session('danger'))
                <div class="alert alert-danger text-center text-white">
                    {{ session('danger') }}
                </div>
            @endif
            <div class="tab-pane active" id="login-tab">
                <div class="user-form-title">
                    <h2>Welcome!</h2>
                    <p>Use credentials to access your account.</p>
                </div>
                <form method="POST" action="{{ route('loginAuth') }}">
					@csrf
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group"><input type="text" class="form-control" name="email" placeholder="Email" required ><small class="form-alert">Please follow this example - abc@gmail.com</small></div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <input type="password" class="form-control" name="password" required  id="pass" placeholder="Password">
                                <button type="button" class="form-icon"><i class="eye fas fa-eye"></i></button>
                                <small class="form-alert">Password must be 6 characters</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="signin-check">
                                    <label class="custom-control-label" for="signin-check">Remember me</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 d-none">
                            <div class="form-group text-right"><a href="#" class="form-forgot">Forgot password?</a></div>
                        </div>
                        <div class="col-12">
                            <div class="form-group"><button type="submit" class="btn btn-inline"><i class="fas fa-unlock"></i><span>Enter your account</span></button></div>
                        </div>
                    </div>
                </form>
                <div class="user-form-direction">
                    <p>Don't have an account? click on the <span>( sign up )</span>button above.</p>
                </div>
            </div>
            <div class="tab-pane" id="register-tab">
                <div class="user-form-title">
                    <h2>Register</h2>
                    <p>Setup a new account in a minute and get $40 bonus.</p>
                </div>
                <ul class="user-form-option d-none">
                    <li><a href="#"><i class="fab fa-facebook-f"></i><span>facebook</span></a></li>
                    <li><a href="#"><i class="fab fa-twitter"></i><span>twitter</span></a></li>
                    <li><a href="#"><i class="fab fa-google"></i><span>google</span></a></li>
                </ul>
                <div class="user-form-devider  d-none">
                    <p>or</p>
                </div>
                <form method="POST" action="{{ route('register') }}">
					@csrf
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group"><input type="text" class="form-control" name="name" required placeholder="Name"><small class="form-alert">Please Enter your name</small></div>
                        </div>
                        <div class="col-12">
                            <div class="form-group"><input type="text" class="form-control" name="phone" required  placeholder="Phone number"><small class="form-alert">Please follow this example - 03XXXXXXXXX</small></div>
                        </div>
                        <div class="col-12">
                            <div class="form-group"><input type="text" class="form-control" name="email" required  placeholder="Email address"><small class="form-alert">Please follow this example - abc@gmail.com</small></div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <input type="password" class="form-control" required   name="password"  placeholder="Password">
                                <!-- <button class="form-icon"><i class="eye fas fa-eye"></i></button>
                                <small class="form-alert">Password must be 6 characters</small></div> -->
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <input type="password" name="confirmpassword" required  class="form-control" placeholder="Repeat Password">
                                <!-- <button class="form-icon"><i class="eye fas fa-eye"></i></button>
                                <small class="form-alert">Password must be 6 characters</small> -->
                            </div>
                        </div>
                        <!-- <div class="col-12">
                            <div class="form-group">
                                <div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="signup-check"><label class="custom-control-label" for="signup-check">I agree to the all <a href="#">terms & consitions</a>of bebostha.</label></div>
                            </div>
                        </div> -->
                        <div class="col-12">
                            <div class="form-group"><button type="submit" class="btn btn-inline"><i class="fas fa-user-check"></i><span>Create new account</span></button></div>
                        </div>
                    </div>
                </form>
              
            </div>
        </div>
    </section>

@endsection