<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;">
    <div style="color:var(--color-text-muted);font-size:13.5px;"><i class="fa-solid fa-utensils"></i> Dishes shown on the order-taking screen</div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;">
        <a href="<?= Router::url('menu/today') ?>" class="btn btn-secondary"><i class="fa-solid fa-bowl-rice"></i> View Today's Menu</a>
        <button type="button" class="btn btn-secondary" onclick="rmsOpenModal('rmsCategoriesModal')"><i class="fa-solid fa-layer-group"></i> Categories</button>
        <?php if (Auth::can('menu', 'add')): ?>
        <a href="<?= Router::url('menu/items/create') ?>" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Add Menu Item</a>
        <?php endif; ?>
    </div>
</div>

<div class="panel" style="padding:0;overflow-x:auto;">
<table class="data-table">
<thead><tr><th>Item</th><th>Category</th><th>Price</th><th>Stock Tracking</th><th>Status</th><th></th></tr></thead>
<tbody>
<?php foreach ($items as $it): ?>
<tr>
    <td>
        <div style="display:flex;align-items:center;gap:10px;">
            <?php if (!empty($it['image_path'])): ?>
            <img src="<?= BASE_URL ?>/<?= e($it['image_path']) ?>" alt="" style="width:36px;height:36px;object-fit:cover;border-radius:7px;flex-shrink:0;">
            <?php else: ?>
            <div style="width:36px;height:36px;border-radius:7px;background:rgba(193,135,46,0.12);color:var(--color-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><i class="fa-solid fa-bowl-rice"></i></div>
            <?php endif; ?>
            <div>
                <strong><?= e($it['item_name']) ?></strong><?= $it['description'] ? '<div style="color:var(--color-text-muted);font-size:11.5px;">' . e($it['description']) . '</div>' : '' ?>
            </div>
        </div>
    </td>
    <td><span class="badge badge-gold"><?= e($it['category_name']) ?></span></td>
    <td><?= formatMoney((float) $it['base_price']) ?></td>
    <td><?= $it['track_stock'] ? '<span class="badge badge-blue"><i class="fa-solid fa-box"></i> Tracked</span>' : '<span class="badge badge-gray">Not tracked</span>' ?></td>
    <td><?= $it['is_available'] ? '<span class="badge badge-green"><i class="fa-solid fa-circle-check"></i> Available</span>' : '<span class="badge badge-red"><i class="fa-solid fa-circle-xmark"></i> Unavailable</span>' ?></td>
    <td style="white-space:nowrap;">
        <?php if (Auth::can('menu', 'edit')): ?>
        <a href="<?= Router::url('menu/items/edit?id=' . $it['id']) ?>" class="btn btn-secondary" style="padding:5px 10px;font-size:12px;"><i class="fa-solid fa-pen"></i></a>
        <form method="POST" action="<?= Router::url('menu/items/toggle') ?>" style="display:inline;">
            <?= $csrf ?>
            <input type="hidden" name="id" value="<?= $it['id'] ?>">
            <button type="submit" class="btn btn-secondary" style="padding:5px 10px;font-size:12px;" title="Toggle availability">
                <i class="fa-solid <?= $it['is_available'] ? 'fa-eye-slash' : 'fa-eye' ?>"></i>
            </button>
        </form>
        <?php endif; ?>
        <?php if (Auth::can('menu', 'delete')): ?>
        <form method="POST" action="<?= Router::url('menu/items/delete') ?>" style="display:inline;" onsubmit="return confirm('Delete this item? If it has past orders, it will be deactivated instead.');">
            <?= $csrf ?>
            <input type="hidden" name="id" value="<?= $it['id'] ?>">
            <button type="submit" class="btn btn-danger" style="padding:5px 10px;font-size:12px;"><i class="fa-solid fa-trash"></i></button>
        </form>
        <?php endif; ?>
    </td>
</tr>
<?php endforeach; ?>
<?php if (empty($items)): ?>
<tr><td colspan="6" style="text-align:center;color:var(--color-text-muted);padding:30px;">No menu items yet — add your first dish.</td></tr>
<?php endif; ?>
</tbody>
</table>
</div>

<div class="rms-modal-overlay" id="rmsCategoriesModal">
    <div class="rms-modal" style="max-width:420px;">
        <div class="rms-modal-head">
            <h3><i class="fa-solid fa-layer-group" style="color:var(--color-teal);margin-right:6px;"></i>Categories</h3>
            <button type="button" class="rms-modal-close" onclick="rmsCloseModal('rmsCategoriesModal')"><i class="fa-solid fa-xmark"></i></button>
        </div>

        <?php if (Auth::can('menu', 'add')): ?>
        <form method="POST" action="<?= Router::url('menu/categories/store') ?>" style="display:flex;gap:8px;margin-bottom:16px;">
            <?= $csrf ?>
            <input type="text" name="category_name" class="form-control" placeholder="New category name" required>
            <button type="submit" class="btn btn-primary" style="flex-shrink:0;"><i class="fa-solid fa-plus"></i></button>
        </form>
        <?php endif; ?>

        <div style="max-height:50vh;overflow-y:auto;">
        <?php foreach ($categories as $c): ?>
        <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--color-border);font-size:12.5px;">
            <div>
                <?= e($c['category_name']) ?>
                <span class="badge badge-gray" style="margin-left:6px;"><?= (int) $c['item_count'] ?></span>
            </div>
            <div style="display:flex;gap:4px;">
                <?php if (Auth::can('menu', 'edit')): ?>
                <form method="POST" action="<?= Router::url('menu/categories/toggle') ?>">
                    <?= $csrf ?>
                    <input type="hidden" name="id" value="<?= $c['id'] ?>">
                    <button type="submit" class="btn btn-secondary" style="padding:4px 8px;font-size:11px;" title="Toggle active">
                        <i class="fa-solid <?= $c['is_active'] ? 'fa-eye' : 'fa-eye-slash' ?>"></i>
                    </button>
                </form>
                <?php endif; ?>
                <?php if (Auth::can('menu', 'delete') && (int) $c['item_count'] === 0): ?>
                <form method="POST" action="<?= Router::url('menu/categories/delete') ?>" onsubmit="return confirm('Delete this category?');">
                    <?= $csrf ?>
                    <input type="hidden" name="id" value="<?= $c['id'] ?>">
                    <button type="submit" class="btn btn-danger" style="padding:4px 8px;font-size:11px;"><i class="fa-solid fa-trash"></i></button>
                </form>
                <?php endif; ?>
            </div>
        </div>
        <?php endforeach; ?>
        <?php if (empty($categories)): ?>
        <div style="text-align:center;color:var(--color-text-muted);font-size:12.5px;padding:14px 0;">No categories yet.</div>
        <?php endif; ?>
        </div>
    </div>
</div>