<?php
    require_once 'Database.php';

    if (isset($_GET['id'])) {
        $id = $_GET['id'];
        $pdo = Database::connect();
        $stmt = $pdo->prepare("SELECT * FROM table_nodemcu_rfidrc522_mysql WHERE id = ?");
        $stmt->execute([$id]);
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
    } else {
        echo 'ID pasien tidak diberikan.';
        exit;
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unduh PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
    <script>
        window.onload = function() {
            const element = document.body;
            const opt = {
                margin:       0.5,
                filename:     'data_pasien.pdf',
                image:        { type: 'jpeg', quality: 0.98 },
                html2canvas:  { scale: 2 },
                jsPDF:        { unit: 'px', format: [1600, 1208], orientation: 'portrait' }
            };
            html2pdf().set(opt).from(element).save().then(() => {
                window.location.href = 'home.php';
            });
        }
    </script>
</head>
<body>
<div class="container" style="text-align: center; margin-top: 20px;">
        <h2>Monitoring multi sensor secara real-time</h2>

        <?php
        if ($row) {
            echo '<h2>Data Pasien</h2>';
            echo '<table class="table table-striped table-bordered">';
            echo '<tr style="background-color: #10a0c5; color: #FFFFFF;"><th>Nama</th><th>ID</th><th>Jenis Kelamin</th><th>umur</th><th>Nomor Telepon</th></tr>';
            echo '<tr>';
            echo '<td>' . $row['name'] . '</td>';
            echo '<td>' . $row['id'] . '</td>';
            echo '<td>' . $row['gender'] . '</td>';
            echo '<td>' . $row['umur'] . '</td>';
            echo '<td>' . $row['mobile'] . '</td>';
            echo '</tr>';
            echo '</table>';
        } else {
            echo '<p>Data tidak ditemukan.</p>';
        }

        Database::disconnect();
        ?>

        <div style="display: flex; border: 2px solid white; padding: 10px;">
            <div class="card text-center" style="width: 33.3%; border: 2px solid white;">
                <div class="card-header" style="font-size: 30px; font-weight: bold; background-color: rgb(6,57,112); color:white;">
                    cekdetakjantung
                </div>
                <div class="card-body">
                    <h1><span id="cekdetakjantung">0</span></h1>
                </div>
            </div>

            <div class="card text-center"  style="width: 33.3%; border: 2px solid white;">
                <div class="card-header" style="font-size: 30px; font-weight: bold; background-color: rgb(17, 83, 30, 1); color:white;">
                    oksigen/Spo2
                </div>
                <div class="card-body">
                    <h1><span id="cekoksigen">0</span></h1>
                </div>
            </div>

            <div class="card text-center"  style="width: 33.3%; border: 2px solid white;">
                <div class="card-header" style="font-size: 30px; font-weight: bold; background-color: rgb(145, 10, 10, 1); color:white">
                    suhu
                </div>
                <div class="card-body">
                    <h1><span id="ceksuhu">0</span></h1>
                </div>
            </div>
        </div>   

        <div class="card-footer" style="margin-top: 20px; border: 2px solid white; padding: 10px;">
            <span id="cekstatus" style="font-size: 20px; font-weight: bold;">-</span>
        </div>

        <div class="container" style="text-align: center;">
            <h3>sensor grafik secara real time</h3>
            <p>data yang ditampilkan adalah 5 data terakhir</p>
        </div>

        <div class="container">
            <div class="container" id="responscontainer" style="width: 80%; text-align: center;"></div>
        </div>
    </div>
</body>
</html>