<!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>Manajemen User</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"
            >
              Manajemen User
            </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 User
  </h2>

  <form action="tambah_user.php" method="POST">
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300">Nama</label>
    <input type="text" name="name" 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">Username</label>
    <input type="text" name="username" 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">Password</label>
    <input type="password" name="password" 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">Role</label>
    <select name="role" required class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
      <option value="">-- Pilih Role --</option>
      <option value="Admin">Admin</option>
      <option value="User">User</option>
    </select>
  </div>

  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300">Jabatan</label>
    <select name="jabatan" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
      <option value="">-- Pilih Jabatan --</option>
      <option value="Aspol">Aspol</option>
      <option value="Mandor Penerimaan Pucuk">Mandor Penerimaan Pucuk</option>
      <option value="Mandor Pelayuan">Mandor Pelayuan</option>
      <option value="Mandor Penggilingan">Mandor Penggilingan</option>
      <option value="Mandor Oksidasi">Mandor Oksidasi</option>
      <option value="Mandor Pengeringan">Mandor Pengeringan</option>
      <option value="Mandor Sortasi">Mandor Sortasi</option>
      <option value="Mandor Pengepakan">Mandor Pengepakan</option>
    </select>
  </div>

  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300">Status</label>
    <select name="status" required class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
      <option value="1">Aktif</option>
      <option value="0">Tidak Aktif</option>
    </select>
  </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">Nama</th>
            <th class="px-4 py-3">Username</th>
            <th class="px-4 py-3">Role</th>
            <th class="px-4 py-3">Jabatan</th>
            <th class="px-4 py-3">Status</th>
            <th class="px-4 py-3">Created</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 users ORDER BY id_user 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['name']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['username']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['role']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['jabatan']); ?></td>
   <td class="px-4 py-3">
  <?= $row['status'] == 1 ? 'Aktif' : 'Tidak Aktif'; ?>
</td>
    <td class="px-4 py-3"><?= htmlspecialchars($row['created_at']); ?></td>
  <td class="px-4 py-3">
    <div class="flex space-x-2">
      <!-- Tombol Edit -->
      <a href="update_user.php"
         @click.prevent="editOpen = true"
       class="inline-block 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
      </a>

      <!-- Tombol Delete -->
      <a href="hapus_user.php?id_user=<?= $row['id_user']; ?>"
         onclick="return confirm('Yakin ingin menghapus data ini?')"
          class="inline-block 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"
         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 User
        </h2>

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

          <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Nama</label>
            <input type="text" name="name" required
                   class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white"
                   value="<?= htmlspecialchars($row['name']); ?>">
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Username</label>
            <input type="text" name="username" required
                   class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white"
                   value="<?= htmlspecialchars($row['username']); ?>">
          </div>
          <div class="mb-4">
  <label class="block text-gray-700 dark:text-gray-300">Password Baru</label>
  <input type="password" name="password"
         class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white"
         placeholder="Isi jika ingin ganti password">
</div>
      <div class="mb-4">
      <label class="block text-gray-700 dark:text-gray-300">Role</label>
      <select name="role" required class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
      <option value="Admin" <?= $row['role'] == 'Admin' ? 'selected' : '' ?>>Admin</option>
      <option value="User" <?= $row['role'] == 'User' ? 'selected' : '' ?>>User</option>
      </select>
          </div>

<div class="mb-4">
  <label class="block text-gray-700 dark:text-gray-300">Jabatan</label>
  <select name="jabatan" required class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
    <option value="Aspol" <?= $row['jabatan'] == 'Aspol' ? 'selected' : '' ?>>Aspol</option>
    <option value="Mandor Penerimaan Pucuk" <?= $row['jabatan'] == 'Mandor Penerimaan Pucuk' ? 'selected' : '' ?>>Mandor Penerimaan Pucuk</option>
    <option value="Mandor Pelayuan" <?= $row['jabatan'] == 'Mandor Pelayuan' ? 'selected' : '' ?>>Mandor Pelayuan</option>
    <option value="Mandor Penggilingan" <?= $row['jabatan'] == 'Mandor Penggilingan' ? 'selected' : '' ?>>Mandor Penggilingan</option>
    <option value="Mandor Oksidasi" <?= $row['jabatan'] == 'Mandor Oksidasi' ? 'selected' : '' ?>>Mandor Oksidasi</option>
    <option value="Mandor Pengeringan" <?= $row['jabatan'] == 'Mandor Pengeringan' ? 'selected' : '' ?>>Mandor Pengeringan</option>
    <option value="Mandor Sortasi" <?= $row['jabatan'] == 'Mandor Sortasi' ? 'selected' : '' ?>>Mandor Sortasi</option>
    <option value="Mandor Pengepakan" <?= $row['jabatan'] == 'Mandor Pengepakan' ? 'selected' : '' ?>>Mandor Pengepakan</option>
  </select>
</div>

          
          <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Status</label>
      <select name="status" required class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:text-white">
         <option value="1" <?= $row['status'] == 1 ? 'selected' : '' ?>>Aktif</option>
  <option value="0" <?= $row['status'] == 0 ? 'selected' : '' ?>>Tidak Aktif</option>
      </select>
          </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 } ?>
</tbody>

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

</body>
</html>
