<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Data Teh</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./assets/css/tailwind.output.css" />
    <script
      src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
      defer
    ></script>
    <script src="./assets/js/init-alpine.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2" defer></script>
  </head>
  <body>
    <div
      class="flex h-screen bg-gray-50 dark:bg-gray-900"
      :class="{ 'overflow-hidden': isSideMenuOpen}"
    >
    <?php
      $currentPage = basename($_SERVER['PHP_SELF']);
      include 'sidebar.php';
      ?>
     <?php include 'header.php'; ?>
        <main class="h-full pb-16 overflow-y-auto">
          <div class="container px-6 mx-auto grid">
            <h2
              class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
            >
              Data Teh
            </h2>
<!-- Tombol Tambah Data -->
<div x-data="{ open: false }">
  <!-- Tombol Tambah Data -->
  <div class="flex justify-start w-auto mb-4">
    <button @click="open = true"
      class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded">
      + Tambah Data
    </button>
  </div>

  <!-- Modal Overlay -->
  <div x-show="open"
       class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0">

    <!-- Modal Box -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl w-full max-w-xl mx-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
    Tambah Data Teh
  </h2>

  <form action="tambah_teh.php" method="POST">
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300">Kelas Mutu</label>
    <input type="text" name="kelas_mutu" required
           class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
  </div>

  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300">Mutu</label>
    <input type="text" name="mutu" required
           class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
  </div>

  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300">Ciri-ciri</label>
    <input type="text" name="ciri_ciri" required
           class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
  </div>
    <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300">Keterangan</label>
    <input type="tex" name="keterangan" required
           class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
  </div>

  <div class="flex justify-end space-x-2">
    <button type="button" @click="open = false"
      class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white rounded hover:bg-gray-400 dark:hover:bg-gray-500">
      Batal
    </button>
    <button type="submit"
      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      Simpan
    </button>
  </div>
</form>

</div>

  </div>
</div>

  <div class="w-full overflow-hidden rounded-lg shadow-xs" max-w-xl mx-auto>
    <div class="w-full overflow-x-auto" max-w-xl mx-auto>
        
      <table class="w-full whitespace-no-wrap">
        <thead>
          <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
            <th class="px-4 py-3">No</th>
            <th class="px-4 py-3">Kelas Mutu</th>
            <th class="px-4 py-3">Mutu</th>
            <th class="px-4 py-3">Ciri-ciri</th>
            <th class="px-4 py-3">Jumlah Teh</th>
            <th class="px-4 py-3">Jumlah Bagus</th>
            <th class="px-4 py-3">Jumlah Rusak</th>
            <th class="px-4 py-3">Grade</th>
           <th class="px-4 py-3">Aksi</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
  <?php
include 'koneksi.php';
$no = 1;
$query = mysqli_query($conn, "SELECT * FROM jenis_teh ORDER BY id_teh ASC");
while ($row = mysqli_fetch_assoc($query)) :
?>

<tr x-data="{ editOpen: false }" class="text-gray-700 dark:text-gray-400">
  <td class="px-4 py-3"><?= $no++; ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['kelas_mutu']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['mutu']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['ciri_ciri']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['jumlah_teh']); ?>Kg</td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['jumlah_bagus']); ?>Kg</td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['jumlah_rusak']); ?>Kg</td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['grade']); ?></td>
  <td class="px-4 py-3">
    <div class="flex space-x-2">
      <button @click="editOpen = true"
        class="px-3 py-1 text-xs font-medium text-gray-800 bg-gray-200 hover:bg-gray-300 rounded dark:text-white dark:bg-gray-600 dark:hover:bg-gray-700">
        Edit
      </button>
      <a href="hapus_teh.php?id_teh=<?= $row['id_teh']; ?>"
        onclick="return confirm('Yakin ingin menghapus data ini?')"
        class="px-3 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded">
        Delete
      </a>
    </div>

    <!-- Modal Edit -->
    <div x-show="editOpen" x-cloak
      class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition ease-in duration-200"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0">
      
      <!-- Modal Box -->
      <div class="bg-white dark:bg-gray-800 p-6 rounded-xl w-full max-w-xl mx-4">
        <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
          Edit Data Teh
        </h2>

        <form action="update_user.php" method="POST">
          <input type="hidden" name="id_teh" value="<?= $row['id_teh']; ?>">

          <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Kelas Mutu</label>
            <input type="text" name="kelas_mutu" required
              class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white"
              value="<?= htmlspecialchars($row['kelas_mutu']); ?>">
          </div>

          <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Mutu</label>
            <input type="text" name="mutu" required
              class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white"
              value="<?= htmlspecialchars($row['mutu']); ?>">
          </div>

          <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Ciri-ciri</label>
            <input type="text" name="ciri_ciri" required
              class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white"
              value="<?= htmlspecialchars($row['ciri_ciri']); ?>">
          </div>

          <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Grade</label>
            <input type="text" name="grade" required
              class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white"
              value="<?= htmlspecialchars($row['grade']); ?>">
          </div>

          <div class="flex justify-end space-x-2">
            <button type="button" @click="editOpen = false"
              class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white rounded hover:bg-gray-400 dark:hover:bg-gray-500">
              Batal
            </button>
            <button type="submit"
              class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded">
              Update
            </button>
          </div>
        </form>
      </div>
    </div>
  </td>
</tr>

<?php endwhile; ?>

</tbody>
      </table>
    </div>
  </div>
</div>

</body>
</html>
