<?= $this->include('/Styles/header'); ?>

<main class="flex-1 p-6 bg-gray-50 min-h-screen">

  <!-- Dashboard Stats -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 mb-6">
    <div class="bg-yellow-50 p-6 rounded-lg shadow text-center">
      <h3 class="text-lg font-semibold text-yellow-700">Categories</h3>
      <p class="text-3xl font-bold mt-2 text-yellow-800"><?= $categoryCount; ?></p>
    </div>
    <div class="bg-green-50 p-6 rounded-lg shadow text-center">
      <h3 class="text-lg font-semibold text-green-700">Products</h3>
      <p class="text-3xl font-bold mt-2 text-green-800"><?= $productCount; ?></p>
    </div>
    <div class="bg-blue-50 p-6 rounded-lg shadow text-center">
      <h3 class="text-lg font-semibold text-blue-700">Pending Orders</h3>
      <p class="text-3xl font-bold mt-2 text-blue-800"><?= $pendingOrders; ?></p>
    </div>
    <div class="bg-purple-50 p-6 rounded-lg shadow text-center">
      <h3 class="text-lg font-semibold text-purple-700">Apartments</h3>
      <p class="text-3xl font-bold mt-2 text-purple-800"><?= $apartmentCount; ?></p>
    </div>
  </div>

  <!-- Products Table -->
  <div class="bg-white shadow rounded-lg p-4 overflow-x-auto">
    <table id="productTable" class="min-w-full divide-y divide-gray-200 text-sm">
      <thead class="bg-gray-100">
        <tr>
          <th class="px-4 py-2">ID</th>
          <th class="px-4 py-2">Product Name</th>
          <th class="px-4 py-2">SKU</th>
          <th class="px-4 py-2">Unit</th>
          <th class="px-4 py-2">Quantity</th>
          <th class="px-4 py-2">Price</th>
          <th class="px-4 py-2">Offer Price</th>
          <th class="px-4 py-2">ReFill Stock</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        <?php foreach ($products as $p): ?>
        <tr id="productRow-<?= $p['id']; ?>" class="hover:bg-gray-50">
          <td class="px-4 py-2"><?= $p['id']; ?></td>
          <td class="px-4 py-2"><?= esc($p['product_name']); ?></td>
          <td class="px-4 py-2"><?= esc($p['sku_name']); ?></td>
          <td class="px-4 py-2"><?= esc($p['unit']); ?></td>
          <td class="px-4 py-2" id="quantity-<?= $p['id']; ?>"><?= esc($p['quantity']); ?></td>
          <td class="px-4 py-2" id="price-<?= $p['id']; ?>"><?= esc($p['price']); ?></td>
          <td class="px-4 py-2" id="offer_price-<?= $p['id']; ?>"><?= esc($p['offer_price']); ?></td>
          <td class="px-4 py-2">
            <button class="bg-green-600 text-white px-4 py-1 rounded text-sm hover:bg-green-700"
                onclick="openRefillModal(<?= $p['id']; ?>, <?= $p['quantity']; ?>, <?= $p['price']; ?>, <?= $p['offer_price']; ?>)">
                ReFill
            </button>
          </td>
        </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>

</main>

<!-- Refill Modal (Same as before) -->
<div id="refillModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
  <div class="bg-white rounded-lg shadow-lg w-96 p-6">
    <h2 class="text-xl font-bold mb-4 text-green-800">ReFill Stock</h2>
    <form id="refillForm" method="post">
      <?= csrf_field() ?>
      <input type="hidden" name="id" id="productId">
      <div class="mb-3">
        <label class="block text-sm font-medium">Quantity to Add</label>
        <input type="number" step="0.01" name="quantity" id="quantity" class="w-full border px-2 py-1 rounded text-sm" required>
        <small id="currentStockInfo" class="text-gray-500 text-xs"></small>
      </div>
      <div class="mb-3">
        <label class="block text-sm font-medium">Price</label>
        <input type="number" step="0.01" name="price" id="price" class="w-full border px-2 py-1 rounded text-sm" required>
      </div>
      <div class="mb-3">
        <label class="block text-sm font-medium">Offer Price</label>
        <input type="number" step="0.01" name="offer_price" id="offer_price" class="w-full border px-2 py-1 rounded text-sm">
      </div>
      <div class="flex justify-end space-x-2">
        <button type="button" id="cancelBtn" class="px-4 py-1 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>
        <button type="submit" id="saveBtn" class="px-4 py-1 bg-green-600 text-white rounded hover:bg-green-700">Save</button>
      </div>
    </form>
  </div>
</div>

<script>
// Same modal JS as before
function openRefillModal(id, quantity, price, offer_price) {
    const modal = document.getElementById('refillModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    document.getElementById('productId').value = id;
    document.getElementById('quantity').value = '';
    document.getElementById('currentStockInfo').textContent = `Current stock: ${quantity}`;
    document.getElementById('price').value = price;
    document.getElementById('offer_price').value = offer_price;
}
function closeRefillModal() { document.getElementById('refillModal').classList.add('hidden'); }
document.getElementById('cancelBtn').addEventListener('click', closeRefillModal);

document.getElementById('refillForm').addEventListener('submit', function(e){
    e.preventDefault();
    const form = e.target;
    const id = document.getElementById('productId').value;
    const formData = new FormData(form);

    fetch("<?= base_url('adDashboard/refillStock/') ?>" + id, {
        method: 'POST',
        body: formData,
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success'){
            document.getElementById(`quantity-${id}`).textContent = data.quantity;
            document.getElementById(`price-${id}`).textContent = data.price;
            document.getElementById(`offer_price-${id}`).textContent = data.offer_price;
            closeRefillModal();
            alert('Stock updated successfully!');
        } else { alert(data.message); }
    })
    .catch(err => console.log(err));
});
</script>

<?= $this->include('/Styles/footer'); ?>
