<?php ob_start(); ?>

<div class="content-header">
    <h2><?= __('admin.event_categories.title') ?></h2>
    <div class="header-actions">
        <a href="/admin/events" class="btn btn-secondary"><?= __('admin.event_categories.back') ?></a>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">

    <!-- Existing categories -->
    <div>
        <h3 style="margin-bottom:1rem;font-size:1rem;font-weight:600;"><?= __('admin.event_categories.title') ?></h3>
        <?php if (empty($categories)): ?>
        <p class="text-muted"><?= __('admin.event_categories.no_categories') ?></p>
        <?php else: ?>
        <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th><?= __('admin.event_categories.name') ?></th>
                    <th><?= __('admin.event_categories.slug') ?></th>
                    <th><?= __('admin.event_categories.events') ?></th>
                    <th><?= __('admin.common.actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($categories as $cat): ?>
                <tr>
                    <td><strong><?= e($cat['name']) ?></strong></td>
                    <td><code><?= e($cat['slug']) ?></code></td>
                    <td><?= (int) $cat['event_count'] ?></td>
                    <td class="actions">
                        <button type="button"
                                class="btn btn-sm btn-secondary edit-cat-btn"
                                data-id="<?= (int) $cat['id'] ?>"
                                data-name="<?= e($cat['name']) ?>"
                                data-slug="<?= e($cat['slug']) ?>"
                                data-desc="<?= e($cat['description'] ?? '') ?>"><?= __('admin.common.edit') ?></button>
                        <form method="POST" action="/admin/events/categories/delete/<?= (int) $cat['id'] ?>" class="inline-form"
                              onsubmit="return confirm('<?= __('admin.event_categories.confirm_delete', [':name' => e($cat['name'])]) ?>')">
                            <?= $csrf->field() ?>
                            <button type="submit" class="btn btn-sm btn-danger"
                                    <?= (int) $cat['event_count'] > 0 ? 'disabled title="' . __('admin.event_categories.cannot_delete') . '"' : '' ?>>
                                <?= __('admin.common.delete') ?>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
        </div>
        <?php endif; ?>
    </div>

    <!-- Add / edit form -->
    <div>
        <div class="form-card">
            <h4 id="catFormTitle"><?= __('admin.event_categories.add_title') ?></h4>
            <form method="POST" id="catForm" action="/admin/events/categories/store" class="admin-form">
                <?= $csrf->field() ?>
                <input type="hidden" id="catId" name="__action" value="">
                <div class="form-group">
                    <label for="cat_name"><?= __('admin.event_categories.name') ?> <span class="required">*</span></label>
                    <input type="text" id="cat_name" name="name" required placeholder="<?= __('admin.event_categories.name_placeholder') ?>">
                </div>
                <div class="form-group">
                    <label for="cat_slug"><?= __('admin.event_categories.slug') ?></label>
                    <input type="text" id="cat_slug" name="slug" placeholder="<?= __('admin.event_categories.slug_placeholder') ?>">
                </div>
                <div class="form-group">
                    <label for="cat_desc"><?= __('admin.event_categories.description') ?></label>
                    <textarea id="cat_desc" name="description" rows="2"></textarea>
                </div>
                <div style="display:flex;gap:0.5rem;">
                    <button type="submit" class="btn btn-primary btn-sm"><?= __('admin.event_categories.save') ?></button>
                    <button type="button" class="btn btn-secondary btn-sm" id="catFormReset"><?= __('admin.event_categories.reset') ?></button>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
(function () {
    var editBtns    = document.querySelectorAll('.edit-cat-btn');
    var form        = document.getElementById('catForm');
    var formTitle   = document.getElementById('catFormTitle');
    var nameInput   = document.getElementById('cat_name');
    var slugInput   = document.getElementById('cat_slug');
    var descInput   = document.getElementById('cat_desc');
    var resetBtn    = document.getElementById('catFormReset');

    // Auto-slug from name (create mode only)
    nameInput.addEventListener('input', function () {
        if (!slugInput._userEdited && form.action.indexOf('/store') !== -1) {
            slugInput.value = this.value.toLowerCase()
                .replace(/[äöü]/g, function(c){return{ä:'ae',ö:'oe',ü:'ue'}[c]||c;})
                .replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
        }
    });
    slugInput.addEventListener('input', function () { this._userEdited = this.value.trim() !== ''; });

    editBtns.forEach(function (btn) {
        btn.addEventListener('click', function () {
            var id   = btn.dataset.id;
            var name = btn.dataset.name;
            var slug = btn.dataset.slug;
            var desc = btn.dataset.desc;

            formTitle.textContent = '<?= __('admin.event_categories.edit_title') ?>';
            form.action = '/admin/events/categories/update/' + id;
            nameInput.value = name;
            slugInput.value = slug;
            slugInput._userEdited = true;
            descInput.value = desc;
            nameInput.focus();
        });
    });

    if (resetBtn) {
        resetBtn.addEventListener('click', function () {
            formTitle.textContent = '<?= __('admin.event_categories.add_title') ?>';
            form.action = '/admin/events/categories/store';
            form.reset();
            slugInput._userEdited = false;
        });
    }
})();
</script>

<?php $content = ob_get_clean(); include dirname(__DIR__) . '/layouts/admin.php'; ?>
