<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login | Dwaraka Collection</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        gold: {
                            400: '#E6C659',
                            500: '#D4AF37',
                            600: '#C9A227',
                            700: '#A68218',
                            50: '#FDFBF7',
                        },
                        obsidian: {
                            900: '#0F0F11',
                            800: '#18181C',
                            700: '#23232A',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    }
                }
            }
        }
    </script>

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        .gold-gradient-text {
            background: linear-gradient(135deg, #FFE89C 0%, #D4AF37 50%, #997510 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .gold-button-bg {
            background: linear-gradient(135deg, #D4AF37 0%, #C9A227 60%, #A68218 100%);
        }
        .gold-button-bg:hover {
            background: linear-gradient(135deg, #E6C659 0%, #D4AF37 60%, #B8911C 100%);
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-up {
            animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
    </style>
</head>
<body class="bg-obsidian-900 text-slate-200 font-sans antialiased min-h-screen flex items-center justify-center p-4 lg:p-0">

    <div class="w-full max-w-5xl bg-obsidian-800 rounded-3xl shadow-2xl border border-gold-500/20 overflow-hidden grid grid-cols-1 lg:grid-cols-12 min-h-[640px] animate-fade-up">
        
        <!-- LEFT PANEL: Premium Jewellery Visual -->
        <div class="lg:col-span-6 relative bg-gradient-to-br from-obsidian-900 via-obsidian-800 to-amber-950/40 p-8 lg:p-12 flex flex-col justify-between overflow-hidden border-r border-gold-500/10">
            
            <!-- Abstract Gold Luxury Pattern Overlay -->
            <div class="absolute -top-24 -left-24 w-72 h-72 rounded-full bg-gold-500/10 blur-3xl pointer-events-none"></div>
            <div class="absolute -bottom-24 -right-24 w-80 h-80 rounded-full bg-amber-600/10 blur-3xl pointer-events-none"></div>
            
            <!-- Top Branding -->
            <div class="relative z-10 flex items-center space-x-3">
                <div class="w-10 h-10 rounded-full gold-button-bg flex items-center justify-center text-obsidian-900 font-serif font-bold text-xl shadow-lg">
                    D
                </div>
                <div>
                    <span class="font-serif font-bold text-xl tracking-wider gold-gradient-text block">DWARAKA</span>
                    <span class="text-[10px] tracking-[0.25em] text-gold-400/80 uppercase block -mt-1 font-semibold">Collection</span>
                </div>
            </div>

            <!-- Middle Luxury Showcase Banner -->
            <div class="relative z-10 my-10">
                <div class="inline-block px-3 py-1 rounded-full bg-gold-500/10 border border-gold-500/30 text-gold-400 text-xs font-semibold uppercase tracking-widest mb-4">
                    Exclusive Portal
                </div>
                <h2 class="font-serif text-3xl lg:text-4xl font-bold text-white leading-tight mb-4">
                    Crafting Timeless <span class="gold-gradient-text italic">Elegance</span> & Luxury
                </h2>
                <p class="text-xs lg:text-sm text-slate-400 leading-relaxed max-w-md">
                    Welcome to the Dwaraka Collection Management System. Manage micro gold chains, bridal choker sets, orders, and customer experiences with precision.
                </p>
            </div>

            <!-- Bottom Badges -->
            <div class="relative z-10 flex items-center space-x-6 text-xs text-slate-400 border-t border-gold-500/10 pt-6">
                <div class="flex items-center space-x-2">
                    <i class="fa-solid fa-shield-halved text-gold-400"></i>
                    <span>Secure Auth</span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fa-solid fa-gem text-gold-400"></i>
                    <span>18K Micro Gold ERP</span>
                </div>
            </div>

        </div>

        <!-- RIGHT PANEL: Admin Login Form -->
        <div class="lg:col-span-6 p-8 lg:p-14 flex flex-col justify-center bg-obsidian-900/90 backdrop-blur-md">
            
            <div class="max-w-md mx-auto w-full">
                
                <!-- Title Header -->
                <div class="mb-8 text-center lg:text-left">
                    <span class="text-xs font-bold uppercase tracking-[0.2em] text-gold-400 block mb-1">Admin Portal</span>
                    <h3 class="font-serif text-2xl lg:text-3xl font-bold text-white mb-2">Welcome Back</h3>
                    <p class="text-xs text-slate-400">Please enter your credentials to access the admin dashboard.</p>
                </div>

                <!-- Session Flash Message -->
                <?php if(session('error')): ?>
                    <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-xs flex items-center space-x-3">
                        <i class="fa-solid fa-circle-exclamation text-base"></i>
                        <span><?php echo e(session('error')); ?></span>
                    </div>
                <?php endif; ?>

                <?php if(session('info')): ?>
                    <div class="mb-6 p-4 rounded-xl bg-gold-500/10 border border-gold-500/30 text-gold-400 text-xs flex items-center space-x-3">
                        <i class="fa-solid fa-circle-info text-base"></i>
                        <span><?php echo e(session('info')); ?></span>
                    </div>
                <?php endif; ?>

                <!-- Validation Error Summary -->
                <?php if($errors->has('login')): ?>
                    <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-xs flex items-center space-x-3">
                        <i class="fa-solid fa-circle-xmark text-base"></i>
                        <span><?php echo e($errors->first('login')); ?></span>
                    </div>
                <?php endif; ?>

                <!-- Form -->
                <form action="<?php echo e(route('admin.login.submit')); ?>" method="POST" class="space-y-5">
                    <?php echo csrf_field(); ?>

                    <!-- Username Field -->
                    <div>
                        <label for="username" class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
                            Username <span class="text-gold-400">*</span>
                        </label>
                        <div class="relative">
                            <i class="fa-solid fa-user-gear absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
                            <input 
                                type="text" 
                                id="username" 
                                name="username" 
                                value="<?php echo e(old('username')); ?>" 
                                placeholder="Enter admin username"
                                required
                                autofocus
                                class="w-full pl-11 pr-4 py-3.5 bg-obsidian-800 border border-slate-700 rounded-xl text-xs lg:text-sm text-white placeholder-slate-500 focus:outline-none focus:border-gold-500 focus:ring-1 focus:ring-gold-500 transition-all"
                            >
                        </div>
                        <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-1.5 text-[11px] text-red-400"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Password Field -->
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <label for="password" class="block text-xs font-semibold text-slate-300 uppercase tracking-wider">
                                Password <span class="text-gold-400">*</span>
                            </label>
                        </div>
                        <div class="relative">
                            <i class="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                placeholder="Enter password"
                                required
                                class="w-full pl-11 pr-11 py-3.5 bg-obsidian-800 border border-slate-700 rounded-xl text-xs lg:text-sm text-white placeholder-slate-500 focus:outline-none focus:border-gold-500 focus:ring-1 focus:ring-gold-500 transition-all"
                            >
                            <button 
                                type="button" 
                                onclick="togglePasswordVisibility()" 
                                class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-gold-400 transition-colors"
                            >
                                <i id="password-toggle-icon" class="fa-solid fa-eye text-sm"></i>
                            </button>
                        </div>
                        <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-1.5 text-[11px] text-red-400"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Remember Me -->
                    <div class="flex items-center justify-between pt-1">
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="checkbox" name="remember" class="w-4 h-4 rounded bg-obsidian-800 border-slate-700 text-gold-500 focus:ring-gold-500 focus:ring-offset-obsidian-900">
                            <span class="text-xs text-slate-400">Remember session</span>
                        </label>
                    </div>

                    <!-- Submit Button -->
                    <button 
                        type="submit" 
                        class="w-full py-4 rounded-xl gold-button-bg text-obsidian-900 font-bold text-xs uppercase tracking-widest shadow-lg shadow-gold-500/20 hover:scale-[1.01] active:scale-[0.99] transition-all duration-200 mt-2"
                    >
                        LOGIN TO DASHBOARD
                    </button>
                </form>

            </div>

        </div>

    </div>

    <script>
        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const toggleIcon = document.getElementById('password-toggle-icon');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }
    </script>
</body>
</html>
<?php /**PATH F:\dwaraka_backend\resources\views/admin/auth/login.blade.php ENDPATH**/ ?>