<!-- Page Header -->
<div class="page-header">
    <div>
        <h1>Menu Items</h1>
        <p>Manage all food items, prices, variants and availability.</p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <?php if (\Core\Auth::can('menu.create')): ?>
        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#importPanel">
            <i class="bi bi-file-earmark-excel me-1"></i> Import Excel
        </button>
        <a href="<?= url('menu/create') ?>" class="btn btn-accent">
            <i class="bi bi-plus-lg me-1"></i> Add Item
        </a>
        <?php endif; ?>
    </div>
</div>

<!-- Import Panel (collapsible) -->
<?php if (\Core\Auth::can('menu.create')): ?>
<div class="collapse mb-4" id="importPanel">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
    <h6 class="fw-bold mb-3"><i class="bi bi-file-earmark-excel me-1 text-success"></i> Import Menu Items from Excel / CSV</h6>

    <?= flash_alert() ?>

    <div class="row g-4">
        <!-- Categories import -->
        <div class="col-md-6">
            <div class="border rounded p-3 h-100">
                <div class="fw-semibold mb-1">Step 1 — Import Categories <span class="text-muted fw-normal small">(optional)</span></div>
                <div class="text-muted small mb-3">Columns: <code>name, description, is_active</code></div>
                <form method="POST" action="<?= url('import/categories') ?>" enctype="multipart/form-data">
                    <?= csrf_field() ?>
                    <div class="input-group input-group-sm">
                        <input type="file" name="file" class="form-control" accept=".xlsx,.xls,.csv" required>
                        <button class="btn btn-outline-success">Upload</button>
                    </div>
                </form>
                <a href="<?= url('import/sample/categories') ?>" class="btn btn-link btn-sm p-0 mt-2 text-muted">
                    <i class="bi bi-download me-1"></i> Download sample file
                </a>
            </div>
        </div>

        <!-- Menu items import -->
        <div class="col-md-6">
            <div class="border rounded p-3 h-100">
                <div class="fw-semibold mb-1">Step 2 — Import Menu Items</div>
                <div class="text-muted small mb-3">Columns: <code>name, category_name, description, price, is_veg, is_active</code></div>
                <form method="POST" action="<?= url('import/menu') ?>" enctype="multipart/form-data">
                    <?= csrf_field() ?>
                    <div class="input-group input-group-sm">
                        <input type="file" name="file" class="form-control" accept=".xlsx,.xls,.csv" required>
                        <button class="btn btn-outline-primary">Upload</button>
                    </div>
                </form>
                <a href="<?= url('import/sample/menu') ?>" class="btn btn-link btn-sm p-0 mt-2 text-muted">
                    <i class="bi bi-download me-1"></i> Download sample file
                </a>
            </div>
        </div>
    </div>

    <div class="text-muted small mt-3">
        <i class="bi bi-info-circle me-1"></i>
        Supported: <strong>.xlsx, .xls, .csv</strong> · Max 5 MB · Duplicate items are skipped · Missing categories are auto-created
    </div>
</div>
</div>
</div>
<?php if (session_status() === PHP_SESSION_ACTIVE && !empty($_SESSION['_flash'])): ?>
<script>
// Keep import panel open after a redirect from import (flash message present)
document.addEventListener('DOMContentLoaded', () => {
    const panel = document.getElementById('importPanel');
    if (panel) new bootstrap.Collapse(panel, { show: true });
});
</script>
<?php endif ?>
<?php endif ?>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body py-3">
        <form method="GET" action="<?= url('menu') ?>" class="row g-2 align-items-end">
            <div class="col-12 col-md-4">
                <label class="form-label mb-1" style="font-size:.8rem;">Search</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-white"><i class="bi bi-search text-secondary"></i></span>
                    <input type="text" name="search" class="form-control"
                           placeholder="Search items…" value="<?= e($filters['search']) ?>">
                </div>
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label mb-1" style="font-size:.8rem;">Category</label>
                <select name="category_id" class="form-select form-select-sm">
                    <option value="">All Categories</option>
                    <?php foreach ($categories as $cat): ?>
                    <option value="<?= $cat['id'] ?>" <?= $filters['category_id'] == $cat['id'] ? 'selected' : '' ?>>
                        <?= e($cat['name']) ?>
                    </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:.8rem;">Status</label>
                <select name="is_available" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="1" <?= $filters['is_available'] === '1' ? 'selected' : '' ?>>Available</option>
                    <option value="0" <?= $filters['is_available'] === '0' ? 'selected' : '' ?>>Unavailable</option>
                </select>
            </div>
            <div class="col-12 col-md-3 d-flex gap-2">
                <button type="submit" class="btn btn-accent btn-sm px-3">
                    <i class="bi bi-funnel me-1"></i> Filter
                </button>
                <a href="<?= url('menu') ?>" class="btn btn-outline-secondary btn-sm px-3">
                    <i class="bi bi-x-lg me-1"></i> Clear
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Table Card -->
<div class="card">
    <div class="card-header">
        <i class="bi bi-journal-richtext text-accent"></i>
        <h6 class="card-title">All Items</h6>
        <span class="ms-auto text-secondary" style="font-size:.8rem;"><?= $total ?> total</span>
    </div>
    <div class="card-body p-0">
        <?php if (empty($items)): ?>
            <div class="text-center py-5 text-secondary">
                <i class="bi bi-journal-x fs-1 d-block mb-3 opacity-25"></i>
                <h6>No menu items found</h6>
                <p class="mb-3">Add your first item to start building your menu.</p>
                <a href="<?= url('menu/create') ?>" class="btn btn-accent btn-sm">
                    <i class="bi bi-plus-lg me-1"></i> Add Item
                </a>
            </div>
        <?php else: ?>
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th style="width:60px;">#</th>
                        <th style="width:70px;">Image</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th class="text-end">Base Price</th>
                        <th class="text-center">Variants</th>
                        <th class="text-center">Sort</th>
                        <th class="text-center">Available</th>
                        <th class="text-center" style="width:120px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($items as $i => $item): ?>
                    <tr>
                        <td class="text-secondary"><?= (($page - 1) * ITEMS_PER_PAGE) + $i + 1 ?></td>
                        <td>
                            <?php if ($item['item_image']): ?>
                                <img src="<?= e(upload_url($item['item_image'])) ?>"
                                     alt="<?= e($item['name']) ?>"
                                     style="width:46px;height:46px;object-fit:cover;border-radius:10px;border:1px solid var(--border-color);">
                            <?php else: ?>
                                <div class="d-flex align-items-center justify-content-center bg-light rounded-2"
                                     style="width:46px;height:46px;">
                                    <i class="bi bi-image text-secondary"></i>
                                </div>
                            <?php endif; ?>
                        </td>
                        <td>
                            <div class="fw-600"><?= e($item['name']) ?></div>
                            <?php if ($item['description']): ?>
                            <div class="text-secondary" style="font-size:.75rem;"><?= e(str_limit($item['description'], 55)) ?></div>
                            <?php endif; ?>
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border" style="font-size:.75rem;">
                                <?= e($item['category_name']) ?>
                            </span>
                        </td>
                        <td class="text-end fw-600 text-accent"><?= money((float)$item['base_price']) ?></td>
                        <td class="text-center">
                            <?php if ($item['choice_group_count'] > 0): ?>
                                <span class="badge" style="background:#eff6ff;color:#3b82f6;font-size:.73rem;">
                                    <i class="bi bi-sliders me-1"></i><?= $item['choice_group_count'] ?> group<?= $item['choice_group_count'] > 1 ? 's' : '' ?>
                                </span>
                            <?php else: ?>
                                <span class="text-secondary" style="font-size:.8rem;">—</span>
                            <?php endif; ?>
                        </td>
                        <td class="text-center text-secondary"><?= $item['sort_order'] ?></td>
                        <td class="text-center">
                            <div class="form-check form-switch d-flex justify-content-center mb-0">
                                <input class="form-check-input toggle-status"
                                       type="checkbox"
                                       role="switch"
                                       <?= $item['is_available'] ? 'checked' : '' ?>
                                       data-url="<?= url('menu/' . $item['id'] . '/toggle') ?>"
                                       <?= !\Core\Auth::can('menu.edit') ? 'disabled' : '' ?>>
                            </div>
                        </td>
                        <td class="text-center">
                            <div class="d-flex gap-1 justify-content-center">
                                <?php if (\Core\Auth::can('menu.edit')): ?>
                                <a href="<?= url('menu/' . $item['id'] . '/edit') ?>"
                                   class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <?php endif; ?>
                                <?php if (\Core\Auth::can('menu.delete')): ?>
                                <form method="POST" action="<?= url('menu/' . $item['id'] . '/delete') ?>">
                                    <?= csrf_field() ?>
                                    <button type="submit" class="btn btn-sm btn-outline-danger"
                                            data-confirm="Delete '<?= e($item['name']) ?>'? This cannot be undone.">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                <?php endif; ?>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <?php if ($total > ITEMS_PER_PAGE): ?>
        <div class="d-flex justify-content-between align-items-center px-4 py-3 border-top">
            <small class="text-secondary">Showing <?= count($items) ?> of <?= $total ?> items</small>
            <?= paginate($total, $page, ITEMS_PER_PAGE, url('menu')) ?>
        </div>
        <?php endif; ?>
        <?php endif; ?>
    </div>
</div>
