<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Layanan Pasien</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            /* Menghapus margin default */
            padding: 0;
            /* Menghapus padding default */
        }

        .header {
            display: flex;
            justify-content: center;
            /* Memusatkan semua konten dalam header */
            align-items: center;
            /* Menyelaraskan elemen di tengah secara vertikal */
            padding: 10px;
            /* Memberikan padding untuk elemen header */
        }

        .header-center {
            display: flex;
            flex-direction: column;
            /* Mengatur elemen dalam kolom */
            align-items: center;
            /* Memusatkan teks secara horizontal */
            margin-left: 10px;
            /* Memberikan jarak antara gambar dan teks */
        }

        .date-time {
            text-align: right;
            /* Menyelaraskan teks tanggal/waktu ke kanan */
            font-weight: bold;
            /* Menebalkan teks */
            position: absolute;
            /* Menempatkan elemen tanggal/waktu di sudut kanan */
            right: 20px;
            /* Jarak dari kanan */
            top: 20px;
            /* Jarak dari atas */
        }

        h1 {
            margin: 0;
            /* Menghapus margin untuk judul utama */
        }

        h3 {
            margin: 5px 0 0 0;
            /* Memberikan margin atas untuk jarak dengan h1 */
        }
    </style>
    <script>
        function updateDateTime() {
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long'
            };
            const now = new Date();
            const date = now.toLocaleDateString('id-ID', options);
            const time = now.toLocaleTimeString('id-ID');
            document.getElementById('date').innerHTML = date;
            document.getElementById('time').innerHTML = time;
        }

        setInterval(updateDateTime, 1000);
        window.onload = updateDateTime;
    </script>
</head>

<body>
    <div class="header">
        <img src="<?php echo base_url(); ?>assets_/assets/img/logo-mini.png" height="50px" width="50px" style="margin-right: 10px;">
        <div class="header-center">
            <h1>DASHBOARD LAYANAN PASIEN</h1>
            <h3>RUMAH SAKIT UMUM ANANDA PURWOKERTO</h3>
        </div>
        <div class="date-time">
            <div id="date"></div>
            <div id="time"></div>
        </div>
    </div>
</body>

</html>