<x-guest-layout>
    <div class="flex min-h-screen">
        <!-- Left Side Image -->
        <div class="hidden md:flex md:w-1/2 bg-gray-100 items-center justify-center relative">
            <img src="{{ asset('storage/softo_time.jpg') }}" alt="Softo Time" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='{{ asset('images/softo_time.png') }}'; this.onerror=function(){this.style.display='none'};">
            <div class="absolute inset-0 bg-black opacity-10"></div>
        </div>

        <!-- Right Side Login -->
        <div class="w-full md:w-1/2 flex flex-col justify-center items-center p-8 bg-white">
            <div class="w-full max-w-md">
                @php
                    $logo = \App\Models\Setting::where('key', 'company_logo')->value('value');
                @endphp
                
                <div class="flex items-center mb-6">
                    @if($logo)
                        <img src="{{ asset('storage/' . $logo) }}" alt="Company Logo" class="h-10 w-auto object-contain mr-3">
                    @endif
                    <div class="text-lg font-bold text-purple-300">Soft HR System</div>
                </div>

                <x-auth-session-status class="mb-4" :status="session('status')" />

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

                    <!-- Email Address -->
                    <div>
                        <x-input-label for="email" :value="__('Email or Employee ID')" />
                        <x-text-input id="email" class="block mt-1 w-full" type="text" name="email" :value="old('email')" required autofocus autocomplete="username" />
                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                    </div>

                    <!-- Password -->
                    <div class="mt-4">
                        <x-input-label for="password" :value="__('Password')" />
                        <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
                        <x-input-error :messages="$errors->get('password')" class="mt-2" />
                    </div>

                    <!-- Remember Me -->
                    <div class="block mt-4">
                        <label for="remember_me" class="inline-flex items-center">
                            <input id="remember_me" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" name="remember">
                            <span class="ms-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                        </label>
                    </div>

                    <div class="flex items-center justify-between mt-4">
                        @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 your password?') }}
                            </a>
                        @endif

                        <x-primary-button class="ms-3 bg-purple-600 hover:bg-purple-700">
                            {{ __('Login') }}
                        </x-primary-button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-guest-layout>