<div class="fade-in">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <div>
            <h1 style="margin: 0; font-size: 2rem;"><?= \App\Helpers\Lang::t('categories') ?></h1>
            <p style="color: var(--text-muted); margin: 0.25rem 0 0 0;"><?= \App\Helpers\Lang::t('cat_manage_desc') ?></p>
        </div>
        <button onclick="document.getElementById('create-cat-modal').style.display = 'flex'" class="btn btn-primary" style="padding: 0.75rem 1.5rem;">
            <i class="fas fa-plus"></i> <?= \App\Helpers\Lang::t('add_category') ?>
        </button>
    </div>

    <div class="card" style="padding: 0; overflow: hidden;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead style="background: rgba(0,0,0,0.1);">
                <tr>
                    <th style="padding: 1.25rem; text-align: left; width: 60px;"><?= \App\Helpers\Lang::t('id') ?></th>
                    <th style="padding: 1.25rem; text-align: left;"><?= \App\Helpers\Lang::t('name_desc') ?></th>
                    <th style="padding: 1.25rem; text-align: left;"><?= \App\Helpers\Lang::t('slug_icon') ?></th>
                    <th style="padding: 1.25rem; text-align: left; width: 100px;"><?= \App\Helpers\Lang::t('sort_order') ?></th>
                    <th style="padding: 1.25rem; text-align: right; width: 150px;"><?= \App\Helpers\Lang::t('actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($categories as $cat): ?>
                <tr style="border-bottom: 1px solid var(--border);">
                    <td style="padding: 1.25rem; color: var(--text-muted);">#<?= $cat['id'] ?></td>
                    <td style="padding: 1.25rem;">
                        <div style="font-weight: 700; font-size: 1.1rem; color: var(--primary);">
                            <i class="fas fa-<?= htmlspecialchars($cat['icon']) ?>" style="margin-right: 0.5rem;"></i>
                            <?= htmlspecialchars($cat['name']) ?>
                        </div>
                        <div style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem;">
                            <?= htmlspecialchars($cat['description']) ?>
                        </div>
                    </td>
                    <td style="padding: 1.25rem;">
                        <code style="background: var(--bg); padding: 0.2rem 0.5rem; border-radius: 4px;"><?= $cat['slug'] ?></code>
                    </td>
                    <td style="padding: 1.25rem;">
                        <input type="number" value="<?= $cat['sort_order'] ?>" class="form-control" style="width: 60px; padding: 0.25rem;" readonly>
                    </td>
                    <td style="padding: 1.25rem; text-align: right;">
                        <button class="btn btn-icon" style="color: var(--primary);" onclick="editCat(<?= htmlspecialchars(json_encode($cat)) ?>)"><i class="fas fa-edit"></i></button>
                        <form action="/admin/categories/delete/<?= $cat['id'] ?>" method="POST" style="display: inline;" onsubmit="return confirm('<?= \App\Helpers\Lang::t('confirm_delete') ?>')">
                            <?= \App\Core\CSRF::field() ?>
                            <button type="submit" class="btn btn-icon" style="color: #ef4444; background: none; border: none; padding: 0; cursor: pointer;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($categories)): ?>
                <tr>
                    <td colspan="5" style="padding: 4rem; text-align: center; color: var(--text-muted);">
                        <i class="fas fa-folder-open" style="font-size: 3rem; display: block; margin-bottom: 1rem;"></i>
                        <?= \App\Helpers\Lang::t('no_pages_found') ?>
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Create Modal -->
<div id="create-cat-modal" class="modal-overlay" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(5px);">
    <div class="card" style="width: 100%; max-width: 500px; padding: 2.5rem; position: relative;">
        <button onclick="this.closest('.modal-overlay').style.display = 'none'" style="position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.5rem;"><i class="fas fa-times"></i></button>
        <h2 style="margin: 0 0 1.5rem 0;"><?= \App\Helpers\Lang::t('create_category') ?></h2>
        <form action="/admin/categories/store" method="POST">
            <?= \App\Core\CSRF::field() ?>
            <div class="form-group" style="margin-bottom: 1rem;">
                <label><?= \App\Helpers\Lang::t('title') ?></label>
                <input type="text" name="name" class="form-control" required placeholder="<?= \App\Helpers\Lang::t('example_tech') ?>">
            </div>
            <div class="form-group" style="margin-bottom: 1rem;">
                <label>Slug (URL)</label>
                <input type="text" name="slug" class="form-control" required placeholder="tech">
            </div>
            <div class="form-group" style="margin-bottom: 1rem;">
                <label><?= \App\Helpers\Lang::t('content') ?></label>
                <textarea name="description" class="form-control" style="height: 100px;" placeholder="<?= \App\Helpers\Lang::t('short_cat_desc') ?>"></textarea>
            </div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div class="form-group">
                    <label><?= \App\Helpers\Lang::t('slug_icon') ?></label>
                    <input type="text" name="icon" class="form-control" value="folder">
                </div>
                <div class="form-group">
                    <label><?= \App\Helpers\Lang::t('sort_order') ?></label>
                    <input type="number" name="sort_order" class="form-control" value="0">
                </div>
            </div>
            <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1.5rem;"><?= \App\Helpers\Lang::t('save') ?> <i class="fas fa-save" style="margin-left: 0.5rem;"></i></button>
        </form>
    </div>
</div>

<script>
function editCat(cat) {
    const modal = document.getElementById('create-cat-modal');
    const form = modal.querySelector('form');
    modal.querySelector('h2').innerText = '<?= \App\Helpers\Lang::t('edit_category') ?>';
    form.action = '/admin/categories/update/' + cat.id;
    form.querySelector('[name="name"]').value = cat.name;
    form.querySelector('[name="slug"]').value = cat.slug;
    form.querySelector('[name="description"]').value = cat.description;
    form.querySelector('[name="icon"]').value = cat.icon;
    form.querySelector('[name="sort_order"]').value = cat.sort_order;
    modal.style.display = 'flex';
}
</script>
