<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" href="">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/fontawesome-free/css/all.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/jqvmap/jqvmap.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/summernote/summernote-bs4.min.css">

    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">

    <!-- DataTables -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">

    <!-- Select2 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <!-- Bootstrap4 Duallistbox -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
    <!-- BS Stepper -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/bs-stepper/css/bs-stepper.min.css">
    <!-- dropzonejs -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/plugins/dropzone/min/dropzone.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets_/dist/css/adminlte.min.css">
</head>

<body onload="init();" style="background-color: #02653c;">


    <script>
        function init() {
            tableTotal();
            tableMonitoring();
            setInterval(tableTotal, 5000); // Update every 5 seconds
            setInterval(tableMonitoring, 5000); // Update every 5 seconds
        }

        function tableTotal() {
            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                document.getElementById("tablei").innerHTML = this.responseText;
            }
            xhttp.open("GET", "<?= base_url() ?>Datapasienall/totalmonitoringrajal");
            xhttp.send();
        }

        function tableMonitoring() {
            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                document.getElementById("tableu").innerHTML = this.responseText;
            }
            xhttp.open("GET", "<?= base_url() ?>Datapasienall/monitoringrajal");
            xhttp.send();
        }
    </script>

    <div class="card-body">
        <table class="table table-bordered" style="margin-top: -15px;">
            <thead>
                <tr>
                    <th style="color: #000; font-size:20px;">
                        <center>Total Daftar<center>
                    </th>
                    <th style="color: #000; font-size:20px;">
                        <center>Total Terlayani<center>
                    </th>
                    <th style="color: #000; font-size:20px;">
                        <center>Total Batal</center>
                    </th>
                </tr>
            </thead>
            <tbody id="tablei">
                <!-- Data will be populated here -->
            </tbody>
        </table>
    </div>
    <div class="card-body">
        <table class="table table-bordered" style="margin-top: -25px;">
            <thead>
                <tr>
                    <th style="color: #000; font-size:20px;">Nama Klinik</th>
                    <th style="color: #000; font-size:20px;">
                        <center>Daftar</center>
                    </th>
                    <th style="color: #000; font-size:20px;">
                        <center>Terlayani</center>
                    </th>
                    <th style="color: #000; font-size:20px;">
                        <center>Batal</center>
                    </th>

                </tr>
            </thead>
            <tbody id="tableu">
                <!-- Data will be populated here -->
            </tbody>
        </table>
    </div>
    <script src="<?php echo base_url(); ?>assets_/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="<?php echo base_url(); ?>assets_/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- AdminLTE App -->
    <script src="<?php echo base_url(); ?>assets_/dist/js/adminlte.js"></script>
    <!-- Select2 -->
    <script src="<?php echo base_url() ?>assets_/plugins/select2/js/select2.full.min.js"></script>
    <!-- daterangepicker -->
    <script src="<?php echo base_url() ?>assets_/plugins/moment/moment.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="<?php echo base_url() ?>assets_/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js">
    </script>
    <!-- Summernote -->
    <script src="<?php echo base_url() ?>assets_/plugins/summernote/summernote-bs4.min.js"></script>
    <!-- jQuery Mapael -->
    <script src="<?php echo base_url(); ?>assets_/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
    <script src="<?php echo base_url(); ?>assets_/plugins/raphael/raphael.min.js"></script>
    <script src="<?php echo base_url(); ?>assets_/plugins/jquery-mapael/jquery.mapael.min.js"></script>
    <script src="<?php echo base_url(); ?>assets_/plugins/jquery-mapael/maps/usa_states.min.js"></script>
    <!-- ChartJS -->
    <script src="<?php echo base_url(); ?>assets_/plugins/chart.js/Chart.min.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="<?php echo base_url(); ?>assets_/dist/js/pages/dashboard2.js"></script>
    <!-- DataTables  & Plugins -->
    <script src="<?php echo base_url() ?>assets_/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/jszip/jszip.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/pdfmake/pdfmake.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/pdfmake/vfs_fonts.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
</body>

</html>