{% extends 'layouts/admin.twig' %}

{% block head %}
    <link rel="stylesheet" href="/modules/BlockRegistry/admin/css/block_registry.css">
{% endblock %}

{% block content %}

    <ul class="breadcrumbs el">
        <li><a href="/admin/">Admin</a> /</li>
        <li><a href="{{ route('admin.blocks.index') }}">Block Registry</a> /</li>
        <li class="end">Categories</li>
    </ul>

    <h1>{{ title }}</h1>

    {% include 'admin/block_registry/_tabnav.twig' with { active_tab: 'categories' } %}

    {% for message in messages %}
        <div class="alert alert-{{ message.type }}">
            {{ message.content }}
        </div>
    {% endfor %}

    <div class="category-management">
        <div class="category-form-section">
            <fieldset class="show">
                <h1>Add New Category</h1>

                <form action="{{ route('admin.blocks.categories.store') }}" method="POST" class="style">
                    <div class="row">
                        <label for="new_name">Name <span class="required">*</span></label>
                        <input type="text" name="name" id="new_name" required placeholder="e.g., Content, Layout, Media">
                    </div>

                    <div class="row">
                        <label for="new_slug">Slug</label>
                        <input type="text" name="slug" id="new_slug" placeholder="auto-generated if empty">
                    </div>

                    <div class="row">
                        <label for="new_icon">Icon</label>
                        <input type="text" name="icon" id="new_icon" placeholder="fa-folder" value="fa-folder">
                        <small>FontAwesome icon class</small>
                    </div>

                    <div class="row">
                        <label for="new_order">Order</label>
                        <input type="number" name="order_index" id="new_order" value="0" min="0">
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-plus"></i> Add Category
                    </button>
                </form>
            </fieldset>
        </div>

        <div class="category-list-section">
            <fieldset class="show">
                <h1>Existing Categories</h1>

                {% if categories|length > 0 %}
                    <table class="manage-items" id="categoriesTable">
                        <thead>
                            <tr>
                                <th width="40">#</th>
                                <th width="50">Icon</th>
                                <th>Name</th>
                                <th>Slug</th>
                                <th width="80">Blocks</th>
                                <th width="80">Order</th>
                                <th width="150">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for category in categories %}
                            <tr data-id="{{ category.id }}">
                                <td>{{ category.id }}</td>
                                <td><i class="fa {{ category.icon ?? 'fa-folder' }} fa-lg"></i></td>
                                <td>
                                    <strong class="category-name">{{ category.name }}</strong>
                                </td>
                                <td><code>{{ category.slug }}</code></td>
                                <td>
                                    <span class="badge">{{ category.blocks_count ?? 0 }}</span>
                                </td>
                                <td>{{ category.order_index }}</td>
                                <td class="actions">
                                    <button type="button" class="btn-link" onclick="editCategory({{ category.id }}, '{{ category.name|e('js') }}', '{{ category.slug|e('js') }}', '{{ category.icon|e('js') }}', {{ category.order_index }})" title="Edit">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <form action="{{ route('admin.blocks.categories.destroy', {'id': category.id}) }}" method="POST" onsubmit="return confirm('Delete this category? Blocks will be moved to uncategorized.')">
                                        <input type="hidden" name="_method" value="DELETE">
                                        <button type="submit" class="btn-link error" title="Delete">
                                            <i class="fa fa-times-circle"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <div class="empty-state">
                        <i class="fa fa-folder-open-o fa-2x"></i>
                        <p>No categories yet. Create your first category above.</p>
                    </div>
                {% endif %}
            </fieldset>
        </div>
    </div>

    <!-- Edit Category Modal -->
    <div id="editModal" class="modal" style="display:none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Edit Category</h2>
                <button type="button" class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <form id="editForm" method="POST" class="style" data-store-url="{{ route('admin.blocks.categories.store') }}">
                <div class="modal-body">
                    <div class="row">
                        <label for="edit_name">Name <span class="required">*</span></label>
                        <input type="text" name="name" id="edit_name" required>
                    </div>

                    <div class="row">
                        <label for="edit_slug">Slug</label>
                        <input type="text" name="slug" id="edit_slug">
                    </div>

                    <div class="row">
                        <label for="edit_icon">Icon</label>
                        <input type="text" name="icon" id="edit_icon">
                    </div>

                    <div class="row">
                        <label for="edit_order">Order</label>
                        <input type="number" name="order_index" id="edit_order" min="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>

    <script src="/modules/BlockRegistry/js/block-registry-categories.js"></script>

{% endblock %}
