<?php if (isset($component)) { $__componentOriginal69dc84650370d1d4dc1b42d016d7226b = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal69dc84650370d1d4dc1b42d016d7226b = $attributes; } ?>
<?php $component = App\View\Components\GuestLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('guest-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\GuestLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <?php
        $lockoutSeconds = 0;
        if ($errors->any()) {
            $firstError = $errors->first('email');
            if (preg_match('/LOCKOUT:(\d+)/', $firstError, $m)) {
                $lockoutSeconds = (int) $m[1];
            }
        }
    ?>

    <?php if($lockoutSeconds > 0): ?>
    <div id="lockout-banner" class="mb-4 sm:mb-5 p-3 sm:p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 rounded-xl shadow-sm" data-seconds="<?php echo e($lockoutSeconds); ?>">
        <div class="flex items-start gap-2 sm:gap-3">
            <div class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-red-100 dark:bg-red-800/40 flex items-center justify-center">
                <i class="fas fa-lock text-red-500 dark:text-red-400 text-xs sm:text-sm"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-xs sm:text-sm font-semibold text-red-700 dark:text-red-300 mb-1">Akun Sementara Diblokir</p>
                <p class="text-xs text-red-600 dark:text-red-400 mb-2 sm:mb-3">Terlalu banyak percobaan gagal. Tunggu hingga waktu selesai atau hubungi admin.</p>
                <div class="flex items-center gap-2 sm:gap-3 mb-2 sm:mb-3">
                    <div class="flex items-center gap-1 sm:gap-1.5 bg-white dark:bg-slate-800 border border-red-200 dark:border-red-700 rounded-lg px-2 sm:px-3 py-1.5 sm:py-2 shadow-sm">
                        <i class="fas fa-hourglass-half text-red-400 text-xs"></i>
                        <span id="lockout-clock" class="font-mono font-bold text-base sm:text-xl text-red-600 dark:text-red-400 tabular-nums tracking-widest"><?php echo e(gmdate('i:s', $lockoutSeconds)); ?></span>
                    </div>
                    <div class="text-xs text-red-500 dark:text-red-400"><span id="lockout-label">tersisa</span></div>
                </div>
                <div class="w-full h-2 sm:h-2.5 bg-red-100 dark:bg-red-900/40 rounded-full overflow-hidden">
                    <div id="lockout-bar" class="h-full rounded-full" style="width:100%; background: linear-gradient(90deg,#f87171,#fb923c); transition: width 1s linear;"></div>
                </div>
                <div id="lockout-unlocked" class="hidden mt-2 sm:mt-3 items-center gap-2 p-2 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg border border-emerald-200 dark:border-emerald-800">
                    <i class="fas fa-lock-open text-emerald-500 text-xs sm:text-sm"></i>
                    <span class="text-xs sm:text-sm font-semibold text-emerald-600 dark:text-emerald-400">Blokir selesai — Silakan login kembali!</span>
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- Info Banner -->
    <div class="mb-4 sm:mb-6 p-3 sm:p-4 bg-teal-50 dark:bg-teal-900/20 border border-teal-100 dark:border-teal-800/50 rounded-xl shadow-sm">
        <div class="flex items-start gap-2 sm:gap-3">
            <div class="flex-shrink-0 bg-teal-100 dark:bg-teal-800 rounded-lg p-2">
                <i class="fas fa-info-circle text-teal-600 dark:text-teal-400 text-xs sm:text-sm"></i>
            </div>
            <span class="text-xs sm:text-sm text-teal-800 dark:text-teal-200 leading-relaxed">
                <strong>Pemberitahuan Aman:</strong> Sistem ini mewajibkan penggunaan akun <strong>@gmail.com</strong> untuk verifikasi 2-langkah otomatis.
            </span>
        </div>
    </div>

    <form method="POST" action="<?php echo e(route('login')); ?>" class="space-y-4 sm:space-y-5" id="login-form">
        <?php echo csrf_field(); ?>

        <!-- Email Field -->
        <div>
            <label for="email" class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-2 sm:pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-envelope text-gray-400 text-xs sm:text-sm"></i>
                </div>
                <input id="email" type="email" name="email" value="<?php echo e(old('email')); ?>" required autofocus autocomplete="email"
                    class="w-full pl-8 sm:pl-10 pr-10 py-2 sm:py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-gray-900 dark:text-gray-100 placeholder-gray-400 text-xs sm:text-sm transition-all outline-none"
                    placeholder="nama@gmail.com">
                <div class="absolute inset-y-0 right-0 pr-2 sm:pr-3 flex items-center hidden" id="email-check">
                    <i class="fas fa-check-circle text-green-500 text-sm"></i>
                </div>
            </div>
            <div id="email-error" class="text-xs text-red-500 dark:text-red-400 mt-1 hidden"></div>
        </div>

        <!-- Password Field -->
        <div>
            <label for="password" class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-2 sm:pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-lock text-gray-400 text-xs sm:text-sm"></i>
                </div>
                <input id="password" type="password" name="password" required autocomplete="current-password"
                    class="w-full pl-8 sm:pl-10 pr-10 py-2 sm:py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-1 focus:ring-teal-500 focus:border-teal-500 text-gray-900 dark:text-gray-100 placeholder-gray-400 text-xs sm:text-sm transition-colors"
                    placeholder="••••••••">
                <button type="button" onclick="togglePassword()" class="absolute inset-y-0 right-0 pr-2 sm:pr-3 flex items-center">
                    <i id="toggle-icon" class="fas fa-eye text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xs sm:text-sm cursor-pointer"></i>
                </button>
            </div>
            <div class="mt-2 space-y-1.5">
                <div class="flex gap-1">
                    <div id="pwd-strength-1" class="h-1 flex-1 bg-gray-200 dark:bg-gray-700 rounded transition-all"></div>
                    <div id="pwd-strength-2" class="h-1 flex-1 bg-gray-200 dark:bg-gray-700 rounded transition-all"></div>
                    <div id="pwd-strength-3" class="h-1 flex-1 bg-gray-200 dark:bg-gray-700 rounded transition-all"></div>
                </div>
                <p id="pwd-strength-text" class="text-xs text-gray-500 dark:text-gray-400 hidden"></p>
            </div>
        </div>

        <!-- Remember Me -->
        <div class="flex items-center">
            <input id="remember_me" name="remember" type="checkbox" class="h-3 w-3 sm:h-4 sm:w-4 text-teal-600 border-gray-300 dark:border-gray-700 rounded focus:ring-teal-500">
            <label for="remember_me" class="ml-2 text-xs sm:text-sm text-gray-700 dark:text-gray-300">Ingat perangkat ini</label>
        </div>

        <!-- CAPTCHA Section -->
        <div class="space-y-2 pt-2 sm:pt-0">
            <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">
                <i class="fas fa-shield-alt text-teal-500 mr-1 text-xs"></i>Verifikasi Keamanan
            </label>
            <div class="flex gap-2 sm:gap-3 flex-col sm:flex-row">
                <div class="flex-shrink-0 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg p-2 overflow-hidden shadow-sm">
                    <img id="captcha-image" src="/captcha/<?php echo e($captchaChecksum); ?>" alt="CAPTCHA" 
                         class="h-32 w-full sm:h-40 sm:w-80 object-contain cursor-pointer hover:opacity-80 transition" title="Klik untuk refresh">
                </div>
                <button type="button" id="captcha-refresh-btn"
                        class="flex-shrink-0 px-2 sm:px-3 py-2 bg-teal-100 dark:bg-teal-900/30 hover:bg-teal-200 dark:hover:bg-teal-900/50 border border-teal-300 dark:border-teal-700 rounded-lg text-teal-600 dark:text-teal-400 transition-all duration-200 flex items-center justify-center disabled:opacity-50"
                        title="Refresh CAPTCHA">
                    <i class="fas fa-redo text-xs sm:text-sm"></i>
                </button>
            </div>
            <div class="relative">
                <input id="captcha" type="text" name="captcha" placeholder="Masukkan teks dari gambar" required maxlength="5"
                       class="w-full px-3 py-2 sm:py-3 pr-10 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-gray-900 dark:text-gray-100 placeholder-gray-400 text-xs sm:text-sm transition-all outline-none uppercase"
                       autocomplete="off">
                <div class="absolute inset-y-0 right-0 pr-2 sm:pr-3 flex items-center hidden" id="captcha-check">
                    <i class="fas fa-check-circle text-green-500 text-sm"></i>
                </div>
            </div>
            <div id="captcha-counter" class="text-xs text-gray-500 dark:text-gray-400 mt-1 hidden"><span id="captcha-length">0</span>/5 karakter</div>
            <input type="hidden" name="captcha_checksum" id="captcha_checksum" value="<?php echo e($captchaChecksum); ?>">
        </div>

        <!-- Submit Button -->
        <button type="submit" id="submit-btn"
            class="w-full py-2 sm:py-3 bg-teal-600 hover:bg-teal-700 text-white font-medium rounded-lg text-xs sm:text-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-slate-400"
            <?php echo e($lockoutSeconds > 0 ? 'disabled' : ''); ?>>
            <span id="submit-btn-text">
                <?php if($lockoutSeconds > 0): ?>
                    Tunggu <?php echo e(gmdate('i:s', $lockoutSeconds)); ?>

                <?php else: ?>
                    Masuk ke Sistem
                <?php endif; ?>
            </span>
        </button>
    </form>

    <!-- Divider -->
    <div class="relative my-4 sm:my-5">
        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-200 dark:border-gray-700"></div></div>
        <div class="relative flex justify-center text-xs">
            <span class="px-3 bg-white dark:bg-slate-800 text-gray-400 dark:text-gray-500 font-medium tracking-wide">atau masuk dengan</span>
        </div>
    </div>

    <!-- Google Login -->
    <a href="<?php echo e(route('auth.google')); ?>"
       class="w-full flex items-center justify-center gap-2 sm:gap-3 py-2 sm:py-3 px-3 sm:px-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-200 text-xs sm:text-sm font-medium transition-all duration-200 shadow-sm hover:shadow-md group">
        <svg class="w-3 h-3 sm:w-4 sm:h-4 flex-shrink-0" viewBox="0 0 24 24">
            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
        </svg>
        <span>Masuk dengan Google</span>
        <i class="fas fa-arrow-right text-xs text-gray-300 dark:text-gray-600 ml-auto group-hover:text-teal-500 transition-all hidden sm:inline"></i>
    </a>
    <p class="mt-2 text-center text-xs text-gray-400 dark:text-gray-600">
        <i class="fas fa-shield-alt mr-1"></i>Login Google tetap memerlukan verifikasi OTP
    </p>

    <!-- Forgot Password -->
    <div class="mt-4 sm:mt-6 text-center">
        <a href="<?php echo e(route('password.request')); ?>" class="text-xs sm:text-sm text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300 transition-colors inline-flex items-center">
            <i class="fas fa-key mr-1 text-xs"></i>Lupa password?
        </a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        let formState = { email: false, password: false, captcha: false };

        function updateSubmitButton() {
            const btn = document.getElementById('submit-btn');
            btn.disabled = !(formState.email && formState.password && formState.captcha);
        }

        function togglePassword() {
            const input = document.getElementById('password');
            const icon = document.getElementById('toggle-icon');
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }

        // Email validation
        document.getElementById('email').addEventListener('input', function() {
            const email = this.value.trim();
            const checkIcon = document.getElementById('email-check');
            const errorMsg = document.getElementById('email-error');
            
            if (!email) {
                checkIcon.classList.add('hidden');
                errorMsg.classList.add('hidden');
                formState.email = false;
            } else if (!email.includes('@')) {
                checkIcon.classList.add('hidden');
                errorMsg.classList.remove('hidden');
                errorMsg.textContent = 'Email tidak valid';
                formState.email = false;
            } else if (!email.endsWith('@gmail.com')) {
                checkIcon.classList.add('hidden');
                errorMsg.classList.remove('hidden');
                errorMsg.textContent = 'Harus menggunakan email @gmail.com';
                formState.email = false;
            } else {
                checkIcon.classList.remove('hidden');
                errorMsg.classList.add('hidden');
                formState.email = true;
            }
            updateSubmitButton();
        });

        // Password strength
        document.getElementById('password').addEventListener('input', function() {
            const pwd = this.value;
            const bar1 = document.getElementById('pwd-strength-1');
            const bar2 = document.getElementById('pwd-strength-2');
            const bar3 = document.getElementById('pwd-strength-3');
            const text = document.getElementById('pwd-strength-text');
            
            bar1.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-green-500');
            bar2.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-green-500');
            bar3.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-green-500');
            
            if (!pwd) {
                text.classList.add('hidden');
                formState.password = false;
            } else if (pwd.length < 6) {
                bar1.classList.add('bg-red-500');
                text.classList.remove('hidden');
                text.textContent = 'Lemah - minimal 6 karakter';
                text.style.color = '#ef4444';
                formState.password = false;
            } else if (pwd.length < 10) {
                bar1.classList.add('bg-yellow-500');
                bar2.classList.add('bg-yellow-500');
                text.classList.remove('hidden');
                text.textContent = 'Sedang - tambah uppercase/angka/simbol untuk lebih kuat';
                text.style.color = '#eab308';
                formState.password = true;
            } else {
                bar1.classList.add('bg-green-500');
                bar2.classList.add('bg-green-500');
                bar3.classList.add('bg-green-500');
                text.classList.remove('hidden');
                text.textContent = 'Kuat - siap untuk login';
                text.style.color = '#22c55e';
                formState.password = true;
            }
            updateSubmitButton();
        });

        // CAPTCHA validation
        document.getElementById('captcha').addEventListener('input', function() {
            const val = this.value.trim().toUpperCase();
            const checkIcon = document.getElementById('captcha-check');
            const counter = document.getElementById('captcha-counter');
            
            document.getElementById('captcha-length').textContent = val.length;
            
            if (val.length === 0) {
                checkIcon.classList.add('hidden');
                counter.classList.add('hidden');
                formState.captcha = false;
            } else {
                counter.classList.remove('hidden');
                if (val.length === 5) {
                    checkIcon.classList.remove('hidden');
                    formState.captcha = true;
                } else {
                    checkIcon.classList.add('hidden');
                    formState.captcha = false;
                }
            }
            updateSubmitButton();
        });

        // CAPTCHA refresh
        document.getElementById('captcha-refresh-btn').addEventListener('click', (e) => {
            e.preventDefault();
            const btn = document.getElementById('captcha-refresh-btn');
            btn.disabled = true;
            btn.querySelector('i').classList.add('animate-spin');

            fetch('<?php echo e(route('captcha.refresh')); ?>', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.checksum) {
                    const img = document.getElementById('captcha-image');
                    img.src = `/captcha/${data.checksum}?t=${new Date().getTime()}`;
                    document.getElementById('captcha_checksum').value = data.checksum;
                    document.getElementById('captcha').value = '';
                    document.getElementById('captcha').focus();
                    formState.captcha = false;
                    updateSubmitButton();
                }
            })
            .finally(() => {
                btn.disabled = false;
                btn.querySelector('i').classList.remove('animate-spin');
            });
        });

        document.getElementById('captcha-image').addEventListener('click', (e) => {
            e.preventDefault();
            document.getElementById('captcha-refresh-btn').click();
        });

        // Form submission
        document.getElementById('login-form').addEventListener('submit', function(e) {
            if (!formState.email || !formState.password || !formState.captcha) {
                e.preventDefault();
                Swal.fire({
                    icon: 'warning',
                    title: 'Form Tidak Lengkap',
                    text: 'Pastikan semua field sudah valid',
                    confirmButtonColor: '#14b8a6'
                });
                return false;
            }
        });

        // Error/Success alerts
        <?php if($errors->any() && $lockoutSeconds === 0): ?>
            <?php $firstError = $errors->first(); ?>
            Swal.fire({
                icon: 'error',
                title: 'Login Gagal',
                text: '<?php echo e($firstError); ?>',
                confirmButtonColor: '#14b8a6',
                confirmButtonText: 'OK'
            });
        <?php endif; ?>

        <?php if(session('status')): ?>
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: '<?php echo e(session('status')); ?>',
                confirmButtonColor: '#14b8a6',
                timer: 3000,
                timerProgressBar: true
            });
        <?php endif; ?>

        // Initialize form state based on current field values
        function initializeFormState() {
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            const captcha = document.getElementById('captcha').value.trim();

            // Validate email
            if (email && email.includes('@') && email.endsWith('@gmail.com')) {
                formState.email = true;
                document.getElementById('email-check').classList.remove('hidden');
            }

            // Validate password
            if (password && password.length >= 6) {
                formState.password = true;
                const bars = [document.getElementById('pwd-strength-1'), document.getElementById('pwd-strength-2'), document.getElementById('pwd-strength-3')];
                const text = document.getElementById('pwd-strength-text');
                bars.forEach(b => b.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-green-500'));
                if (password.length < 10) {
                    bars[0].classList.add('bg-yellow-500');
                    bars[1].classList.add('bg-yellow-500');
                    text.textContent = 'Sedang - tambah uppercase/angka/simbol untuk lebih kuat';
                    text.style.color = '#eab308';
                } else {
                    bars[0].classList.add('bg-green-500');
                    bars[1].classList.add('bg-green-500');
                    bars[2].classList.add('bg-green-500');
                    text.textContent = 'Kuat - siap untuk login';
                    text.style.color = '#22c55e';
                }
                text.classList.remove('hidden');
            }

            // Validate captcha
            if (captcha && captcha.length === 5) {
                formState.captcha = true;
                document.getElementById('captcha-check').classList.remove('hidden');
                document.getElementById('captcha-counter').classList.remove('hidden');
                document.getElementById('captcha-length').textContent = '5';
            }
        }

        // Initialize form state on page load
        initializeFormState();

        // Lockout timer
        const lockoutBanner = document.getElementById('lockout-banner');
        if (lockoutBanner) {
            let remaining = parseInt(lockoutBanner.dataset.seconds);
            const updateClock = () => {
                const minutes = Math.floor(remaining / 60);
                const seconds = remaining % 60;
                document.getElementById('lockout-clock').textContent = String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
                document.getElementById('lockout-bar').style.width = (remaining / parseInt(lockoutBanner.dataset.seconds)) * 100 + '%';
                
                if (remaining <= 0) {
                    clearInterval(lockoutTimer);
                    lockoutBanner.classList.add('hidden');
                    document.getElementById('lockout-unlocked').classList.remove('hidden');
                    document.getElementById('lockout-unlocked').classList.add('flex');
                    document.getElementById('submit-btn').disabled = false;
                } else {
                    remaining--;
                }
            };
            updateClock();
            const lockoutTimer = setInterval(updateClock, 1000);
        }

        updateSubmitButton();
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal69dc84650370d1d4dc1b42d016d7226b)): ?>
<?php $attributes = $__attributesOriginal69dc84650370d1d4dc1b42d016d7226b; ?>
<?php unset($__attributesOriginal69dc84650370d1d4dc1b42d016d7226b); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal69dc84650370d1d4dc1b42d016d7226b)): ?>
<?php $component = $__componentOriginal69dc84650370d1d4dc1b42d016d7226b; ?>
<?php unset($__componentOriginal69dc84650370d1d4dc1b42d016d7226b); ?>
<?php endif; ?>
<?php /**PATH C:\laragon\www\KESEHATAN\resources\views/auth/login.blade.php ENDPATH**/ ?>