<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - PK.POM 2026 Monitoring</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @import  url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
        body, html { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            background-color: #f0f4f8;
        }
        .login-container {
            width: 100vw;
            height: 100vh;
            background-image: url('<?php echo e(asset("img/login_bg_2026.png")); ?>');
            /* Menggunakan 100% 100% untuk PC agar tidak ada bagian gambar yang terpotong */
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 8%; /* Posisi kartu login di area putih gambar */
        }
        
        .login-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 3rem; /* Lebih membulat sesuai gambar */
            padding: 3.5rem;
            width: 100%;
            max-width: 480px;
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1280px) {
            .login-container {
                padding-right: 5%;
            }
        }

        @media (max-width: 1024px) {
            .login-container {
                background-size: cover; /* Pada tablet/HP lebih baik cover agar proporsi tetap bagus */
                justify-content: center;
                padding-right: 0;
            }
            .login-card {
                max-width: 420px;
                padding: 2.5rem;
            }
        }

        @media (max-width: 640px) {
            .login-container {
                background-position: 30% center; /* Geser background agar logo kiri tetap terlihat di HP */
                padding: 1.5rem;
                height: auto;
                min-height: 100vh;
                align-items: flex-start;
                padding-top: 5rem;
            }
            .login-card {
                border-radius: 2rem;
                padding: 2rem;
            }
        }

        .input-group {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .input-group i {
            position: absolute;
            left: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: #34A853;
            font-size: 1.1rem;
        }

        .custom-input {
            width: 100%;
            padding: 1rem 1rem 1rem 3.5rem;
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 1rem;
            outline: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .custom-input:focus {
            border-color: #34A853;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(52, 168, 83, 0.1);
        }

        .login-btn {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, #34A853 0%, #4285F4 100%);
            color: white;
            border: none;
            border-radius: 1rem;
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 15px -3px rgba(52, 168, 83, 0.3);
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(52, 168, 83, 0.4);
            opacity: 0.95;
        }

        .login-btn:active {
            transform: translateY(0);
        }

        .error-text {
            color: #ef4444;
            font-size: 0.75rem;
            margin-top: 0.5rem;
            margin-left: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <div class="mb-8">
                <h3 class="text-green-600 font-bold text-sm mb-1">Halo, Selamat Datang! 👋</h3>
                <h2 class="text-3xl font-extrabold text-gray-900 mb-2">Masuk Akun</h2>
                <p class="text-gray-500 text-sm leading-relaxed">Silakan masukkan detail akun Anda untuk mengakses sistem monitoring.</p>
            </div>

            <form method="POST" action="<?php echo e(route('login')); ?>">
                <?php echo csrf_field(); ?>
                
                <div class="input-group">
                    <i class="far fa-envelope"></i>
                    <input type="email" name="email" value="<?php echo e(old('email')); ?>" required autofocus
                        class="custom-input"
                        placeholder="Alamat Email">
                    <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="error-text"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <div class="input-group">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="password" name="password" required
                        class="custom-input"
                        placeholder="Kata Sandi">
                    <button type="button" onclick="togglePassword()" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-green-600 transition-colors">
                        <i class="far fa-eye" id="eyeIcon" style="position: static; color: inherit; font-size: 0.9rem;"></i>
                    </button>
                    <?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="error-text"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <div class="flex items-center justify-between mb-8 px-1">
                    <label class="flex items-center cursor-pointer group">
                        <input type="checkbox" name="remember" class="w-4 h-4 rounded border-gray-300 text-green-600 focus:ring-green-500">
                        <span class="ml-2 text-sm text-gray-600 group-hover:text-gray-900 transition-colors">Ingat saya</span>
                    </label>
                    <a href="#" onclick="alert('Silakan hubungi Administrator')" class="text-sm font-semibold text-green-600 hover:text-blue-600 transition-colors">Lupa password?</a>
                </div>

                <button type="submit" class="login-btn flex items-center justify-center space-x-2">
                    <i class="fas fa-sign-in-alt" style="position: static; color: white;"></i>
                    <span>MASUK SEKARANG</span>
                </button>
            </form>

            <div class="mt-8 pt-6 border-t border-gray-100 text-center">
                <p class="text-[10px] text-gray-400 font-medium">
                    Pemerintah Kabupaten Sumba Tengah<br>
                    Powered by: Dinas Komunikasi dan Informatika
                </p>
            </div>
        </div>
    </div>

    <script>
        function togglePassword() {
            const password = document.getElementById('password');
            const eyeIcon = document.getElementById('eyeIcon');
            if (password.type === 'password') {
                password.type = 'text';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            } else {
                password.type = 'password';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            }
        }
    </script>
</body>
</html>
<?php /**PATH /home/sumba001/public_html/pom500.sumbatengahkab.go.id/resources/views/auth/login.blade.php ENDPATH**/ ?>