alrahma_sunday_school/app/Views/inventory/book/prices.php

<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>

<?php
$categoryById = [];
foreach (($categories ?? []) as $category) {
    $categoryById[(int) ($category['id'] ?? 0)] = $category;
}

$gradeLabel = static function (?array $category): string {
    if (! $category) {
        return '-';
    }
    $gmin = $category['grade_min'] ?? null;
    $gmax = $category['grade_max'] ?? null;
    if ($gmin === null && $gmax === null) {
        return '-';
    }
    if ($gmin !== null && $gmax !== null) {
        return 'G' . (int) $gmin . '-G' . (int) $gmax;
    }
    if ($gmin !== null) {
        return 'G' . (int) $gmin . '+';
    }
    return '<=G' . (int) $gmax;
};
?>

<div class="container-fluid px-0 mt-3">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3 px-3">
    <div>
      <h3 class="mb-0">Book Prices</h3>
      <div class="text-muted small">School year: <?= esc($schoolYear ?? '') ?></div>
    </div>
    <a class="btn btn-outline-secondary" href="<?= site_url('inventory/book') ?>">Back to Books</a>
  </div>

  <?= view('partials/flash_messages') ?>

  <form method="post" action="<?= site_url('inventory/book-prices') ?>">
    <?= csrf_field() ?>

    <div class="card mb-4">
      <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div class="d-flex flex-wrap gap-2">
          <input class="form-control form-control-sm" id="bookPriceSearch" type="search" placeholder="Search title, ISBN, SKU" style="width: 260px;">
          <select class="form-select form-select-sm" id="bookPriceCategoryFilter" style="width: 240px;">
            <option value="">All Categories</option>
            <?php foreach (($categories ?? []) as $category): ?>
              <option value="<?= (int) ($category['id'] ?? 0) ?>"><?= esc($category['name'] ?? '') ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <button class="btn btn-primary btn-sm">Save Prices</button>
      </div>
      <div class="card-body table-responsive">
        <table class="table table-striped align-middle mb-0 no-mgmt-sticky no-dt-fixedheader" data-no-mgmt-sticky data-no-dt-fixedheader id="bookPriceTable">
          <thead>
            <tr>
              <th>Book</th>
              <th>ISBN / Edition / SKU</th>
              <th>Category</th>
              <th>Grade Range</th>
              <th class="text-end">Qty</th>
              <th style="width: 170px;">Price</th>
              <th style="width: 130px;">Confirmed</th>
              <th style="width: 120px;">Status</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach (($books ?? []) as $book): ?>
              <?php
                $bookId = (int) ($book['id'] ?? 0);
                $category = $categoryById[(int) ($book['category_id'] ?? 0)] ?? null;
                $priceCents = (int) ($book['charge_price_cents'] ?? 0);
                $isConfirmed = $priceCents > 0 && (int) ($book['price_confirmed'] ?? 0) === 1;
                $search = strtolower(trim(implode(' ', [
                    $book['name'] ?? '',
                    $book['isbn'] ?? '',
                    $book['edition'] ?? '',
                    $book['sku'] ?? '',
                    $category['name'] ?? '',
                ])));
              ?>
              <tr data-category="<?= esc($book['category_id'] ?? '') ?>" data-search="<?= esc($search) ?>">
                <td>
                  <div class="fw-semibold"><?= esc($book['name'] ?? '') ?></div>
                  <div class="small text-muted">ID #<?= $bookId ?></div>
                </td>
                <td>
                  <div><?= esc(($book['isbn'] ?? '') ?: '-') ?></div>
                  <div class="small text-muted">
                    <?= esc(($book['edition'] ?? '') ?: '-') ?> / <?= esc(($book['sku'] ?? '') ?: '-') ?>
                  </div>
                </td>
                <td><?= esc($category['name'] ?? 'Uncategorized') ?></td>
                <td><?= esc($gradeLabel($category)) ?></td>
                <td class="text-end"><?= (int) ($book['quantity'] ?? 0) ?></td>
                <td>
                  <div class="input-group input-group-sm">
                    <span class="input-group-text">$</span>
                    <input class="form-control" name="prices[<?= $bookId ?>]" inputmode="decimal" pattern="^\d+(\.\d{1,2})?$" value="<?= esc(number_format($priceCents / 100, 2, '.', '')) ?>">
                  </div>
                </td>
                <td>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="confirmed[<?= $bookId ?>]" value="1" id="confirmed<?= $bookId ?>" <?= $isConfirmed ? 'checked' : '' ?>>
                    <label class="form-check-label" for="confirmed<?= $bookId ?>">Confirm</label>
                  </div>
                </td>
                <td>
                  <?php if ($isConfirmed): ?>
                    <span class="badge bg-success">Ready</span>
                  <?php else: ?>
                    <span class="badge bg-warning text-dark">Needs price</span>
                  <?php endif; ?>
                </td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <div class="card-footer text-end">
        <button class="btn btn-primary">Save Prices</button>
      </div>
    </div>
  </form>
</div>

<script>
(function () {
  const search = document.getElementById('bookPriceSearch');
  const category = document.getElementById('bookPriceCategoryFilter');
  const rows = Array.from(document.querySelectorAll('#bookPriceTable tbody tr'));

  function applyFilters() {
    const term = (search?.value || '').trim().toLowerCase();
    const categoryId = category?.value || '';
    rows.forEach(row => {
      const matchesText = !term || (row.getAttribute('data-search') || '').includes(term);
      const matchesCategory = !categoryId || row.getAttribute('data-category') === categoryId;
      row.style.display = matchesText && matchesCategory ? '' : 'none';
    });
  }

  search?.addEventListener('input', applyFilters);
  category?.addEventListener('change', applyFilters);
})();
</script>

<?= $this->endSection() ?>