{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <h1>Settings / Dropdown Management</h1>
</div>

<nav class="action-buttons" aria-label="Dropdown categories">
    {% for category in categories %}
    <a class="btn btn-sm {% if selected_category == category.category %}active{% endif %}"
       href="{{ url_for('settings.dropdowns', category=category.category) }}">
        {{ category.category.replace('_', ' ').title() }}
    </a>
    {% endfor %}
</nav>

<div class="grid-2">
    <div class="panel">
        <h3>Add Dropdown Value</h3>

        <form method="post" action="{{ url_for('settings.create_dropdown') }}" class="form-grid">
            <div class="form-group">
                <label>Category</label>
                <input name="category" value="{{ selected_category }}" list="dropdown-categories" required>
                <datalist id="dropdown-categories">
                    {% for category in categories %}<option value="{{ category.category }}">{% endfor %}
                </datalist>
            </div>
            <div class="form-group"><label>Label</label><input name="label" required></div>
            <div class="form-group"><label>Value</label><input name="value" required></div>
            <div class="form-group"><label>Sort Order</label><input name="sort_order" type="number" value="0"></div>
            <div class="form-group">
                <label>Status</label>
                <select name="status">
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
            <div class="form-actions full-width"><button class="btn" type="submit">Save</button></div>
        </form>
    </div>

    <div class="panel">
        <h3>{{ selected_category.replace('_', ' ').title() if selected_category else 'Values' }}</h3>

        <form method="post" action="{{ url_for('settings.save_dropdowns') }}">
        <input type="hidden" name="selected_category" value="{{ selected_category }}">
        <div class="table-wrap">
            <table class="modern-table">
                <thead><tr><th>Category</th><th>Label</th><th>Value</th><th>Order</th><th>Status</th><th>Actions</th></tr></thead>
                <tbody>
                    {% for r in rows %}
                    <tr>
                        <td>{{ r.category.replace('_', ' ').title() }}<input type="hidden" name="item_ids" value="{{ r.id }}"></td>
                        <td><input name="label_{{ r.id }}" value="{{ r.label }}" required></td>
                        <td><input name="value_{{ r.id }}" value="{{ r.value }}" required></td>
                        <td><input name="sort_order_{{ r.id }}" type="number" value="{{ r.sort_order }}"></td>
                        <td>
                            <select name="status_{{ r.id }}">
                                <option value="active" {% if r.status == 'active' %}selected{% endif %}>Active</option>
                                <option value="inactive" {% if r.status == 'inactive' %}selected{% endif %}>Inactive</option>
                            </select>
                        </td>
                        <td>
                            <button class="btn btn-sm danger" type="submit" form="dd-del-{{ r.id }}">Delete</button>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" style="text-align:center;">No dropdown values configured.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if rows %}<div class="form-actions"><button class="btn" type="submit">Save {{ selected_category.replace('_', ' ').title() }}</button></div>{% endif %}
        </form>

        {% for r in rows %}
        <form id="dd-del-{{ r.id }}" method="post" action="{{ url_for('settings.delete_dropdown', item_id=r.id) }}"
              onsubmit="return confirm('Delete this dropdown value?')"></form>
        {% endfor %}
    </div>
</div>

{% endblock %}