
<?php
    require_once 'Database.php'; // Menghubungkan ke kelas Database

	$Write="<?php $" . "UIDresult=''; " . "echo $" . "UIDresult;" . " ?>";
	file_put_contents('UIDContainer.php',$Write);
?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grafik sensor</title>

    <!-- link di panggil -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script src="assets/js/jquery-3.4.0.min.js"></script>
    <script src="assets/js/mdb.min.js"></script>
    <script src="jquery-latest"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>

    <!-- memanggil data grafik -->
    <script type= "text/javascript" >
        var refreshid = setInterval(function(){
            $('#responscontainer').load('data.php');
            $("#cekdetakjantung").load("cekdetakjantung.php");
            $("#cekoksigen").load("oksigen.php");
            // $("#ceksuhu").load("suhu.php");
            $("#cekstatus").load('cekstatus.php');
            // $("#cekkelembapan").load("cekkelembapan.php");
        }, 1000);
    </script>

<style>
		html {
			font-family: Arial;
			display: inline-block;
			margin: 0px auto;
		}
		
		textarea {
			resize: none;
		}

		ul.topnav {
			list-style-type: none;
			margin: auto;
			padding: 0;
			overflow: hidden;
			background-color: #4CAF50;
			width: 80%;
            margin-top: 20px;
		}

		ul.topnav li {float: left;}

		ul.topnav li a {
			display: block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}

		ul.topnav li a:hover:not(.active) {background-color: #3e8e41;}

		ul.topnav li a.active {background-color: #333;}

		ul.topnav li.right {float: right;}

		@media screen and (max-width: 600px) {
			ul.topnav li.right, 
			ul.topnav li {float: none;}
		}

        
		</style>

</head>
<body>
    
		<ul class="topnav">
			<li><a href="rekapdata.php">Rekap Data</a></li>
			<li><a href="user data.php">Data Pasien</a></li>
			<li><a href="registration.php">Registrasi</a></li>
			<li><a href="read tag.php">BacaTag ID</a></li>
			<li><a class="active" href="#">Grafik</a></li>

		</ul>

    <div class="container" style="text-align: center; margin-top: 20px;">

        <!-- Tambahkan kode PHP untuk menampilkan data pasien di sini -->

        <?php
        // Ambil nilai id dari URL
        if (isset($_GET['id'])) {
            $id = $_GET['id'];

            // Koneksi ke database
            $pdo = Database::connect();

            // Query ke database untuk mendapatkan data untuk baris dengan id yang dipilih
            $stmt = $pdo->prepare("SELECT * FROM table_nodemcu_rfidrc522_mysql WHERE id = ?");
            $stmt->execute([$id]);
            $row = $stmt->fetch(PDO::FETCH_ASSOC);

            // Tampilkan data pada halaman
            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><th>aksi</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 '<td><a href="home.php?id=' . $row['id'] . '" class="btn btn-primary">Simpan</a></td>';
                echo '<td><a href="rekapdata.php?id=' . $row['id'] . '&action=save" class="btn btn-primary">Simpan</a></td>';

                echo '</tr>';
                echo '</table>';
            } else {
                echo '<p>Data tidak ditemukan.</p>';
            }

            // Putuskan koneksi
            // Database::disconnect();
        } else {
            echo '<p>ID pasien tidak diberikan.</p>';
        }
        ?>


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


            <div class="card text-center"  style="width: 50%; 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>  -->
            <!--  akhir memnpilkan nilai suhu,kelebpan dan ldr  -->

        </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>


        <!-- tamplan grafik -->
        <div class="container" style="text-align: center;">
            <h3>Monitoring Grafik </h3>
            <p>data yang ditampilkan adalah 5 data terahir</p>
        </div>

        <!-- div untukl grafik -->
        <div class="container">
            <div class="container" id="responscontainer" style="width: 80%; text-align: center;"></div>
        </div>
        <!-- Tombol Cetak -->
        <div style="text-align: center; margin-top: 20px;">
            <button onclick="window.print()" class="btn btn-primary">Cetak</button>
            <button onclick="downloadPDF()" class="btn btn-secondary">Simpan sebagai PDF</button>
        </div>

    </div>
    <script>
        function downloadPDF() {
            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();
        }
    </script>



</body>
</html>