<x-base-layout title="Login">
    <style>
        .shadow-custom {
            box-shadow: 10px 7px 20px rgb(109, 107, 107);
        }
      </style>
    <div class="flex w-full flex-col items-center bg-white dark:bg-navy-700">
        <div class="absolute bottom-0 w-full h-1/2">
            <div class="absolute bottom-0 left-0 right-0 w-screen h-full"
                style="background-image: url('{{ asset('images/login-background.png') }}'); background-size: cover;">
            </div>
        </div>
        <div class="flex w-full justify-between px-9 pt-2">
            <span class="flex flex-row text-center items-center pt-3">
                <img class="w-48" x-show="!$store.global.isDarkModeEnabled"
                    src="{{ asset('images/logo-left-login.png') }}" alt="image" />
            </span>
            <span class="flex flex-row text-center items-center">
                <p class="text-[#a80012] text-2xl font-bold">NET</p>
                <p class="text-[#000] text-2xl font-bold">BAY</p>
            </span>
        </div>
        <div
            class="mx-auto my-auto card p-2 flex justify-center items-center w-1/3 bg-[#f9f9f9] shadow-custom rounded-[40px]">
            <div class="flex w-full max-w-md grow flex-col justify-center p-5">
                <div class="text-center">
                    {{-- <img class="mx-auto h-16 w-16 lg:hidden" src="{{ asset('images/app-logo.svg') }}" alt="logo" /> --}}
                    <div class="mt-4">
                        <h2 class="text-4xl font-bold text-primary dark:text-navy-100 mb-2">
                            LOGIN
                        </h2>
                        <p class="text-[#C79CC8] dark:text-navy-300 text-xs">
                            ENTER YOU ACCOUNT DETAIL TO LOGIN
                        </p>
                    </div>
                </div>
                <form class="mt-9" action="{{ route('login') }}" method="post">
                    @method('POST') @csrf
                    <div class="relative flex">
                        <label for="username"
                            class="absolute top-0 left-0 text-sm text-primary font-bold">Username</label>
                        <input id="username" type="text"
                            class="w-full mt-4 bg-[#f9f9f9] border-b-2 border-primary pl-1 pr-4 py-2 focus:outline-none"
                            placeholder="" value="{{ old('email') ?? 'nbdev@netbay.co.th' }}" name="email">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                            <i aria-hidden="true" class="fa fa-user text-primary text-lg" aria-hidden="true"></i>
                        </div>
                        @error('email')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="relative flex mt-4">
                        <label for="password"
                            class="absolute top-0 left-0 text-sm text-primary font-bold">Password</label>
                        <input id="password" type="password"
                            class="w-full mt-4 bg-[#f9f9f9] border-b-2 border-primary pl-1 pr-4 py-2 focus:outline-none"
                            placeholder="" value="{{ old('password') ?? 'password' }}" name="password">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                            <i aria-hidden="true" class="fa fa-unlock-alt text-primary text-lg" aria-hidden="true"></i>
                        </div>
                        @error('password')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <button type="submit"
                        class="btn mt-10 h-10 rounded-3xl w-full border bg-primary font-bold text-lg text-[#f9f9f9] hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                        Login
                    </button>
                    <a href="/register"
                        class="btn mt-3 h-10 rounded-3xl border border-[#A2A2A2] w-full bg-[#f9f9f9] font-bold text-lg text-primary hover:bg-[#A2A2A2] focus:bg-[#A2A2A2] hover:text-white  active:bg-[#A2A2A2]-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                        Register
                    </a>
                    <div class="mt-4 text-center text-xs+">
                        <p class="text-left ml-2 text-sm font-bold ">
                            <a class="text-[#cdabd3] transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                                href="{{ route('registerView') }}">forgot password</a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
        <div class="flex mb-5 z-50">
            <span class="text-white font-medium">© 2011 Netbay Co., Ltd. All rights reserved.</span>
        </div>
    </div>
</x-base-layout>
