<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yönetici Girişi | EmlakKonut Panel</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <script>
        tailwind.config = {
            prefix: 'tw-',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    }
                }
            }
        }
    </script>
</head>
<body class="tw-bg-white tw-font-sans">

    <div class="tw-min-h-screen tw-flex">
        
        <div class="tw-hidden lg:tw-flex tw-w-1/2 tw-relative tw-items-center tw-justify-center tw-overflow-hidden">
            <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
                 class="tw-absolute tw-inset-0 tw-w-full tw-h-full tw-object-cover tw-scale-105" alt="Login Background">
            
            <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-br tw-from-[#0f172a]/95 tw-via-[#0f172a]/80 tw-to-blue-900/90 tw-z-0"></div>
            
            <div class="tw-relative tw-z-10 tw-p-12 tw-text-white tw-text-center">
                <div class="tw-mb-8">
                    <div class="tw-w-24 tw-h-24 tw-bg-blue-600 tw-rounded-[1.5rem] tw-flex tw-items-center tw-justify-center tw-mx-auto tw-shadow-2xl tw-shadow-blue-500/40">
                        <i class="fa-solid fa-building-user tw-text-5xl tw-text-white"></i>
                    </div>
                </div>
                <h2 class="tw-text-4xl tw-font-black tw-mb-4 tw-tracking-tight tw-drop-shadow-lg">Emlak Yönetim Paneli</h2>
                <p class="tw-text-blue-100 tw-text-lg tw-max-w-md tw-mx-auto tw-leading-relaxed tw-font-medium tw-opacity-90">
                    Portföyünüzü yönetin, müşteri taleplerini karşılayın ve işinizi bir üst seviyeye taşıyın.
                </p>
            </div>
            
            <div class="tw-absolute tw-bottom-8 tw-text-gray-400 tw-text-xs tw-font-medium tw-z-10">
                &copy; <?php echo date('Y'); ?> Mekontsoft Yazılım
            </div>
        </div>

        <div class="tw-w-full lg:tw-w-1/2 tw-flex tw-items-center tw-justify-center tw-p-8 tw-bg-[#f8fafc]">
            <div class="tw-w-full tw-max-w-md tw-bg-white tw-p-8 md:tw-p-10 tw-rounded-[2rem] tw-shadow-2xl tw-shadow-slate-200/50 tw-border tw-border-gray-100">
                
                <div class="tw-text-center tw-mb-10">
                    <h3 class="tw-text-3xl tw-font-black tw-text-gray-900 tw-mb-2">Hoş Geldiniz 👋</h3>
                    <p class="tw-text-gray-500 tw-text-sm tw-font-medium">Yönetim paneline erişmek için giriş yapın.</p>
                </div>

                <?php if(isset($error)): ?>
                    <div class="tw-flex tw-items-center tw-p-4 tw-mb-6 tw-text-sm tw-text-red-800 tw-border tw-border-red-200 tw-rounded-xl tw-bg-red-50 tw-font-medium" role="alert">
                        <i class="fa-solid fa-circle-exclamation tw-mr-3 tw-text-lg"></i>
                        <span class="tw-sr-only">Hata</span>
                        <div><?php echo $error; ?></div>
                    </div>
                <?php endif; ?>

                <form action="<?php echo BASE_URL; ?>/admin/login" method="POST">
                    
                    <div class="tw-mb-5">
                        <label class="tw-block tw-text-gray-700 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest tw-mb-2 tw-px-1">E-Posta Adresi</label>
                        <div class="tw-relative">
                            <span class="tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-4 tw-text-gray-400">
                                <i class="fa-regular fa-envelope"></i>
                            </span>
                            <input type="email" name="email" 
                                   class="tw-w-full tw-pl-11 tw-pr-4 tw-py-3.5 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-xl focus:tw-outline-none focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-transition-all tw-text-gray-700 tw-font-medium placeholder:tw-text-gray-400" 
                                   placeholder="ornek@emlakkonut.com" required>
                        </div>
                    </div>

                    <div class="tw-mb-6">
                        <div class="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-px-1">
                            <label class="tw-block tw-text-gray-700 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest">Şifre</label>
                            <a href="#" class="tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-bold tw-transition-colors">Şifremi Unuttum?</a>
                        </div>
                        <div class="tw-relative">
                            <span class="tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-4 tw-text-gray-400">
                                <i class="fa-solid fa-lock"></i>
                            </span>
                            <input type="password" name="password" id="passwordInput"
                                   class="tw-w-full tw-pl-11 tw-pr-12 tw-py-3.5 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-xl focus:tw-outline-none focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-transition-all tw-text-gray-700 tw-font-medium placeholder:tw-text-gray-400" 
                                   placeholder="••••••••" required>
                            
                            <button type="button" onclick="togglePassword()" class="tw-absolute tw-inset-y-0 tw-right-0 tw-flex tw-items-center tw-pr-4 tw-text-gray-400 hover:tw-text-blue-600 focus:tw-outline-none tw-cursor-pointer tw-transition-colors">
                                <i class="fa-regular fa-eye" id="eyeIcon"></i>
                            </button>
                        </div>
                    </div>

                    <div class="tw-flex tw-items-center tw-mb-8 tw-px-1">
                        <input type="checkbox" id="remember" class="tw-w-4 tw-h-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500 tw-cursor-pointer">
                        <label for="remember" class="tw-ml-2 tw-text-sm tw-font-medium tw-text-gray-500 tw-cursor-pointer select-none">Beni hatırla</label>
                    </div>

                    <button type="submit" class="tw-w-full tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-font-bold tw-py-3.5 tw-rounded-xl tw-transition-all tw-duration-300 tw-shadow-lg tw-shadow-blue-500/30 tw-flex tw-items-center tw-justify-center tw-group hover:tw--translate-y-0.5 tw-tracking-wide">
                        GÜVENLİ GİRİŞ YAP
                        <i class="fa-solid fa-arrow-right tw-ml-2 group-hover:tw-translate-x-1 tw-transition-transform"></i>
                    </button>

                </form>

                <div class="tw-mt-8 tw-text-center tw-pt-6 tw-border-t tw-border-gray-100">
                    <p class="tw-text-[11px] tw-text-gray-400 tw-font-medium tw-leading-relaxed">
                        Bu alana sadece yetkili personel giriş yapabilir. <br>
                        Güvenlik amacıyla IP Adresiniz (<span class="tw-font-bold"><?php echo $_SERVER['REMOTE_ADDR']; ?></span>) kayıt altına alınmaktadır.
                    </p>
                </div>

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

    <script>
        function togglePassword() {
            const passwordInput = document.getElementById('passwordInput');
            const eyeIcon = document.getElementById('eyeIcon');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            }
        }
    </script>

</body>
</html>