<?php
    include 'database.php';
    $pdo = Database::connect();
    $sql = 'SELECT * FROM table_nodemcu_rfidrc522_mysql ORDER BY name ASC';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding: 20px;
        }

        .container {
            width: 90%;
            max-width: 1200px;
        }

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

        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;}
        }

        .table-responsive {
            overflow-x: auto;
        }

        .search-container {
            text-align: right;
            margin-bottom: 10px;
        }

        #searchInput {
            padding: 5px;
            margin-top: 10px;
        }
    </style>

    <title>Data Pasien</title>
</head>

<body>
<div class="container">
    <ul class="topnav">
        <li><a href="rekapdata.php">Rekap Data</a></li>
        <li><a class="active" href="user data.php">Data Pasien</a></li>
        <li><a href="homepage.php">Registrasi</a></li>
        <li><a href="read tag.php">Baca Tag ID</a></li>
        <li><a href="grafik.php">Grafik</a></li>
    </ul>
    <br>
    <h3>Tabel Data Pasien</h3>
    <div class="search-container">
        <input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Cari nama...">
    </div>
    <div class="table-responsive">
        <table id="dataTable" class="table table-striped table-bordered">
            <thead>
            <tr style="background-color: #10a0c5; color: white;">
                <th>Nama</th>
                <th>ID</th>
                <th>Jenis Kelamin</th>
                <th>Umur</th>
                <th>No Handphone</th>
                <th>Aksi</th>
            </tr>
            </thead>
            <tbody>
            <?php
            foreach ($pdo->query($sql) as $row) {
                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>';
                echo '<a class="btn btn-success btn-sm" href="user data edit page.php?id='.$row['id'].'">Edit</a>';
                echo ' ';
                echo '<a class="btn btn-danger btn-sm" href="user data delete page.php?id='.$row['id'].'">Hapus</a>';
                echo ' ';
                echo '<a class="btn btn-warning btn-sm" href="grafik.php?id='.$row['id'].'">Cek Kesehatan</a>';
                echo '</td>';
                echo '</tr>';
            }
            ?>
            </tbody>
        </table>
    </div>
</div>

<script>
    function searchTable() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("searchInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("dataTable");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>
</body>
</html>