<?php
// server_monitor.php - Dashboard Responsivo e Fullscreen Mobile
session_start();
if (!isset($_SESSION['logged_in_fxtream'])) { header('Location: index.php'); exit; }
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Monitor VPS :: Painel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.1.3/hamburgers.min.css">
    <style>
        body { background-color: #0f0f0f; color: #e0e0e0; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; }
        
        /* Estilos dos Cards */
        .card { background-color: #1a1a1a; border: 1px solid #333; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); border-radius: 8px; }
        .card-header { border-bottom: 1px solid #333; background-color: #252525; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; }
        .progress { background-color: #333; height: 20px; border-radius: 4px; }
        .big-number { font-size: 2rem; font-weight: bold; }
        .unit { font-size: 0.9rem; color: #888; }
        .net-box { border: 1px solid #444; border-radius: 10px; padding: 15px; text-align: center; background: #222; margin-bottom: 10px; }
        
        /* Cores Neon */
        .text-neon-green { color: #00ff88; text-shadow: 0 0 10px rgba(0,255,136,0.3); }
        .text-neon-blue { color: #00ccff; text-shadow: 0 0 10px rgba(0,204,255,0.3); }
        .text-neon-red { color: #ff3333; text-shadow: 0 0 10px rgba(255,51,51,0.3); }
        .blinking { animation: blinker 2s linear infinite; }
        @keyframes blinker { 50% { opacity: 0.5; } }

        /* --- RESPONSIVIDADE (A Mágica acontece aqui) --- */
        
        /* Desktop (Telas Grandes) */
        @media (min-width: 992px) {
            #sidebar { width: 240px; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; overflow-y: auto; transition: all 0.3s; }
            .container-main { margin-left: 240px; width: calc(100% - 240px); padding: 30px; }
            .hamburger { display: none !important; } /* Esconde botão menu no PC */
        }

        /* Mobile (Celulares) */
        @media (max-width: 991px) {
            #sidebar { position: fixed; top: 0; left: -260px; width: 250px; height: 100vh; z-index: 9999; transition: all 0.3s ease; box-shadow: 2px 0 10px rgba(0,0,0,0.5); }
            #sidebar.active { left: 0; } /* Mostra menu quando ativo */
            
            .container-main { margin-left: 0; width: 100%; padding: 15px; padding-top: 20px; }
            
            /* Overlay escuro quando menu abre */
            .overlay-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998; }
            .overlay-menu.active { display: block; }

            .big-number { font-size: 1.8rem; } /* Ajusta fonte */
        }
    </style>
</head>
<body>

<?php include 'includes/sidebar.php'; ?>
<div class="overlay-menu" id="overlayMenu"></div>

<div class="container-main">
    
    <div class="d-lg-none d-flex justify-content-between align-items-center mb-3 bg-dark p-3 rounded shadow-sm border border-secondary">
        <button class="hamburger hamburger--slider" type="button" id="btnToggleMenu">
            <span class="hamburger-box"><span class="hamburger-inner"></span></span>
        </button>
        <span class="font-weight-bold text-white"><i class="fa fa-server mr-2"></i> Monitor</span>
        <span class="badge badge-success blinking" style="font-size: 0.6rem">ONLINE</span>
    </div>

    <div class="d-none d-lg-flex justify-content-between align-items-center mb-4">
        <h2><i class="fa fa-server text-primary"></i> Monitor de Recursos VPS</h2>
        <div class="text-right">
            <span class="badge badge-success blinking"><i class="fa fa-circle"></i> Atualizando</span>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-4">
            <div class="card text-center border-danger">
                <div class="card-body py-3">
                    <h6 class="text-muted mb-0 text-uppercase">Proxy (Live)</h6>
                    <div class="big-number text-neon-red" id="val_proxy">0</div>
                    <small class="d-block mt-1 text-secondary" style="font-size: 0.75rem">Consome CPU</small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4">
            <div class="card text-center border-success">
                <div class="card-body py-3">
                    <h6 class="text-muted mb-0 text-uppercase">Direct</h6>
                    <div class="big-number text-success" id="val_direct">0</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4">
            <div class="card text-center border-info">
                <div class="card-body py-3">
                    <h6 class="text-muted mb-0 text-uppercase">Online</h6>
                    <div class="big-number text-neon-blue" id="val_clients">0</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="card">
                <div class="card-header"><i class="fa fa-microchip mr-2"></i> Sistema</div>
                <div class="card-body">
                    
                    <div class="d-flex justify-content-between mb-1">
                        <span>CPU (<span id="cpu_cores">0</span> vCore)</span>
                        <span id="cpu_text" class="font-weight-bold">0%</span>
                    </div>
                    <div class="progress mb-3">
                        <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" id="cpu_bar" style="width: 0%"></div>
                    </div>
                    
                    <div class="d-flex justify-content-between mb-1">
                        <span>RAM</span>
                        <span class="small text-muted"><span id="ram_used">0</span>MB / <span id="ram_total">0</span>MB</span>
                    </div>
                    <div class="progress mb-3">
                        <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" id="ram_bar" style="width: 0%"></div>
                    </div>

                    <div class="d-flex justify-content-between mb-1">
                        <span>Disco</span>
                        <span class="small text-muted"><span id="disk_used">0</span>GB / <span id="disk_total">0</span>GB</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-secondary" id="disk_bar" style="width: 0%"></div>
                    </div>

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

        <div class="col-12 col-lg-6">
            <div class="card">
                <div class="card-header"><i class="fa fa-network-wired mr-2"></i> Rede (Tempo Real)</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="net-box">
                                <i class="fa fa-arrow-down fa-lg text-success mb-2"></i>
                                <h6 class="mb-1">Down</h6>
                                <div class="big-number text-white" id="net_rx" style="font-size: 1.5rem">0</div>
                                <div class="unit">Mbps</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="net-box">
                                <i class="fa fa-arrow-up fa-lg text-primary mb-2"></i>
                                <h6 class="mb-1">Up</h6>
                                <div class="big-number text-white" id="net_tx" style="font-size: 1.5rem">0</div>
                                <div class="unit">Mbps</div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-2 text-center text-muted" style="font-size: 0.8rem">
                        Interface: <span id="net_iface" class="text-warning">...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // Lógica do Menu Mobile
    $('#btnToggleMenu, #overlayMenu').click(function() {
        $('#sidebar').toggleClass('active');
        $('#overlayMenu').toggleClass('active');
        $('#btnToggleMenu').toggleClass('is-active');
    });

    // Atualização dos Dados
    function updateStats() {
        $.ajax({
            url: 'api/server_stats.php',
            dataType: 'json',
            success: function(data) {
                // IPTV
                $('#val_proxy').text(data.iptv.proxy);
                $('#val_direct').text(data.iptv.direct);
                $('#val_clients').text(data.iptv.clients);

                // CPU
                $('#cpu_bar').css('width', data.cpu.percent + '%');
                $('#cpu_text').text(data.cpu.percent + '%');
                $('#cpu_cores').text(data.cpu.cores);
                if(data.cpu.percent > 80) $('#cpu_bar').removeClass('bg-warning').addClass('bg-danger');
                else $('#cpu_bar').removeClass('bg-danger').addClass('bg-warning');

                // RAM
                $('#ram_bar').css('width', data.ram.percent + '%');
                $('#ram_used').text(data.ram.used);
                $('#ram_total').text(data.ram.total);

                // DISK
                $('#disk_bar').css('width', data.disk.percent + '%');
                $('#disk_used').text(data.disk.used_gb);
                $('#disk_total').text(data.disk.total_gb);

                // REDE
                $('#net_rx').text(data.net.rx);
                $('#net_tx').text(data.net.tx);
                $('#net_iface').text(data.net.interface);
            },
            complete: function() {
                setTimeout(updateStats, 2000);
            }
        });
    }

    $(document).ready(function() {
        updateStats();
    });
</script>

</body>
</html>
