@extends('layouts.auth')

@section('styles')

@endsection

@section('content')
    <!-- CONTAINER OPEN -->
    <div class="container-lg">
        <div class="row justify-content-center mt-4 mx-0">
            <div class="col-xl-4 col-lg-6">
                <div class="card shadow-none">
                    <div class="card-body p-sm-6">
                        <div class="mb-4">
                            <div class="text-center">
                                <a href="/"><img src="{{asset('build/assets/images/brand/desktop-dark.png')}}" class="header-brand-img" alt=""></a>
                            </div>
                        </div>

                        <div class="text-center mb-4">
                            <h4 class="mb-1">Champion's Welcome! 🏆</h4>
                            <p>Sign in and dive into awesomeness!</p>
                        </div>

                        <form method="POST" action="{{ route('login') }}">
                            @csrf
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">Email<span class="text-danger ms-1">*</span></label>
                                        <input class="form-control ms-0 @error('email') is-text-invalid is-invalid @enderror" name="email" type="email" placeholder="Enter your Email">

                                        @error('email')
                                            <span class="invalid-feedback d-block" role="alert">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">Password<span class="text-danger ms-1">*</span></label>
                                        <div class="input-group has-validation">
                                            <input type="password" name="password" class="form-control @error('password') is-text-invalid is-invalid @enderror" id="signin-password" placeholder="Password">
                                            <button type="button" class="btn btn-light" onclick="createpassword('signin-password',this)" id="button-addon21"><i class="ri-eye-off-line align-middle"></i></button>

                                            @error('password')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-12">
                                    <div class="d-flex mb-3">
                                        <div class="form-check d-flex align-items-center">
                                            <input name="remember" class="form-check-input" type="checkbox" id="flexCheckDefault">
                                            <label class="form-check-label tx-15" for="flexCheckDefault">
                                                Remember me
                                            </label>
                                        </div>
                                        <div class="ms-auto">
                                            <a href="{{ route('get.forgot-password') }}" class="tx-primary ms-1 tx-13">Forgot Password?</a>
                                        </div>
                                    </div>

                                    <div class="d-grid mb-3">
                                        <button type="submit" class="btn btn-primary">Login</button>
                                    </div>

                                    <div class="text-center">
                                        <p class="mb-0 tx-14">Don't have an account yet?
                                            <a href="{{ route('get.register') }}" class="tx-primary ms-1 text-decoration-underline">Sign Up</a>
                                        </p>
                                    </div>

                                    <p class="text-center mt-3 mb-2">Signin with</p>
                                    <div class="d-flex justify-content-center">
                                        <div class="btn-list">
                                            <button class="btn btn-icon bg-primary-transparent rounded-pill border-0" type="button">
                                                <span class="btn-inner--icon"><i class="fa fa-facebook"></i></span>
                                            </button>
                                            <button class="btn btn-icon bg-primary-transparent rounded-pill border-0" type="button">
                                                    <span class="btn-inner--icon"><i class="fa fa-google"></i></span>
                                                </button>
                                            <button class="btn btn-icon bg-primary-transparent rounded-pill border-0" type="button">
                                                    <span class="btn-inner--icon"><i class="fa fa-twitter"></i></span>
                                                </button>
                                            <button class="btn btn-icon bg-primary-transparent rounded-pill border-0" type="button">
                                                    <span class="btn-inner--icon"><i class="fa fa-linkedin"></i></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if(isset($slug))
                                <input type="hidden" name="return_back" value="{{ $slug }}">
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- CONTAINER CLOSED -->
@endsection

@section('scripts')
	<!-- Show Password JS -->
    <script src="{{asset('build/assets/show-password.js')}}"></script>
@endsection