<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login INUFA</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }
        .login-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #0F172A 100%);
        }
        .input-field:focus {
            border-color: #1e3a8a;
            box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="flex flex-col md:flex-row w-full h-screen">
        
        <!-- Left Panel: Brand & Info -->
        <div class="hidden md:flex md:w-1/2 login-gradient text-white flex-col justify-between p-12">
            <div>
                <h1 class="text-4xl font-bold mb-2">INUFA</h1>
                <p class="text-blue-200">Solusi Perlengkapan Event Terbaik</p>
            </div>
            
            <div class="mb-8">
                <div class="mb-10">
                    <img src="{{ asset('assets/images/logo.png') }}" alt="INUFA Logo" class="w-48 mx-auto">
                </div>
                <h2 class="text-2xl font-semibold mb-6">Selamat Datang Kembali!</h2>
                <p class="text-blue-200 leading-relaxed">
                    Login untuk akses dashboard dan kelola perlengkapan event Anda dengan mudah. 
                    Dapatkan pengalaman terbaik dalam menyewa dan mengelola perlengkapan acara.
                </p>
                
                <div class="mt-10">
                    <div class="flex items-center space-x-3">
                        <div class="h-10 w-10 rounded-full bg-blue-700 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <span>Perlengkapan Berkualitas</span>
                    </div>
                    <div class="flex items-center space-x-3 mt-3">
                        <div class="h-10 w-10 rounded-full bg-blue-700 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <span>Pengiriman Tepat Waktu</span>
                    </div>
                    <div class="flex items-center space-x-3 mt-3">
                        <div class="h-10 w-10 rounded-full bg-blue-700 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <span>Harga Terjangkau</span>
                    </div>
                </div>
            </div>
            
            <div class="text-sm text-blue-200">
                &copy; {{ date('Y') }} INUFA. Hak Cipta Dilindungi.
            </div>
        </div>
        
        <!-- Right Panel: Login Form -->
        <div class="w-full md:w-1/2 flex items-center justify-center p-6 md:p-12 bg-white">
            <div class="w-full max-w-md">
                <div class="md:hidden flex justify-center mb-8">
                    <img src="{{ asset('assets/images/logo.png') }}" alt="INUFA Logo" class="w-40">
                </div>
                
                <h2 class="text-3xl font-bold text-gray-800 mb-2">Login</h2>
                <p class="text-gray-600 mb-8">Selamat datang kembali, silakan masuk ke akun Anda</p>
                
                <form action="{{ route('login.post') }}" method="POST" class="space-y-5">
                    @csrf
                    
                    <!-- Email -->
                    <div class="space-y-2">
                        <label for="email" class="text-sm font-medium text-gray-700 block">Email</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-3 flex items-center text-gray-500">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </span>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="Masukkan email" class="input-field pl-10 pr-3 py-3 w-full rounded-lg border border-gray-300 focus:outline-none @error('email') border-red-500 @enderror">
                            @error('email')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- Password -->
                    <div class="space-y-2">
                        <label for="password" class="text-sm font-medium text-gray-700 block">Password</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-3 flex items-center text-gray-500">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                </svg>
                            </span>
                            <input type="password" id="password" name="password" placeholder="Masukkan password" class="input-field pl-10 pr-3 py-3 w-full rounded-lg border border-gray-300 focus:outline-none">
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="remember" class="ml-2 block text-sm text-gray-700">
                            Ingat saya
                        </label>
                    </div>
                    
                    <!-- Tombol Login -->
                    <button type="submit" class="w-full bg-[#1e3a8a] text-white py-3 px-4 rounded-lg font-medium hover:bg-blue-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">
                        Masuk
                    </button>
                </form>
                
                <!-- Divider -->
                <div class="flex items-center my-6">
                    <div class="flex-grow border-t border-gray-300"></div>
                    <span class="flex-shrink mx-4 text-gray-600">atau</span>
                    <div class="flex-grow border-t border-gray-300"></div>
                </div>
                
                <!-- Register Link -->
                <p class="text-center text-gray-600">
                    Belum memiliki akun? 
                    <a href="{{ route('register') }}" class="font-medium text-blue-700 hover:text-blue-800">
                        Daftar sekarang
                    </a>
                </p>
            </div>
        </div>
    </div>
</body>
</html>