@extends('layouts.guest')

@section('content')
<div class="min-h-[calc(110vh-6rem)] flex w-full">

    <!-- RIGHT: IMAGE / BRAND -->
    <div class="hidden md:flex w-3/5 items-center justify-center
                bg-slate-800 relative overflow-hidden">

        <img
            src="{{ asset('storage/images/login-sports.jpg') }}"
            alt="Smart Booking Platform"
            class="absolute inset-0 w-full h-full object-cover opacity-30"
        >

        <div class="relative z-10 text-center text-white px-10">
            <h1 class="text-3xl font-semibold mb-2">Smart Booking Platform</h1>
            <p class="text-sm text-slate-300">
                Digital reservation for sports & public facilities
            </p>
        </div>
    </div>
    
    <!-- LEFT: LOGIN FORM -->
    <div class="w-full md:w-2/5 flex items-center justify-center px-6 bg-slate-900">
        <div class="max-w-sm w-full text-slate-200">

            <h2 class="text-4xl font-semibold mb-2 flex justify-center">
                Welcome To SBP !
            </h2>
            <br>
            <br>
            <br>
            <h2 class="text-3xl font-semibold mb-2">
                Sign In
            </h2>
            <p class="text-sm text-slate-400 mb-6">
                Enter your email and password to sign in
            </p>

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

            <form method="POST" action="{{ route('login') }}" class="space-y-4">
                @csrf

                <!-- Email -->
                <div>
                    <label class="text-sm text-slate-400">Email</label>
                    <input
                        type="email"
                        name="email"
                        value="{{ old('email') }}"
                        class="w-full mt-1 bg-slate-800 border border-slate-700
                               rounded-lg px-4 py-2 text-sm
                               focus:outline-none focus:ring-2 focus:ring-indigo-500"
                        required autofocus>
                    <x-input-error :messages="$errors->get('email')" class="mt-1 text-xs text-red-400"/>
                </div>

                <!-- Password -->
                <div>
                    <label class="text-sm text-slate-400">Password</label>
                    <input
                        type="password"
                        name="password"
                        class="w-full mt-1 bg-slate-800 border border-slate-700
                               rounded-lg px-4 py-2 text-sm
                               focus:outline-none focus:ring-2 focus:ring-indigo-500"
                        required>
                    <x-input-error :messages="$errors->get('password')" class="mt-1 text-xs text-red-400"/>
                </div>

                <!-- Forgot -->
                <div class="flex justify-end text-sm">
                    @if (Route::has('password.request'))
                        <a href="{{ route('password.request') }}"
                           class="text-indigo-400 hover:underline">
                            Forgot password?
                        </a>
                    @endif
                </div>

                <!-- Button -->
                <button
                    type="submit"
                    class="w-full bg-indigo-600 hover:bg-indigo-700
                           py-2.5 rounded-lg text-white font-medium transition">
                    Sign In
                </button>
            </form>

            @if (Route::has('register'))
                <p class="mt-4 text-sm text-slate-400 flex justify-center">
                    Don’t have an account? 
                    <a href="{{ route('register') }}" class="text-indigo-400 hover:underline">
                        Sign Up
                    </a>
                </p>
            @endif
        </div>
    </div>
</div>
@endsection