
<?php $__env->startSection('title', 'Login Admin || Klinik PKP'); ?>

<?php $__env->startSection('content'); ?>
    <style>
        body {
            background: #f4f4f4;
        }

        .login-bg {
            background: #535963;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .login-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
            max-width: 380px;
            margin: 48px auto 0 auto;
            padding: 36px 32px 28px 32px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .login-icon {
            width: 56px;
            height: 56px;
            background: #eaf6f3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            color: #22c1b6;
            margin-bottom: 18px;
        }

        .login-title {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 6px;
            color: #222;
        }

        .login-desc {
            color: #6b7280;
            font-size: 1rem;
            margin-bottom: 22px;
            text-align: center;
        }

        .login-form-group {
            width: 100%;
            margin-bottom: 18px;
        }

        .login-label {
            font-weight: 600;
            color: #222;
            font-size: 0.98rem;
            margin-bottom: 4px;
        }

        .login-input-wrap {
            position: relative;
        }

        .login-input {
            width: 100%;
            padding: 10px 38px 10px 38px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 1rem;
            background: #f9fafb;
            color: #222;
            outline: none;
            transition: border 0.2s;
        }

        .login-input:focus {
            border: 1.5px solid #22c1b6;
            background: #fff;
        }

        .login-input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #b0b8c1;
            font-size: 1.1rem;
        }

        .login-input-eye {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #b0b8c1;
            font-size: 1.1rem;
            cursor: pointer;
        }

        .login-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
            width: 100%;
        }

        .login-checkbox {
            accent-color: #22c1b6;
            margin-right: 6px;
        }

        .login-link {
            color: #22c1b6;
            font-size: 0.98rem;
            text-decoration: none;
        }

        .login-btn {
            width: 100%;
            background: #22c1b6;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 10px 0;
            font-size: 1.1rem;
            font-weight: 600;
            margin-top: 6px;
            transition: background 0.2s;
        }

        .login-btn:hover {
            background: #179e8c;
        }

        .login-footer {
            background: #44474a;
            color: #bfc5c9;
            padding: 24px 0 10px 0;
            text-align: center;
            margin-top: 48px;
        }

        .login-footer-logo {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #23272b;
            border-radius: 8px;
            padding: 4px 12px;
            margin-bottom: 8px;
        }

        .login-footer-logo i {
            font-size: 1.1rem;
            color: #fff;
        }

        .login-footer-logo span {
            color: #fff;
            font-weight: 700;
            background: #d72660;
            border-radius: 4px;
            padding: 2px 8px;
            margin-left: 4px;
            font-size: 0.98rem;
        }

        .login-footer-status {
            margin: 10px 0 2px 0;
        }

        .login-footer-status span {
            margin: 0 8px;
            font-size: 0.98rem;
        }

        .login-footer-status .ok {
            color: #22c1b6;
        }

        .login-footer-status .secure {
            color: #1cbf4b;
        }

        .login-footer-status .info {
            color: #bfc5c9;
        }

        .login-footer-copy {
            color: #bfc5c9;
            font-size: 0.95rem;
            margin-top: 8px;
        }
    </style>
    <div class="login-bg">
        <div style="height:32px;"></div>
        <div class="login-card">
            <div class="login-icon">
                <i class="fas fa-user-circle"></i>
            </div>
            <div class="login-title">Masuk ke Sistem</div>
            <div class="login-desc">Silakan masuk untuk mengakses layanan internal Kementrian PKP</div>

            
            <?php if($errors->any()): ?>
                <div
                    style="width:100%;margin-bottom:12px;padding:10px 12px;border-radius:8px;background:#fde8e8;color:#991b1b;font-size:0.98rem;">
                    <?php echo e($errors->first()); ?>

                </div>
            <?php endif; ?>
            <?php if(session('status')): ?>
                <div
                    style="width:100%;margin-bottom:12px;padding:10px 12px;border-radius:8px;background:#e7f9f4;color:#065f46;font-size:0.98rem;">
                    <?php echo e(session('status')); ?>

                </div>
            <?php endif; ?>

            <form method="POST" action="<?php echo e(route('login')); ?>">
                <?php echo csrf_field(); ?>
                <div class="login-form-group">
                    <label class="login-label" for="email">Email</label>
                    <div class="login-input-wrap">
                        <span class="login-input-icon"><i class="fas fa-user"></i></span>
                        <input id="email" type="email" class="login-input" name="email"
                            placeholder="Masukkan Email Anda" value="<?php echo e(old('email')); ?>" required autofocus>
                    </div>
                </div>
                <div class="login-form-group">
                    <label class="login-label" for="password">Password</label>
                    <div class="login-input-wrap">
                        <span class="login-input-icon"><i class="fas fa-lock"></i></span>
                        <input id="password" type="password" class="login-input" name="password"
                            placeholder="Masukkan password Anda" required>
                    </div>
                </div>
                <div class="login-row">
                    <label style="display:flex;align-items:center;font-size:0.98rem;">
                        <input type="checkbox" class="login-checkbox" name="remember"
                            <?php echo e(old('remember') ? 'checked' : ''); ?>> Ingat saya
                    </label>
                    <a href="#" class="login-link">Lupa password?</a>
                </div>
                <button type="submit" class="login-btn">Masuk</button>
            </form>
        </div>
        <div class="login-footer">
            <div class="login-footer-logo">
                <i class="fas fa-building"></i>
                <span>Kementrian PKP</span>
            </div>
            <div class="login-footer-status">
                <span class="ok"><i class="fas fa-shield-alt"></i> Koneksi Aman</span>
                <span class="secure"><i class="fas fa-lock"></i> Data Terlindungi</span>
            </div>
            <div class="login-footer-copy">
                © 2025 Kementrian PKP. Semua hak dilindungi undang-undang.
            </div>
        </div>
    </div>

    <script>
        // toggle password visibility
        document.addEventListener('DOMContentLoaded', function() {
            const eye = document.querySelector('.login-input-eye');
            const pass = document.getElementById('password');
            if (eye && pass) {
                eye.addEventListener('click', () => {
                    const icon = eye.querySelector('i');
                    const isHidden = pass.type === 'password';
                    pass.type = isHidden ? 'text' : 'password';
                    icon.classList.toggle('fa-eye-slash', !isHidden);
                    icon.classList.toggle('fa-eye', isHidden);
                });
            }

            // === AUTO SAVE LOGIN DATA TO LOCALSTORAGE ===
            // Ambil data user/token dari session Laravel (jika ada)
            const user = <?php echo json_encode(session('auth.user'), 15, 512) ?>;
            const accessToken = <?php echo json_encode(session('auth.token'), 15, 512) ?>;
            const refreshToken = <?php echo json_encode(session('auth.refresh_token'), 15, 512) ?>;
            if (user && accessToken) {
                // Simpan ke localStorage agar halaman admin bisa akses site_id/token
                localStorage.setItem('user', JSON.stringify(user));
                localStorage.setItem('accessToken', accessToken);
                if (refreshToken) localStorage.setItem('refreshToken', refreshToken);
            }
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.layout1', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\laravel\krs-jawa3-template\krs-jawa3-web-template\resources\views/pages/login.blade.php ENDPATH**/ ?>