@extends('layouts.guest')

@section('content')
    <style>
        .login-wrap {
            min-height: 100vh;
            background: url("{{ asset('images/background-jpg.jpeg') }}") center/cover no-repeat;
            position: relative;
        }

        .login-wrap::before {
            content: "";
            position: absolute;
            /* inset: 0; */
            background: rgba(255, 255, 255, .35);
            /* soft overlay */
        }

        .login-card {
            position: relative;
            width: min(420px, 90vw);
            border-radius: 14px;
            background: rgb(255 255 255 / 8%);
            box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
            border: 1px solid rgba(255, 255, 255, .8);
            backdrop-filter: blur(6px);
        }

        .login-logo {
            max-height: 60px;
            object-fit: contain;
        }

        .form-control {
            height: 46px;
        }

        .btn-login {
            height: 46px;
        }
    </style>
    <div class="login-wrap d-flex align-items-center justify-content-center px-5">
        <div class="login-card p-4 p-md-5 ms-lg-7">

            <div class="text-center mb-3">
                <img class="login-logo mb-2" src="{{ asset('images/logo-csa.jpeg') }}" alt="CSA">
                <h5 class="fw-bold mb-1">Welcome to CSA Web Admin</h5>
                <div class="fw-bold small">Please login to continue</div>
                {{-- @if ($errors->any()) --}}
                <div class="alert alert-warning alert-dismissible fade show w-full">
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
                    </button> visitor applications require your approval !
                </div>
                <div class="alert alert-danger">
                    test {{ $errors->first() }}test
                </div>
                {{-- @endif --}}
            </div>

            <form method="POST" action="{{ route('login.store') }}">
                @csrf

                <div class="mb-3">
                    <input type="text" name="username" value="{{ old('username') }}"
                        class="form-control @error('username') is-invalid @enderror" placeholder="Email">
                    @error('username')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                        placeholder="Password" autocomplete="current-password">
                    @error('password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <button type="submit" class="btn btn-primary w-100 btn-login fw-semibold">
                    Login
                </button>
            </form>

        </div>
    </div>
@endsection

{{-- <div class="flex flex-col gap-6">
        <x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" />

        <!-- Session Status -->
        <x-auth-session-status class="text-center" :status="session('status')" />

        <form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6">
            @csrf

            <!-- Email Address -->
            <flux:input
                name="email"
                :label="__('Email address')"
                :value="old('email')"
                type="email"
                required
                autofocus
                autocomplete="email"
                placeholder="email@example.com"
            />

            <!-- Password -->
            <div class="relative">
                <flux:input
                    name="password"
                    :label="__('Password')"
                    type="password"
                    required
                    autocomplete="current-password"
                    :placeholder="__('Password')"
                    viewable
                />

                @if (Route::has('password.request'))
                    <flux:link class="absolute top-0 text-sm end-0" :href="route('password.request')" wire:navigate>
                        {{ __('Forgot your password?') }}
                    </flux:link>
                @endif
            </div>

            <!-- Remember Me -->
            <flux:checkbox name="remember" :label="__('Remember me')" :checked="old('remember')" />

            <div class="flex items-center justify-end">
                <flux:button variant="primary" type="submit" class="w-full" data-test="login-button">
                    {{ __('Log in') }}
                </flux:button>
            </div>
        </form>

        @if (Route::has('register'))
            <div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
                <span>{{ __('Don\'t have an account?') }}</span>
                <flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
            </div>
        @endif
    </div> --}}