@extends('frontend.layout.main')

@section('main-section')
    <!--  Preloader Start -->
    <x-frontend.preloader></x-frontend.preloader>
    <!--  Preloader End -->

    <!-- Theme Switcher Start -->
    <div class="switch-theme-mode">
        <label id="switch" class="switch">
            <input type="checkbox" onchange="toggleTheme()" id="slider">
            <span class="slider round"></span>
        </label>
    </div>
    <!-- Theme Switcher End -->

    <!-- Custom Cursor -->
    <div class="cursor style-one"></div>
    <div class="cursor-inner style-one"></div>

    <x-frontend.navbar />

    <!-- Breadcrumb Section Start -->
    <div class="breadcrumb-area bg-ash">
        <div class="breadcrumb-wrap bg-f bg-2 position-relative z-1 round-20">
            <img src="{{ asset('images/breadcrumb/br-shape-1.png') }}" alt="Shape"
                class="br-shape-one position-absolute z-1 bounce">
            <img src="{{ asset('images/breadcrumb/br-shape-2.png') }}" alt="Shape"
                class="br-shape-two position-absolute z-1 rotate">
            <div class="container">
                <h2 class="section-title fw-bold text-white text-center mb-13">Login</h2>
                <ul class="br-menu text-center list-unstyled mb-0">
                    <li class="position-relative fs-xx-14 d-inline-block"><a href="index.html">Home</a></li>
                    <li class="position-relative fs-xx-14 d-inline-block">Login</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Section End -->

    <!-- Account Section Start -->
    <div class="account-wrap position-relative z-1 pt-120 pb-90">
        <div class="container style-one">
            <div class="row">
                <div class="col-lg-6">
                    <div class="account-box round-20 mb-30">
                        <h4 class="fs-20 fw-extrabold text-title mb-20">Log In To Your Account</h4>
                        <form action="{{ route('login') }}" method="POST" class="form-wrapper">
                            @csrf
                            <div class="form-group mb-20">
                                <input type="text" id="email_address" name="email"
                                    class="w-100 ht-60 bg-ash round-10 text-para border-0" placeholder="Email Address">
                                @error('email')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group mb-20">
                                <input type="password" id="pwd" name="password"
                                    class="w-100 ht-60 bg-ash round-10 text-para border-0" placeholder="Password">
                                @error('password')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="d-flex flex-wrap align-items-center justify-content-between mb-25">
                                <div class="form-check checkbox style-five text-para">
                                    <input class="form-check-input" name="remember" type="checkbox" id="test_20">
                                    <label class="form-check-label" for="test_20">
                                        <span class="text-para">Keep Me Logged In</span>
                                    </label>
                                </div>
                                <a href="{{ route('password.request') }}" class="text-para hover-text-para">Forgot
                                    Password?</a>
                            </div>
                            <button type="submit"
                                class="btn style-two w-100 d-block font-secondary fw-bold position-relative z-1 round-10">
                                <span>Login
                                    <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon"
                                        class="transition icon-left">
                                </span>
                                <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon"
                                    class="transition icon-right">
                            </button>
                            <div class="or-text text-center position-relative"><span>Or</span></div>
                            <a href="https://www.gmail.com" target="_blank"
                                class="tt-btn style-one w-block d-block text-center font-secondary fw-bold text-title bg-ash mb-15 round-5"><i
                                    class="ri-facebook-fill"></i>Login with Facebook</a>
                            <a href="https://www.gmail.com" target="_blank"
                                class="tt-btn style-two w-block d-block text-center font-secondary fw-bold text-title bg-ash round-5"><i
                                    class="ri-google-fill"></i>Login with Google</a>
                            <p class="mt-4 mb-0 text-center">Don't Have An Account? <a href="register.html"
                                    class="text-title fw-bold link-hover-primary">Create</a></p>
                        </form>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="account-box round-20 mb-30">
                        <h4 class="fs-20 fw-extrabold text-title mb-20">Create Account</h4>
                        <form action="{{ route('register') }}" method="POST" class="form-wrapper">
                            @csrf
                            <div class="form-group mb-20">
                                <input type="text" id="name" name="name"
                                    class="w-100 ht-60 bg-ash round-10 text-para border-0" placeholder="Name">
                                @error('name')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group mb-20">
                                <input type="text" id="email" name="email"
                                    class="w-100 ht-60 bg-ash round-10 text-para border-0" placeholder="Email Address">
                                @error('email')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group mb-20">
                                <input type="password" name="password"
                                    class="w-100 ht-60 bg-ash round-10 text-para border-0" placeholder="Password">
                                @error('password')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group mb-20">
                                <input type="password" id="pwd" name="password_confirmation"
                                    class="w-100 ht-60 bg-ash round-10 text-para border-0" placeholder="Confirm Password">
                                @error('password_confirmation')
                                    <span class="text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <button type="submit"
                                class="btn style-one w-100 d-block font-secondary fw-bold position-relative z-1 round-10">
                                <span>Register Now
                                    <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon"
                                        class="transition icon-left">
                                </span>
                                <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon"
                                    class="transition icon-right">
                            </button>
                            <div class="or-text text-center position-relative"><span>Or</span></div>
                            <a href="https://www.gmail.com" target="_blank"
                                class="tt-btn style-one w-block d-block text-center font-secondary fw-bold text-title bg-ash mb-15 round-5"><i
                                    class="ri-facebook-fill"></i>Login with Facebook</a>
                            <a href="https://www.gmail.com" target="_blank"
                                class="tt-btn style-two w-block d-block text-center font-secondary fw-bold text-title bg-ash round-5"><i
                                    class="ri-google-fill"></i>Login with Google</a>
                            <p class="mt-4 mb-0 text-center">Already Have An Account? <a href="register.html"
                                    class="text-title fw-bold link-hover-primary">Login</a></p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Account Section End -->

    <!-- Footer Start -->
    <x-frontend.footer></x-frontend.footer>
    <!-- Footer End -->

    <!-- Back to Top -->
    <div id="progress-wrap" class="progress-wrap style-one">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path id="progress-path" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
@endsection