@extends('layouts.guest')
@section('content')
    <div class="min-h-screen w-full flex">
                    <p style="display: none;">Auth check:{{ session('db_connection') }} {{ auth()->check() ? 'Yes' : 'No' }}</p>

        <!-- LEFT SIDE -->
        <div class="hidden lg:flex w-1/2 bg-[#1c2353] text-white px-16 py-20 items-center"
            style="background-image: url('images/auth_cover.png');background-repeat:no-repeat;background-position-y:100%">
            <div class="max-w-lg">

                <h1 class="text-5xl font-extrabold leading-tight">
                    Secure Access,<br> Seamless<br> Experience.
                </h1>

                <div class="mt-20 text-sm opacity-80">
                    Create your account in seconds,<br>
                    it's fast, simple, and secure.
                </div>

            </div>
        </div>

        <!-- RIGHT SIDE -->
        <div class="w-full lg:w-1/2 flex items-center justify-center lg:px-16 px-6 py-16 ">

            <div class="w-full ">
                <div class="mb-12">
                    <a href="{{ url('/') }}">
                        <img src="{{ asset('logo.png') }}" alt="{{ config('app.name', 'Laravel') }}" class="h-6 w-auto">
                    </a>
                </div>
                <h2 class="text-2xl font-bold primary-color">Log In</h2>
                <p class="text-sm text-gray-500 mt-1">
                    Welcome back! please enter your credentails
                </p>

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

                    <!-- Email -->
                    <div class="flex flex-col gap-1">
                        <label class="text-sm font-medium text-gray-700">Email Address</label>
                        <input type="email" name="email" value="{{ old('email') }}"
                            class="w-full border rounded-lg px-4 py-3 focus:ring-2 focus:primary-color"
                            placeholder="you@example.com">

                        @error('email')
                            <p class="text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Password -->
                    <div class="flex flex-col gap-1 relative">
                        <label class="text-sm font-medium text-gray-700">Password</label>
                        <input type="password" name="password" id="password"
                            class="w-full border rounded-lg px-4 py-3 focus:ring-2 focus:primary-color"
                            placeholder="Password">

                        <span onclick="togglePass('password')"
                            class="absolute right-3 top-10 cursor-pointer text-gray-500">
                            👁️
                        </span>

                        @error('password')
                            <p class="text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Remember + Forgot -->
                    <div class="flex items-center justify-between">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="remember" class="h-4 w-4">
                            <span class="text-sm text-gray-700">Remember me</span>
                        </label>

                        <a href="{{ route('password.request') }}" class="text-sm text-blue-600 font-medium hover:underline">
                            Forgot Password?
                        </a>
                    </div>

                    <!-- Submit -->
                    <button type="submit"
                        class="w-full bg-[#2e3a87] text-white py-3 rounded-lg font-semibold hover:bg-[#252f6f] transition">
                        Log In
                    </button>

                    <!-- Register Link -->
                    <p class="text-center text-sm text-gray-600 mt-4">
                        Don't have an account?
                        <a class="primary-color font-semibold" href="/register">Register</a>
                    </p>
                </form>

                <script>
                    function togglePass(id) {
                        const input = document.getElementById(id);
                        input.type = input.type === "password" ? "text" : "password";
                    }
                </script>

            </div>
        </div>

                        </div>
@endsection
