<x-guest-layout>
    <x-authentication-card>
        <x-slot name="logo">
            <!--<x-authentication-card-logo />-->
            
        </x-slot>
        

        <x-validation-errors class="mb-4" />

        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif
<style>
body{
    padding: 0;
    margin: 0;
}
    .imageBackground {
        display: flex;
        /*justify-content: center;*/
        align-items: center;
        height: 100vh;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ1NiIgaGVpZ2h0PSIxMTU4IiB2aWV3Qm94PSIwIDAgMTQ1NiAxMTU4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF81MzZfMTc4OTMpIj48cmVjdCB3aWR0aD0iMTQ1NiIgaGVpZ2h0PSIxMTU4IiBmaWxsPSIjMjE0OEMwIi8+PGVsbGlwc2UgY3g9IjI1NSIgY3k9IjEwMjUiIHJ4PSIzOTMiIHJ5PSI0MzQiIGZpbGw9IiMyOUIyRkUiLz48ZWxsaXBzZSBjeD0iMjMyLjk4MSIgY3k9IjEwNjguMDgiIHJ4PSIyMjQuNDMzIiByeT0iMjM2LjU5MyIgZmlsbD0iIzI3NEZDNyIvPjxwYXRoIGQ9Ik0xMDc4Ljc1IDE1Mi41MTZDOTQwLjExNSAxNjYuNDYgODQ1LjgxOSA1Ni42NDg2IDgxNiAwTDE2OTkuMzMgMy44MTI4OVY3ODZIMTYwMC42N0MxMjk1LjE4IDc0NC42MDMgMTM0Ni42MSA1NzkuNTU5IDE0MTAuNTEgNTAyLjIxMkMxNDQ3LjgyIDQ0Ny45MjQgMTUxNS4zIDMxNy4xMjMgMTQ4Ni42NyAyMjguMjI5QzE0NTAuODkgMTE3LjExIDEyNTIuMDQgMTM1LjA4NSAxMDc4Ljc1IDE1Mi41MTZaIiBmaWxsPSIjMjlCMkZFIi8+PGVsbGlwc2UgY3g9IjE0MC4wOTYiIGN5PSIxMTkxLjk4IiByeD0iMjkzLjA5NiIgcnk9IjMwOC45NzUiIGZpbGw9IiMyOUIyRkUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF81MzZfMTc4OTMiPjxyZWN0IHdpZHRoPSIxNDU2IiBoZWlnaHQ9IjExNTgiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+');
        background-size: cover;
            flex-direction: column;
    color: #fff;
    }

    .login-form-container {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 50%;
    }

    .login-form {
        width: 100%;
        /*max-width: 400px;*/
    }
    #email{
            background: #F5F5F5;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 3rem;
    width: 97%;
    }
    #password{
        background: #F5F5F5;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 5px;
    width: 97%;
    }
    .passwordSectoion{
        
    margin-bottom: 3rem;
    }
    .passwordSectoion a{
        text-decoration: none;
    float: right;
    color: #999999;
    }
</style>
<div class="imageBackground">
    <div>
        <h1 style="font-size: 5rem;">Cleaneo</h1>
    </div>
    <div class="login-form-container">
        <form method="POST" action="{{ route('login') }}" class="login-form">
            @csrf

            <div>
               <p style="color: #000; margin-bottom: 3rem;">Please fill in your Unique Admin Login</p>
            </div>
            <div>
                <!--<x-label for="email" value="{{ __('Email') }}" />-->
                <x-input id="email" class="block mt-1 w-full mb-5" placeholder="Email address" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
            </div>

            <div class="mt-4 passwordSectoion">
                <!--<x-label for="password" value="{{ __('Password') }}" />-->
                <x-input id="password" class="block mt-1 w-full mb-5" placeholder="Password" type="password" name="password" required autocomplete="current-password" />
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}">
                        {{ __('Forgot password?') }}
                    </a>
                @endif
            </div>

            <!--<div class="block mt-4">-->
            <!--    <label for="remember_me" class="flex items-center">-->
            <!--        <x-checkbox id="remember_me" name="remember" />-->
            <!--        <span class="ms-2 text-sm text-gray-600">{{ __('Remember me') }}</span>-->
            <!--    </label>-->
            <!--</div>-->

            <div class="flex items-center justify-end mt-4">
                

                <x-button class="ms-4" style="width: 100%;
    padding: 10px;
    background: #2148C0;
    color: #fff;
    border: none;
    border-radius: 5px;
        cursor: pointer;">
                    {{ __('Sign In') }}
                </x-button>
            </div>
        </form>
        </div>
        </div>
    </x-authentication-card>
</x-guest-layout>
