<!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>Monitoring Produksi</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"
            >
              Monitoring Produksi Panglejar
            </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">Kode Produksi</th>
            <th class="px-4 py-3">Tanggal Mulai</th>
            <th class="px-4 py-3">Penanggung Jawab</th>
            <th class="px-4 py-3">Jabatan</th>
            <th class="px-4 py-3">Status</th>
            <th class="px-4 py-3">Tanggal Selesai</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';
$query = mysqli_query($conn, "
  SELECT produksi_master.*, users.name AS name, users.jabatan 
  FROM produksi_master 
  JOIN users ON produksi_master.id_user = users.id_user
  ORDER BY produksi_master.id_produksi DESC
");

$no = 1;
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['kode_produksi']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['tanggal_mulai']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['name']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['jabatan']); ?></td>
  <td class="px-4 py-3"><?= htmlspecialchars($row['status']); ?></td>
    <td class="px-4 py-3"><?= htmlspecialchars($row['tanggal_selesai']); ?></td>
  <td class="px-4 py-3">
    <div class="flex space-x-2">
      <!--Tombol Edit-->
      <!--<a href="update_produksi.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_produksi.php?id_produksi=<?= $row['id_produksi']; ?>"
         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>-->
      <button 
  class="px-3 py-1 text-white bg-blue-500 rounded hover:bg-blue-600 text-xs"
  onclick="openModal('<?= $row['id_produksi'] ?>')">
  Lihat Detail
</button>

    </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="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600">
              Update
            </button>
          </div>
        </form>
      </div>
    </div>
  </td>
</tr>

  <?php } ?>
</tbody>
<!-- Modal container -->
<div id="modalWrapper" 
     class="hidden fixed inset-0 z-[9999] bg-black bg-opacity-50 flex items-center justify-center"
     style="padding-left: 250px; padding-right: 50px;"> <!-- padding kanan ditambah -->

  <div class="bg-white dark:bg-gray-800 w-[95%] max-w-[1200px] max-h-[90vh] rounded-lg shadow-lg flex flex-col">

    <!-- Header -->
    <div class="flex justify-between items-center px-6 pt-6 pb-4">
      <h2 class="text-xl font-semibold text-gray-700"></h2>
      <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700 text-2xl font-bold">&times;</button>
    </div>

    <!-- Modal Content -->
    <div id="modalContent" class="px-6 py-4 overflow-y-auto" style="max-height: 60vh;">
      <div id="tabelContainer">
        <!-- JS akan inject tabel di sini -->
      </div>
    </div>

    <!-- Footer -->
    <div class="border-t px-6 py-4 text-right">
      <button onclick="closeModal()" class="bg-gray-500 text-gray px-4 py-2 rounded hover:bg-gray-600">
        
      </button>
    </div>

  </div>
</div>

<script>
  function openModal(id) {
    fetch('get_detail_produksi.php?id_produksi=' + id)
      .then(response => response.text())
      .then(html => {
        document.getElementById('modalContent').innerHTML = html;
        document.getElementById('modalWrapper').classList.remove('hidden');
      })
      .catch(err => {
        alert('Gagal memuat detail produksi');
        console.error(err);
      });
  }

  function closeModal() {
    document.getElementById('modalWrapper').classList.add('hidden');
  }
</script>



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

</body>
</html>
