<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Tailwind CSS -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
        
        * { box-sizing: border-box; }

        html { height: 100%; }
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background: radial-gradient(circle at top left, #062a27 43%, #61d7d4 112%);
            background-attachment: fixed;
            position: relative;
            min-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1.5rem;
        }

        /* Decorative floating rings on background */
        .bg-ring {
            position: fixed;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.12);
            pointer-events: none;
        }

        /* Master Card */
        .master-card {
            background: #ffffff;
            box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35);
        }

        /* Left gradient pane */
        .info-pane {
            background: radial-gradient(circle at top left, #00ada8 0%, #007d79 100%);
            position: relative;
            overflow: hidden;
        }

        /* Decorative circles inside info pane */
        .pane-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Form inputs */
        .input-style {
            background: #f8fffe;
            border: 1.5px solid #b2e8e6;
            transition: all 0.25s ease;
            color: #0f3534;
        }

        .input-style:focus {
            border-color: #00ada8;
            box-shadow: 0 0 0 4px rgba(0, 173, 168, 0.1);
            background: #ffffff;
            outline: none;
        }

        /* Animations */
        @keyframes floatUp {
            0%   { transform: translateY(0px); }
            50%  { transform: translateY(-12px); }
            100% { transform: translateY(0px); }
        }

        .float-icon { animation: floatUp 4s ease-in-out infinite; }

        /* CTA Button */
        .cta-btn {
            background: radial-gradient(circle at top left, #00ada8 0%, #007d79 100%);
            transition: all 0.25s ease;
            box-shadow: 0 8px 24px rgba(0, 125, 121, 0.4);
        }

        .cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 32px rgba(0, 125, 121, 0.5);
        }

        /* Feature badge */
        .feature-badge {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(6px);
        }
    </style>
</head>
<body>

    <!-- Background Decorative Rings -->
    <div class="bg-ring" style="width: 600px; height: 600px; top: -150px; left: -150px;"></div>
    <div class="bg-ring" style="width: 400px; height: 400px; bottom: -100px; right: -100px;"></div>
    <div class="bg-ring" style="width: 250px; height: 250px; top: 50%; left: 50%; transform: translate(-50%,-50%);"></div>

    <!-- Login Card -->
    <div id="loginCard" class="master-card w-full max-w-5xl rounded-[2.5rem] overflow-hidden flex flex-col lg:flex-row relative z-10" style="max-height: calc(100vh - 3rem);">

        <!-- ═══ LEFT — Info Pane ═══ -->
        <div class="info-pane hidden lg:flex flex-col justify-between w-[42%] p-10 text-white relative">

            <!-- Decorative Circles -->
            <div class="pane-circle" style="width:320px;height:320px;top:-80px;right:-100px;"></div>
            <div class="pane-circle" style="width:180px;height:180px;bottom:60px;left:-50px;"></div>
            <div class="pane-circle" style="width:80px;height:80px;bottom:200px;right:30px;"></div>

            <!-- Top Section -->
            <div class="relative z-10">
                <!-- Logo -->
                <div class="flex items-center gap-3 mb-8">
                    <div class="w-12 h-12 bg-white/15 rounded-2xl flex items-center justify-center border border-white/25 shadow-xl">
                        <img src="{{ asset('images/favicon.png') }}" alt="logo" class="w-8 h-8">
                    </div>
                    <div>
                        <span class="font-extrabold text-xl tracking-tight leading-none block">AI OMANIYA</span>
                        <span class="text-[9px] font-bold uppercase tracking-[0.2em] text-white/50">Enterprise Platform</span>
                    </div>
                </div>

                <!-- Headline -->
                <h2 class="text-[2.4rem] font-extrabold leading-[1.1] mb-5">
                    File Manager <br>
                    <span class="text-white/80">App.</span>
                </h2>
                <p class="text-white/60 text-sm leading-relaxed mb-6">
                    Your all-in-one solution for effortless file organization and sharing. Store, manage, and access files securely, anytime, anywhere.
                </p>

                <!-- Feature Badges -->
                <div class="space-y-3">
                    <div class="feature-badge flex items-center gap-3 rounded-2xl px-4 py-3">
                        <div class="w-8 h-8 rounded-xl bg-white/10 flex items-center justify-center float-icon">
                            <i class="fa-solid fa-vault text-white text-xs"></i>
                        </div>
                        <div>
                            <p class="text-[11px] font-black uppercase tracking-wider">Vault Security</p>
                            <p class="text-[10px] text-white/50">AES-256 bit hardware encryption</p>
                        </div>
                    </div>
                    <div class="feature-badge flex items-center gap-3 rounded-2xl px-4 py-3" style="animation-delay: 0.5s;">
                        <div class="w-8 h-8 rounded-xl bg-white/10 flex items-center justify-center" style="animation: floatUp 4s ease-in-out 1s infinite;">
                            <i class="fa-solid fa-shield-halved text-white text-xs"></i>
                        </div>
                        <div>
                            <p class="text-[11px] font-black uppercase tracking-wider">Zero Trust Auth</p>
                            <p class="text-[10px] text-white/50">Multi-factor identity layer</p>
                        </div>
                    </div>
                    <div class="feature-badge flex items-center gap-3 rounded-2xl px-4 py-3">
                        <div class="w-8 h-8 rounded-xl bg-white/10 flex items-center justify-center" style="animation: floatUp 4s ease-in-out 2s infinite;">
                            <i class="fa-solid fa-chart-line text-white text-xs"></i>
                        </div>
                        <div>
                            <p class="text-[11px] font-black uppercase tracking-wider">Audit Intelligence</p>
                            <p class="text-[10px] text-white/50">Real-time compliance tracking</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom Stats -->
            <div class="relative z-10">
                <div class="flex items-center justify-between pt-6 border-t border-white/10">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-green-300 shadow-lg shadow-green-400/50" style="animation: floatUp 2s ease-in-out infinite;"></div>
                        <span class="text-[10px] font-bold text-white/60 uppercase tracking-widest">System Optimal</span>
                    </div>
                    <span class="text-[10px] font-bold text-white/30">v4.2.0-PRO</span>
                </div>
            </div>
        </div>

        <!-- ═══ RIGHT — Form Pane ═══ -->
        <div class="flex-1 p-8 md:p-10 lg:p-12 flex flex-col justify-center bg-white">
            <div class="max-w-sm mx-auto w-full">

                <!-- Mobile Logo (only on small screens) -->
                <div class="flex items-center gap-2 mb-8 lg:hidden">
                    <div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: radial-gradient(circle at top left, #00ada8 0%, #007d79 100%);">
                        <img src="{{ asset('images/favicon.png') }}" alt="logo" class="w-6 h-6">
                    </div>
                    <span class="font-extrabold text-base tracking-tight text-slate-800">AI <span style="color:#00ada8">OMANIYA</span></span>
                </div>

                <!-- Header -->
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <h3 class="text-slate-900 text-3xl font-extrabold tracking-tight">Welcome back</h3>
                            <p class="text-slate-400 text-xs font-semibold mt-1">Enter your workspace identity below.</p>
                        </div>
                    </div>
                </div>

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

                    @if ($errors->any())
                        <div class="rounded-xl bg-red-50 p-4 border border-red-200">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-xs font-bold text-red-800 uppercase tracking-wide">
                                        Authentication Failed
                                    </h3>
                                    <div class="mt-2 text-xs text-red-700 font-semibold">
                                        <ul class="list-disc pl-5 space-y-1">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- EMAIL Input -->
                    <div id="emailField" class="space-y-2">
                        <label class="text-[10px] font-black uppercase tracking-widest ml-1" style="color:#007d79">Work Email</label>
                        <div class="relative">
                            <i class="fa-regular fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-[#00ada8] text-sm"></i>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" required autofocus placeholder="john.doe@enterprise.com"
                                class="w-full pl-11 pr-5 py-4 rounded-2xl text-sm input-style font-medium">
                        </div>
                    </div>

                    <!-- MOBILE Input (Currently visual only, adapt backend if needed) -->
                    <!-- <div id="mobileField" class="space-y-2 hidden">
                        <label class="text-[10px] font-black uppercase tracking-widest ml-1" style="color:#007d79">Mobile Number</label>
                        <div class="flex items-center input-style rounded-2xl overflow-hidden">
                            <span class="px-4 py-4 text-sm font-bold border-r select-none" style="color:#007d79; border-color:#b2e8e6; background:#e6fafa;">+91</span>
                            <input type="tel" id="mobile" name="mobile" maxlength="10" placeholder="98765 43210"
                                class="flex-1 px-4 py-4 text-sm outline-none bg-transparent font-medium" style="color:#0f3534;">
                        </div>
                    </div> -->

                    <!-- Password -->
                    <div class="space-y-2">
                        <div class="flex justify-between items-center px-1">
                            <label class="text-[10px] font-black uppercase tracking-widest" style="color:#007d79">Security Key</label>
                            @if (Route::has('password.request'))
                                <a href="{{ route('password.request') }}" class="text-[10px] font-bold" style="color:#00ada8">Forgot? Reset →</a>
                            @endif
                        </div>
                        <div class="relative">
                            <i class="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-[#00ada8] text-sm"></i>
                            <input type="password" id="password" name="password" required placeholder="••••••••••••"
                                class="w-full pl-11 pr-12 py-4 rounded-2xl text-sm input-style font-medium">
                            <button type="button" id="togglePasswordBtn" class="absolute right-4 top-1/2 -translate-y-1/2 text-[#00ada8] text-sm opacity-70 hover:opacity-100 transition-opacity">
                                <i id="eyeIcon" class="fa-regular fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Remember Me -->
                    <label class="flex items-center gap-3 px-1 cursor-pointer group mt-4">
                        <div class="relative">
                            <input type="checkbox" id="remember" name="remember" class="sr-only peer">
                            <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-[#00ada8] group-hover:bg-slate-300 peer-checked:group-hover:bg-[#009e99] transition-colors"></div>
                        </div>
                        <span class="text-xs font-semibold text-slate-400 group-hover:text-slate-500 transition-colors">Keep me signed in</span>
                    </label>

                    <!-- CTA Button -->
                    <button type="submit"
                        class="cta-btn w-full text-white py-5 rounded-[1.5rem] font-black text-[11px] uppercase tracking-[0.2em] mt-4">
                        Continue &nbsp;→
                    </button>

                </form>

                <!-- Footer Note -->
                <p class="text-center text-[10px] text-slate-400 font-semibold mt-8">
                    Protected by <span style="color:#00ada8" class="font-black">AI OMANIYA</span> enterprise security. &nbsp;
                    <a href="#" style="color:#007d79" class="font-bold hover:underline">Privacy Policy</a>
                </p>

            </div>
        </div>
    </div>

    <!-- jQuery Logic -->
    <script>
        $(document).ready(function() {
            // Toggle password visibility
            $('#togglePasswordBtn').on('click', function(e) {
                e.preventDefault();
                const pwd = $('#password');
                const icon = $('#eyeIcon');
                if (pwd.attr('type') === 'password') {
                    pwd.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    pwd.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });
        });
    </script>
</body>
</html>
