<!DOCTYPE html>
<html>

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

    <link rel="shortcut icon" href="<?php echo base_url(); ?>assets_/imgs/logo.jpg">
    <!-- 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(); ?>plugins/fontawesome-free/css/all.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet"
        href="<?php echo base_url(); ?>plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/jqvmap/jqvmap.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/summernote/summernote-bs4.min.css">

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

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

    <!-- Select2 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <!-- Bootstrap4 Duallistbox -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
    <!-- BS Stepper -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/bs-stepper/css/bs-stepper.min.css">
    <!-- dropzonejs -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>plugins/dropzone/min/dropzone.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>dist/css/adminlte.min.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>Jadwal Dokter Poliklinik</title>
    <style>
   
        #table-container {
            width: 100%;
            height: 80%;
            overflow: hidden; /* Hide scrollbars */
           border: 1px solid #000;
            position: relative;
        }
        table {
            font-size: 45px;
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            border: 1px solid #ddd;
        }
    iframe {
   
            border: 0;
            overflow: hidden;
        }

    body {
        --space: 2rem;

    }

    .marquee {
        --duration: 60s;
        --gap: var(--space);
        background-color: #000080;
        font-color: #ffff;
        display: flex;
        overflow: hidden;
        user-select: none;
        gap: var(--gap);
    }

    .marquee__group {
        flex-shrink: 0;
        display: flex;
        margin: 10px;
        align-items: center;
        justify-content: space-around;
        gap: var(--gap);
        min-width: 100vw;
        animation: scroll var(--duration) linear infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .marquee__group {
            animation-play-state: paused;
        }
    }


    .marquee--reverse .marquee__group {
        animation-direction: reverse;
        animation-delay: calc(var(--duration) / -2);
    }


    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-100% - var(--gap)));
        }
    }
    </style>
</head>

<body onload="table();">
    <script>
    function table() {
        fetch("<?= base_url() ?>Jadwal/jadwal2")
            .then(response => response.text())
            .then(data => {
                document.getElementById("tablei").innerHTML = data;
            })
            .catch(error => console.error('Error fetching table data:', error));
    }

    // Update the table every 5 seconds (5000 milliseconds)
    setInterval(table, 5000);
</script>

    </table>
    <div class="col-md-24">
                    <div class="card">
                        <center>
                            <img src="<?php echo base_url(); ?>assets_/imgs/logo.jpg" height="70px" width="70px" style="margin-right:800px ; margin-bottom:-75px ; margin-top:10px">

                            <h1><strong>INFORMASI KUOTA POLIKLINIK</strong></h1>
                            <h2 style=margin-bottom:20px><strong>RUMAH SAKIT UMUM ANANDA PURWOKERTO</strong></h2>
                        </center>
                        <?php 
                        $hari=date('l');
                         $bulan=date('m');
                    switch ($hari){
                        case"Sunday":$hari="Minggu";break;
                        case"Monday":$hari="Senin";break;
                        case"Tuesday":$hari="Selasa";break;
                        case"Wednesday":$hari="Rabu";break;
                        case"Thursday":$hari="Kamis";break;
                        case"Friday":$hari="Jumat";break;
                        case"Saturday":$hari="Sabtu";break;
                    }
                    switch($bulan){
                    case"1":$bulan="Januari";break;
                    case"2":$bulan="Febuari";break;
                    case"3":$bulan="Maret";break;
                    case"4":$bulan="April";break;
                    case"5":$bulan="Mei";break;
                    case"6":$bulan="Juni";break;
                    case"7":$bulan="Juli";break;
                    case"8":$bulan="Agustus";break;
                    case"9":$bulan="September";break;
                    case"10":$bulan="Oktober";break;
                    case"11":$bulan="November";break;
                    case"12":$bulan="Desember";break;
                    }
                    $tanggal=date('d');
                    $tahun=date('Y');
                    ?>
          <center>
               <h1 style="margin-right: -2430px;margin-top: -110px;"> <strong><?php echo $hari.','. $tanggal.' '.$bulan.' '.$tahun.' '  ?></h1><h1 style="margin-right: -2430px;" id="jami"></h1></strong><br>
                         <div>
                    <div><h1 id="p2" class="justify-content-end" style='font-size: 1.5vw;'></h1></div>
                    <div><h1 id="p1" class="justify-content-end" style='font-size: 1.5vw;'></h1></div>                  
                </div>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                    

                        <!-- /.card-header -->
                        <div class="card-body">
                            <table class="table " style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th width="30%" style="color:#000080">
                                            <center>Nama Dokter</center>
                                        </th>
                                        <th width="30%" style="color:#000080">
                                            <center>Klinik</center>
                                        </th>
                                        <th width="10%" style="color:#000080">
                                            <center>Jam</center>
                                        </th>
                                        <th width="10%" style="color:#000080">
                                            <center>Kapasitas</center>
                                        </th>
                                        <th width="10%" style="color:#000080">
                                            <center>Daftar</center>
                                        </th>
                                        <th width="10%" style="color:#000080">
                                            <center>Sisa</center>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                            <div id="table-container">
                                <table>

                                    <tbody id="tablei">

                                    </tbody>
                                </table>
                            </div>
                            <script>
                                document.body.style.zoom = "75%";
                            document.addEventListener("DOMContentLoaded", function() {
                            const container = document.getElementById('table-container');
                            let scrollAmount = 0;
                            const scrollStep = 1;
                            const scrollInterval = 100; // milliseconds

                            function autoScroll() {
                                scrollAmount += scrollStep;
                                if (scrollAmount >= container.scrollHeight - container.clientHeight) {
                                    scrollAmount = 0;
                                }
                                container.scrollTop = scrollAmount;
                            }

                            setInterval(autoScroll, scrollInterval);
                        });
                            </script>
                        </div>
                    </div>
               
                <!-- /.col -->


            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.row -
    <script src="<?php echo base_url(); ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="<?php echo base_url(); ?>plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- AdminLTE App -->
    <script src="<?php echo base_url(); ?>dist/js/adminlte.js"></script>
    <!-- Select2 -->
    <script src="<?php echo base_url() ?>plugins/select2/js/select2.full.min.js"></script>
    <!-- daterangepicker -->
    <script src="<?php echo base_url() ?>plugins/moment/moment.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/daterangepicker/daterangepicker.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="<?php echo base_url() ?>plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js">
    </script>
    <!-- Summernote -->
    <script src="<?php echo base_url() ?>plugins/summernote/summernote-bs4.min.js"></script>
    <!-- jQuery Mapael -->
    <script src="<?php echo base_url(); ?>plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
    <script src="<?php echo base_url(); ?>plugins/raphael/raphael.min.js"></script>
    <script src="<?php echo base_url(); ?>plugins/jquery-mapael/jquery.mapael.min.js"></script>
    <script src="<?php echo base_url(); ?>plugins/jquery-mapael/maps/usa_states.min.js"></script>
    <!-- ChartJS -->
    <script src="<?php echo base_url(); ?>plugins/chart.js/Chart.min.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="<?php echo base_url(); ?>dist/js/pages/dashboard2.js"></script>
    <!-- DataTables  & Plugins -->
    <script src="<?php echo base_url() ?>plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/jszip/jszip.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/pdfmake/pdfmake.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/pdfmake/vfs_fonts.js"></script>
    <script src="<?php echo base_url() ?>plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="<?php echo base_url() ?>plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <script src="<?php echo base_url() ?>assets_/js/antibiotik_rajal.js"></script>
    <!-- <script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script> -->
<script type="text/javascript">
        window.onload = function() { jami(); }
       
        function jami() {
            var e = document.getElementById('jami'),
            d = new Date(), h, m, s;
            h = d.getHours();
            m = set(d.getMinutes());
            s = set(d.getSeconds());
       
            e.innerHTML = h +':'+ m +':'+ s;
       
            setTimeout('jami()', 1000);
        }
       
        function set(e) {
            e = e < 10 ? '0'+ e : e;
            return e;
        }
</script>
    <script>
    $(function() {
        //Initialize Select2 Elements
        $('.select2').select2()

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        //Datemask dd/mm/yyyy
        $('#datemask').inputmask('dd/mm/yyyy', {
            'placeholder': 'dd/mm/yyyy'
        })
        //Datemask2 mm/dd/yyyy
        $('#datemask2').inputmask('mm/dd/yyyy', {
            'placeholder': 'mm/dd/yyyy'
        })
        //Money Euro
        $('[data-mask]').inputmask()

        //Date picker
        $('#reservationdate').datetimepicker({
            format: 'L'
        });

        //Date and time picker
        $('#reservationdatetime').datetimepicker({
            icons: {
                time: 'far fa-clock'
            }
        });

        //Date range picker
        $('#reservation').daterangepicker()
        //Date range picker with time picker
        $('#reservationtime').daterangepicker({
            timePicker: true,
            timePickerIncrement: 30,
            locale: {
                format: 'd/M/Y / H:i:s a'
            }
        })
        //Date range as a button
        $('#daterange-btn').daterangepicker({
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                            'month')
                        .endOf('month')
                    ]
                },
                startDate: moment().subtract(29, 'days'),
                endDate: moment()
            },
            function(start, end) {
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
                    'MMMM D, YYYY'))
            }
        )

        //Timepicker
        $('#timepicker').datetimepicker({
            format: 'LT'
        })
        //Bootstrap Duallistbox
        $('.duallistbox').bootstrapDualListbox()

        //Colorpicker
        $('.my-colorpicker1').colorpicker()
        //color picker with addon
        $('.my-colorpicker2').colorpicker()

        $('.my-colorpicker2').on('colorpickerChange', function(event) {
            $('.my-colorpicker2 .fa-square').css('color', event.color.toString());
        })

        $("input[data-bootstrap-switch]").each(function() {
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        })

    })
    // BS-Stepper Init
    document.addEventListener('DOMContentLoaded', function() {
        window.stepper = new Stepper(document.querySelector('.bs-stepper'))
    })

    // DropzoneJS Demo Code Start
    Dropzone.autoDiscover = false

    // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
    var previewNode = document.querySelector("#template")
    previewNode.id = ""
    var previewTemplate = previewNode.parentNode.innerHTML
    previewNode.parentNode.removeChild(previewNode)

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        url: "/target-url", // Set the url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    })

    myDropzone.on("addedfile", function(file) {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function() {
            myDropzone.enqueueFile(file)
        }
    })

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function(progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%"
    })

    myDropzone.on("sending", function(file) {
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1"
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
    })

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queuecomplete", function(progress) {
        document.querySelector("#total-progress").style.opacity = "0"
    })

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function() {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
    }
    document.querySelector("#actions .cancel").onclick = function() {
        myDropzone.removeAllFiles(true)
    }
    // DropzoneJS Demo Code End
    </script>
    <script>
    $(function() {
        $("#example1").DataTable({
            "responsive": true,
            "lengthChange": false,
            "autoWidth": false,

        }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
        $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
        });
    });
    </script>
</body>

</html>