<?php
include 'config.php';

// Auto Seed: Buat Akun Default jika belum ada
$check = mysqli_query($conn, "SELECT id FROM users LIMIT 1");
if(mysqli_num_rows($check) == 0) {
    $pass = password_hash('ADMIN123', PASSWORD_DEFAULT);
    mysqli_query($conn, "INSERT INTO users (username, password, role) VALUES ('admin', '$pass', 'admin')");
    $pass2 = password_hash('123', PASSWORD_DEFAULT);
    mysqli_query($conn, "INSERT INTO users (username, password, role) VALUES ('pegawai', '$pass2', 'pegawai')");
}

if (isset($_POST['login'])) {
    $username = $_POST['username'];
    $password = $_POST['password'];
    
    $stmt = $conn->prepare("SELECT * FROM users WHERE username = ?");
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        $data = $result->fetch_assoc();
        if (password_verify($password, $data['password'])) {
            $_SESSION['user_id'] = $data['id'];
            $_SESSION['username'] = $data['username'];
            $_SESSION['role'] = $data['role'];
            header("Location: index.php");
            exit();
        }
    }
    $error = "Username atau Password salah!";
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login — ESCOBAR BILLING</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}

        :root{
            --cyan:#06d6a0;
            --cyan-glow:rgba(6,214,160,.35);
            --purple:#8338ec;
            --purple-glow:rgba(131,56,236,.3);
            --red:#ff006e;
            --dark:#030712;
            --card:rgba(10,15,30,.75);
            --border:rgba(6,214,160,.12);
        }

        html,body{height:100%;overflow:hidden}

        body{
            font-family:'Rajdhani',sans-serif;
            background:var(--dark);
            display:flex;align-items:center;justify-content:center;
            position:relative;
        }

        /* ═══════ ANIMATED BACKGROUND ═══════ */
        .bg-grid{
            position:fixed;inset:0;z-index:0;
            background-image:
                linear-gradient(rgba(6,214,160,.04) 1px,transparent 1px),
                linear-gradient(90deg,rgba(6,214,160,.04) 1px,transparent 1px);
            background-size:60px 60px;
            animation:gridMove 20s linear infinite;
        }
        @keyframes gridMove{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}

        .bg-orb{
            position:fixed;border-radius:50%;filter:blur(120px);z-index:0;
            animation:orbFloat 8s ease-in-out infinite alternate;
        }
        .bg-orb.o1{width:500px;height:500px;background:rgba(6,214,160,.12);top:-10%;left:-10%;animation-duration:10s}
        .bg-orb.o2{width:400px;height:400px;background:rgba(131,56,236,.1);bottom:-15%;right:-10%;animation-duration:12s;animation-delay:2s}
        .bg-orb.o3{width:300px;height:300px;background:rgba(255,0,110,.06);top:50%;left:60%;animation-duration:14s;animation-delay:4s}
        @keyframes orbFloat{
            0%{transform:translate(0,0) scale(1)}
            50%{transform:translate(30px,-20px) scale(1.1)}
            100%{transform:translate(-20px,30px) scale(.95)}
        }

        /* Scan line */
        .scanline{
            position:fixed;inset:0;z-index:1;pointer-events:none;
            background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(6,214,160,.015) 2px,rgba(6,214,160,.015) 4px);
        }
        .scanline::after{
            content:'';position:absolute;width:100%;height:3px;
            background:linear-gradient(90deg,transparent,rgba(6,214,160,.08),transparent);
            animation:scanMove 4s linear infinite;
        }
        @keyframes scanMove{0%{top:-5%}100%{top:105%}}

        /* Floating particles */
        .particles{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
        .particle{
            position:absolute;width:2px;height:2px;background:var(--cyan);border-radius:50%;
            opacity:0;animation:particleUp linear infinite;
        }
        @keyframes particleUp{
            0%{opacity:0;transform:translateY(100vh) scale(0)}
            10%{opacity:.6}
            90%{opacity:.6}
            100%{opacity:0;transform:translateY(-10vh) scale(1)}
        }

        /* ═══════ LOGIN CARD ═══════ */
        .login-wrapper{
            position:relative;z-index:10;width:100%;max-width:440px;padding:20px;
            animation:cardEntry .8s cubic-bezier(.16,1,.3,1) both;
        }
        @keyframes cardEntry{
            0%{opacity:0;transform:translateY(40px) scale(.95)}
            100%{opacity:1;transform:translateY(0) scale(1)}
        }

        .login-card{
            background:var(--card);
            backdrop-filter:blur(30px) saturate(1.4);
            border:1px solid var(--border);
            border-radius:28px;
            padding:48px 40px 40px;
            position:relative;
            overflow:hidden;
            box-shadow:
                0 0 80px rgba(6,214,160,.06),
                0 30px 60px rgba(0,0,0,.4),
                inset 0 1px 0 rgba(255,255,255,.04);
        }

        /* Top neon bar */
        .login-card::before{
            content:'';position:absolute;top:0;left:0;right:0;height:3px;
            background:linear-gradient(90deg,var(--cyan),var(--purple),var(--red),var(--cyan));
            background-size:300% 100%;
            animation:neonBar 4s linear infinite;
        }
        @keyframes neonBar{0%{background-position:0% 50%}100%{background-position:300% 50%}}

        /* Corner accents */
        .corner{position:absolute;width:18px;height:18px;z-index:2}
        .corner::before,.corner::after{content:'';position:absolute;background:var(--cyan);border-radius:1px}
        .corner.tl{top:12px;left:12px}.corner.tl::before{width:18px;height:2px;top:0;left:0}.corner.tl::after{width:2px;height:18px;top:0;left:0}
        .corner.tr{top:12px;right:12px}.corner.tr::before{width:18px;height:2px;top:0;right:0}.corner.tr::after{width:2px;height:18px;top:0;right:0}
        .corner.bl{bottom:12px;left:12px}.corner.bl::before{width:18px;height:2px;bottom:0;left:0}.corner.bl::after{width:2px;height:18px;bottom:0;left:0}
        .corner.br{bottom:12px;right:12px}.corner.br::before{width:18px;height:2px;bottom:0;right:0}.corner.br::after{width:2px;height:18px;bottom:0;right:0}

        /* Logo */
        .logo-block{text-align:center;margin-bottom:30px}

        .logo-hex{
            width:80px;height:80px;margin:0 auto 18px;
            position:relative;display:flex;align-items:center;justify-content:center;
            animation:logoPulse 3s ease-in-out infinite;
        }
        .logo-hex::before{
            content:'';position:absolute;inset:0;
            background:linear-gradient(135deg,var(--cyan),var(--purple));
            clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
            opacity:.15;
        }
        .logo-hex::after{
            content:'';position:absolute;inset:4px;
            background:linear-gradient(135deg,rgba(6,214,160,.3),rgba(131,56,236,.2));
            clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
        }
        .logo-hex i{
            position:relative;z-index:2;font-size:2rem;
            background:linear-gradient(135deg,var(--cyan),#fff);
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;
        }
        @keyframes logoPulse{
            0%,100%{filter:drop-shadow(0 0 10px var(--cyan-glow))}
            50%{filter:drop-shadow(0 0 25px var(--cyan-glow))}
        }

        .brand-name{
            font-family:'Orbitron',sans-serif;
            font-weight:900;font-size:1.6rem;
            background:linear-gradient(135deg,var(--cyan),#fff 50%,var(--purple));
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;
            letter-spacing:4px;text-transform:uppercase;
            animation:textGlow 3s ease-in-out infinite alternate;
        }
        @keyframes textGlow{
            0%{filter:drop-shadow(0 0 4px var(--cyan-glow))}
            100%{filter:drop-shadow(0 0 12px var(--cyan-glow))}
        }

        .brand-sub{
            font-family:'Orbitron',sans-serif;
            font-size:.65rem;color:rgba(6,214,160,.5);
            letter-spacing:6px;text-transform:uppercase;margin-top:4px;
        }

        .divider{
            height:1px;margin:24px 0;
            background:linear-gradient(90deg,transparent,var(--border),transparent);
        }

        /* Status indicator */
        .status-line{
            display:flex;align-items:center;justify-content:center;gap:8px;
            margin-bottom:28px;
        }
        .status-dot{
            width:6px;height:6px;border-radius:50%;background:var(--cyan);
            animation:dotBlink 2s ease-in-out infinite;
            box-shadow:0 0 8px var(--cyan-glow);
        }
        @keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.3}}
        .status-text{
            font-family:'JetBrains Mono',monospace;font-size:.7rem;
            color:rgba(6,214,160,.6);letter-spacing:2px;text-transform:uppercase;
        }

        /* Error */
        .error-box{
            background:rgba(255,0,110,.08);
            border:1px solid rgba(255,0,110,.2);
            border-radius:14px;padding:14px 18px;margin-bottom:22px;
            display:flex;align-items:center;gap:10px;
            color:#ff6b9d;font-size:.88rem;font-weight:600;
            animation:shakeIn .5s ease;
        }
        .error-box i{font-size:1.3rem;color:var(--red)}
        @keyframes shakeIn{
            0%,100%{transform:translateX(0)}
            20%{transform:translateX(-8px)}
            40%{transform:translateX(8px)}
            60%{transform:translateX(-4px)}
            80%{transform:translateX(4px)}
        }

        /* Input groups */
        .field{position:relative;margin-bottom:18px}
        .field-label{
            font-family:'Orbitron',sans-serif;font-size:.6rem;
            color:rgba(255,255,255,.35);letter-spacing:3px;text-transform:uppercase;
            margin-bottom:8px;display:block;
        }
        .field-inner{position:relative}
        .field-inner i.icon{
            position:absolute;left:16px;top:50%;transform:translateY(-50%);
            font-size:1.15rem;color:rgba(6,214,160,.35);transition:.3s;z-index:2;
        }
        .field-inner input{
            width:100%;padding:16px 18px 16px 48px !important;
            background:rgba(6,214,160,.03) !important;
            border:1px solid rgba(6,214,160,.1) !important;
            border-radius:14px !important;
            color:#fff !important;font-size:.95rem !important;
            font-family:'Rajdhani',sans-serif !important;
            font-weight:500 !important;letter-spacing:.5px !important;
            outline:none !important;transition:.3s !important;
        }
        .field-inner input::placeholder{color:rgba(255,255,255,.2);font-weight:400}
        .field-inner input:focus{
            border-color:var(--cyan) !important;
            background:rgba(6,214,160,.06) !important;
            box-shadow:0 0 20px rgba(6,214,160,.1),inset 0 0 20px rgba(6,214,160,.02) !important;
        }
        .field-inner input:focus ~ i.icon{color:var(--cyan)}

        /* Password toggle */
        .pw-toggle{
            position:absolute;right:16px;top:50%;transform:translateY(-50%);
            background:none;border:none;color:rgba(255,255,255,.25);
            cursor:pointer;font-size:1.2rem;padding:4px;transition:.3s;z-index:2;
        }
        .pw-toggle:hover{color:var(--cyan)}

        /* Login button */
        .btn-login{
            width:100%;padding:16px !important;margin-top:8px;
            background:linear-gradient(135deg,rgba(6,214,160,.15),rgba(131,56,236,.15)) !important;
            border:1px solid rgba(6,214,160,.3) !important;
            border-radius:14px !important;
            color:var(--cyan) !important;
            font-family:'Orbitron',sans-serif !important;
            font-weight:700 !important;font-size:.85rem !important;
            letter-spacing:3px !important;text-transform:uppercase !important;
            cursor:pointer;transition:all .3s ease !important;
            position:relative;overflow:hidden;
            display:flex !important;align-items:center;justify-content:center;gap:10px;
        }
        .btn-login::before{
            content:'';position:absolute;inset:0;
            background:linear-gradient(135deg,var(--cyan),var(--purple));
            opacity:0;transition:.3s;
        }
        .btn-login:hover{
            border-color:var(--cyan) !important;
            box-shadow:0 0 30px var(--cyan-glow),0 10px 40px rgba(0,0,0,.3) !important;
            transform:translateY(-2px) !important;
        }
        .btn-login:hover::before{opacity:.15}
        .btn-login span,.btn-login i{position:relative;z-index:2}
        .btn-login:active{transform:translateY(0) !important}

        /* Loading state */
        .btn-login.loading{pointer-events:none;opacity:.7}
        .btn-login.loading span{visibility:hidden}
        .btn-login.loading::after{
            content:'';position:absolute;width:22px;height:22px;
            border:2px solid transparent;border-top-color:var(--cyan);
            border-radius:50%;animation:spin .6s linear infinite;z-index:3;
        }
        @keyframes spin{to{transform:rotate(360deg)}}

        /* Footer contact */
        .footer-block{margin-top:28px;text-align:center}
        .footer-divider{
            height:1px;margin-bottom:20px;
            background:linear-gradient(90deg,transparent,rgba(6,214,160,.08),transparent);
        }
        .contact-line{
            display:flex;align-items:center;justify-content:center;gap:8px;
            margin-bottom:10px;
        }
        .contact-line a{
            display:inline-flex;align-items:center;gap:6px;
            padding:8px 16px;
            background:rgba(37,211,102,.06);
            border:1px solid rgba(37,211,102,.15);
            border-radius:10px;
            color:#25d366;font-size:.82rem;font-weight:600;
            text-decoration:none;transition:.3s;
            font-family:'JetBrains Mono',monospace;
        }
        .contact-line a:hover{
            background:rgba(37,211,102,.12);
            border-color:rgba(37,211,102,.3);
            box-shadow:0 0 15px rgba(37,211,102,.15);
        }
        .contact-line a i{font-size:1.1rem}
        .footer-note{
            font-size:.68rem;color:rgba(255,255,255,.15);
            letter-spacing:1px;margin-top:12px;
            font-family:'JetBrains Mono',monospace;
        }

        /* ═══════ RESPONSIVE ═══════ */
        @media(max-width:480px){
            .login-card{padding:36px 24px 32px;border-radius:22px}
            .brand-name{font-size:1.3rem;letter-spacing:3px}
            .brand-sub{font-size:.55rem;letter-spacing:4px}
        }
    </style>
</head>
<body>

<!-- Background effects -->
<div class="bg-grid"></div>
<div class="bg-orb o1"></div>
<div class="bg-orb o2"></div>
<div class="bg-orb o3"></div>
<div class="scanline"></div>
<div class="particles" id="particles"></div>

<div class="login-wrapper">
    <div class="login-card">
        <!-- Corner accents -->
        <div class="corner tl"></div>
        <div class="corner tr"></div>
        <div class="corner bl"></div>
        <div class="corner br"></div>

        <!-- Logo -->
        <div class="logo-block">
            <div class="logo-hex"><i class='bx bxs-bolt'></i></div>
            <div class="brand-name">ESCOBAR BILLING</div>
            <div class="brand-sub">Rental Management System</div>
        </div>

        <div class="divider"></div>

        <div class="status-line">
            <div class="status-dot"></div>
            <span class="status-text">System Online — Authenticate</span>
        </div>

        <?php if(isset($error)): ?>
        <div class="error-box">
            <i class='bx bx-shield-x'></i>
            <span><?php echo $error; ?></span>
        </div>
        <?php endif; ?>

        <form method="POST" id="loginForm">
            <div class="field">
                <label class="field-label">Username</label>
                <div class="field-inner">
                    <input type="text" name="username" placeholder="Masukkan username" required autocomplete="off">
                    <i class='bx bxs-user-circle icon'></i>
                </div>
            </div>

            <div class="field">
                <label class="field-label">Password</label>
                <div class="field-inner">
                    <input type="password" name="password" id="pwInput" placeholder="Masukkan password" required>
                    <i class='bx bxs-lock-alt icon'></i>
                    <button type="button" class="pw-toggle" onclick="togglePw()">
                        <i class='bx bx-hide' id="pwIcon"></i>
                    </button>
                </div>
            </div>

            <button type="submit" name="login" class="btn-login" id="btnLogin">
                <span>Masuk Sistem</span>
                <i class='bx bx-log-in-circle'></i>
            </button>
        </form>

        <div class="footer-block">
            <div class="footer-divider"></div>
            <div class="contact-line">
                <a href="https://wa.me/62818110242" target="_blank">
                    <i class='bx bxl-whatsapp'></i> 0818-110-242
                </a>
            </div>
            <div class="footer-note">Ada masalah? Hubungi nomor di atas</div>
        </div>
    </div>
</div>

<script>
// Toggle password
function togglePw(){
    const inp = document.getElementById('pwInput');
    const ico = document.getElementById('pwIcon');
    if(inp.type === 'password'){
        inp.type = 'text';
        ico.classList.replace('bx-hide','bx-show');
    } else {
        inp.type = 'password';
        ico.classList.replace('bx-show','bx-hide');
    }
}

// Loading state on submit
document.getElementById('loginForm').addEventListener('submit', function(){
    document.getElementById('btnLogin').classList.add('loading');
});

// Particles
(function(){
    const container = document.getElementById('particles');
    const count = 30;
    for(let i = 0; i < count; i++){
        const p = document.createElement('div');
        p.className = 'particle';
        p.style.left = Math.random()*100 + '%';
        p.style.animationDuration = (6 + Math.random()*10) + 's';
        p.style.animationDelay = (Math.random()*8) + 's';
        p.style.width = p.style.height = (1 + Math.random()*2) + 'px';
        if(Math.random() > .7) p.style.background = '#8338ec';
        if(Math.random() > .9) p.style.background = '#ff006e';
        container.appendChild(p);
    }
})();

// Typing effect on status
(function(){
    const el = document.querySelector('.status-text');
    if(!el) return;
    const text = el.textContent;
    el.textContent = '';
    let i = 0;
    function type(){
        if(i < text.length){
            el.textContent += text[i]; i++;
            setTimeout(type, 50 + Math.random()*30);
        }
    }
    setTimeout(type, 600);
})();
</script>

</body>
</html>