    <!-- Date Picker jQuery UI-->
    <link type="text/css" href="development-bundle/themes/base/ui.all.css" rel="stylesheet" />   

    <script type="text/javascript" src="development-bundle/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
    <script type="text/javascript" src="development-bundle/ui/ui.datepicker.js"></script>
    
    <script type="text/javascript" src="development-bundle/ui/i18n/ui.datepicker-id.js"></script>

    <script type="text/javascript"> 
      $(document).ready(function(){
        $("#tgl_mulai").datepicker({
					dateFormat  : "dd/mm/yy",        
          changeMonth : true,
          changeYear  : true					
        });      
        $("#tgl_selesai").datepicker({
					dateFormat  : "dd/mm/yy",        
          changeMonth : true,
          changeYear  : true					
        });      
      });
    </script>

<?php
// Apabila user belum login
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){
  echo "<link href=\"../../css/style_login.css\" rel=\"stylesheet\" type=\"text/css\" />
        <div id=\"login\"><h1 class=\"fail\">Untuk mengakses modul, Anda harus login dulu.</h1>
        <p class=\"fail\"><a href=\"../../index.php\">LOGIN</a></p></div>";  
}
// Apabila user sudah login dengan benar, maka terbentuklah session
else{
  $aksi = "modul/mod_agenda/aksi_agenda.php";

  // mengatasi variabel yang belum di definisikan (notice undefined index)
  $act = isset($_GET['act']) ? $_GET['act'] : ''; 

  switch($act){
    // Tampil Agenda
    default:
      echo "

<div class=\"bg-secondary rounded h-100 p-4\">
<div class=\"table-responsive\">

      <h2>Blog</h2>
        <p><input type=\"button\" value=\"Tambah Blog\" onclick=window.location.href=\"?module=agenda&act=tambahagenda\" class=\"btn btn-sm btn-primary\"></p>
          ";
         ?>
         
       <?php
if(!function_exists('tgl_indo')) {
  function tgl_indo($tgl){ return $tgl; }
}

if ($_SESSION['leveluser']=='admin'){
  $tampil = mysqli_query($konek, "SELECT * FROM agenda ORDER BY id_agenda DESC");
} else {
  $tampil = mysqli_query($konek, "SELECT * FROM agenda WHERE username='$_SESSION[namauser]' ORDER BY id_agenda DESC");
}

$data = [];
while($r=mysqli_fetch_assoc($tampil)){
  foreach ($r as &$v) { if (is_string($v)) $v = utf8_encode($v); }
  $data[] = $r;
}
?>

<table class="table" id="agendaTable">
  <thead>
    <tr>
      <th>No</th><th>Gambar</th><th>Judul</th><th>Tgl. Posting</th><th>Aksi</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<nav><ul class="pagination justify-content-center" id="pagination"></ul></nav>

<script>
const dataAgenda = <?php echo json_encode($data); ?>;
const rowsPerPage = 10;
let currentPage = 1;

function renderTable(page) {
  const tbody = document.querySelector("#agendaTable tbody");
  tbody.innerHTML = "";
  const start = (page - 1) * rowsPerPage;
  const end = start + rowsPerPage;
  const pageData = dataAgenda.slice(start, end);

  pageData.forEach((item, index) => {
    const no = start + index + 1;
    tbody.innerHTML += `
      <tr style="border-color:#6C7293">
        <td>${no}</td>
        <td><img src="../foto_banner/${item.gambar}" width="100"></td>
        <td>${item.tema}</td>
        <td>${item.tgl_posting}</td>
        <td>
          <a href="?module=agenda&act=editagenda&id=${item.id_agenda}" class="btn btn-sm btn-primary">Edit</a> | 
          <a href="<?php echo"$aksi?module"?>=agenda&act=hapus&id=${item.id_agenda}" 
             class="btn btn-sm btn-danger" 
             onclick="return confirm('Yakin mau hapus agenda ini?')">Hapus</a>
        </td>
      </tr>
    `;
  });
}

function renderPagination() {
  const totalPages = Math.ceil(dataAgenda.length / rowsPerPage);
  const pagination = document.getElementById("pagination");
  pagination.innerHTML = "";
  for (let i = 1; i <= totalPages; i++) {
    pagination.innerHTML += `
      <li class="page-item ${i === currentPage ? 'active' : ''}">
        <a class="page-link" href="javascript:void(0)" onclick="goToPage(${i})">${i}</a>
      </li>
    `;
  }
}

function goToPage(page) {
  currentPage = page;
  renderTable(page);
  renderPagination();
}

document.addEventListener("DOMContentLoaded", function() {
  goToPage(1);
});
</script>


         
         <?php echo"


        </div></div>";
    break;

    case "tambahagenda":
      echo "<h2>Tambah Blog</h2>
            <form method=\"POST\" enctype=\"multipart/form-data\" action=\"$aksi?module=agenda&act=input\">




 <div class=\"row mb-3\">
                                    <label for=\"inputEmail3\" class=\"col-sm-2 col-form-label\">Judul</label>

          <div class=\"col-sm-10\">

        <input type=\"text\" name=\"tema\" class=\"form-control\" style=\"background-color: #fff;\">

</div>
          </div>


<div class=\"row mb-3\">
                                    <label for=\"inputEmail3\" class=\"col-sm-2 col-form-label\">isi</label>

          <div class=\"col-sm-10\">

        <textarea name=\"isi_agenda\" id=\"lokomedia\" style=\"width: 800px; height: 350px;\"></textarea>

</div>
          </div>
























          <div class=\"row mb-3\">
                                    <label for=\"inputEmail3\" class=\"col-sm-2 col-form-label\">Foto</label>

          <div class=\"col-sm-10\">

        <input type=\"file\" name=\"foto\" class=\"form-control bg-dark\">

</div>
          </div>


<br/>
         
         <div style=\"text-align: center !important;\">
          <tr><td colspan=\"2\"><input type=\"submit\" value=\"Simpan\" class=\"btn btn-primary\">
                                <input type=\"button\" value=\"Batal\" onclick=\"self.history.back()\" class=\"btn btn-primary\"></td></tr>
          </div>












            </form>";
    break;
  

    case "editagenda":
      if ($_SESSION['leveluser']=='admin'){
        $query = "SELECT * FROM agenda WHERE id_agenda='$_GET[id]'";
        $hasil = mysqli_query($konek, $query);
      }
      else{
        $query = "SELECT * FROM agenda WHERE id_agenda='$_GET[id] AND username='$_SESSION[namauser]''";
        $hasil = mysqli_query($konek, $query);
      }
    
        $r     = mysqli_fetch_array($hasil);
           
        $tgl_mulai   = ubah_tgl2($r['tgl_mulai']);
        $tgl_selesai = ubah_tgl2($r['tgl_selesai']);

      echo "<h2>Edit Blog</h2>
            <form method=\"POST\" enctype=\"multipart/form-data\"  action=\"$aksi?module=agenda&act=update\">
            <input type=\"hidden\" name=\"id\" value=\"$r[id_agenda]\">
            <input type=\"hidden\" name=\"fotoku\" value=\"$r[gambar]\">


 <div class=\"row mb-3\">
                                    <label for=\"inputEmail3\" class=\"col-sm-2 col-form-label\">Judul</label>

          <div class=\"col-sm-10\">

        <input type=\"text\" name=\"tema\" value=\"$r[tema]\" class=\"form-control\" style=\"background-color: #fff;\">

</div>
          </div>


<div class=\"row mb-3\">
                                    <label for=\"inputEmail3\" class=\"col-sm-2 col-form-label\">isi</label>

          <div class=\"col-sm-10\">

        <textarea name=\"isi_agenda\"  id=\"lokomedia\" style=\"width: 800px; height: 350px;\">$r[isi_agenda]</textarea>

</div>
          </div>


















<div class=\"row mb-3\">
                                    <label for=\"inputEmail3\" class=\"col-sm-2 col-form-label\">Gambar</label>

          <div class=\"col-sm-10\" style=\"text-align: left !important;\">

        ";
          if ($r['gambar']!=''){
            echo "<img src=\"../foto_banner/$r[gambar]\" width=\"200\">";  
          }
          else{
            echo "Belum ada gambar";
          }
          echo"

</div>
          </div>


 <div class=\"row mb-3\">
                                    <label for=\"inputEmail3\" class=\"col-sm-2 col-form-label\">Ganti Gambar</label>

          <div class=\"col-sm-10\">

        <input type=\"file\" name=\"foto\" class=\"form-control bg-dark\">
<label for=\"formFileLg\" class=\"form-control bg-dark\" style=\"text-align: left !important;\"> - Apabila gambar tidak diganti, dikosongkan saja.</label>
</div>

          </div>














<br/>
         
         <div style=\"text-align: center !important;\">
          <tr><td colspan=\"2\"><input type=\"submit\" value=\"Simpan\" class=\"btn btn-primary\">
                                <input type=\"button\" value=\"Batal\" onclick=\"self.history.back()\" class=\"btn btn-primary\"></td></tr>
          </div>















           
            </form>";
    break;  
  }
}
?>
