{% extends "admin/base.html" %}

{% block title %}Categories{% endblock %}

{% block extra_css %}
<style>
    .add-btn-container {
        margin-bottom: 15px;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .modal-content {
        background: white;
        margin: 10% auto;
        padding: 30px;
        border-radius: 10px;
        width: 90%;
        max-width: 500px;
    }

    .modal-header {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 2px solid #e0e0e0;
        border-radius: 5px;
    }

    .close {
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }
</style>
{% endblock %}

{% block content %}
<h1 style="margin: 30px 0 20px 0;">Categories & Subcategories</h1>

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}" style="padding: 12px 20px; border-radius: 5px; margin-bottom: 20px;">
    {{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}

<div class="card">
    <div class="card-header">
        <i class="fas fa-folder"></i> Categories ({{ categories|length }})
    </div>
    <div class="add-btn-container" style="padding: 15px;">
        <button onclick="showAddCategoryModal()" class="btn btn-sm btn-primary">
            <i class="fas fa-plus"></i> Add Category
        </button>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Slug</th>
                <th>Subcategories</th>
                <th>Display Order</th>
            </tr>
        </thead>
        <tbody>
            {% for category in categories %}
            <tr>
                <td><strong>{{ category.name }}</strong></td>
                <td><code>{{ category.slug }}</code></td>
                <td>{{ category.subcategory_count }}</td>
                <td>{{ category.display_order }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="card" style="margin-top: 30px;">
    <div class="card-header">
        <i class="fas fa-tags"></i> Subcategories ({{ subcategories|length }})
    </div>
    <div class="add-btn-container" style="padding: 15px;">
        <button onclick="showAddSubcategoryModal()" class="btn btn-sm btn-primary">
            <i class="fas fa-plus"></i> Add Subcategory
        </button>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Category</th>
                <th>Slug</th>
                <th>Products</th>
                <th>Display Order</th>
            </tr>
        </thead>
        <tbody>
            {% for subcategory in subcategories %}
            <tr>
                <td><strong>{{ subcategory.name }}</strong></td>
                <td>{{ subcategory.category_name }}</td>
                <td><code>{{ subcategory.slug }}</code></td>
                <td>{{ subcategory.product_count }}</td>
                <td>{{ subcategory.display_order }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Add Category Modal -->
<div id="addCategoryModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('addCategoryModal')">&times;</span>
        <div class="modal-header">Add New Category</div>
        <form method="POST" action="{{ url_for('add_category') }}">
            <div class="form-group">
                <label>Category Name *</label>
                <input type="text" name="name" required>
            </div>
            <div class="form-group">
                <label>Display Order</label>
                <input type="number" name="display_order" value="0">
            </div>
            <button type="submit" class="btn btn-primary">Add Category</button>
        </form>
    </div>
</div>

<!-- Add Subcategory Modal -->
<div id="addSubcategoryModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('addSubcategoryModal')">&times;</span>
        <div class="modal-header">Add New Subcategory</div>
        <form method="POST" action="{{ url_for('add_subcategory') }}">
            <div class="form-group">
                <label>Category *</label>
                <select name="category_id" required>
                    <option value="">Select Category</option>
                    {% for category in all_categories %}
                    <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Subcategory Name *</label>
                <input type="text" name="name" required>
            </div>
            <div class="form-group">
                <label>Description</label>
                <textarea name="description" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label>Display Order</label>
                <input type="number" name="display_order" value="0">
            </div>
            <button type="submit" class="btn btn-primary">Add Subcategory</button>
        </form>
    </div>
</div>

<style>
    .alert-success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .alert-error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
</style>

<script>
    function showAddCategoryModal() {
        document.getElementById('addCategoryModal').style.display = 'block';
    }

    function showAddSubcategoryModal() {
        document.getElementById('addSubcategoryModal').style.display = 'block';
    }

    function closeModal(modalId) {
        document.getElementById(modalId).style.display = 'none';
    }

    // Close modal when clicking outside
    window.onclick = function (event) {
        if (event.target.classList.contains('modal')) {
            event.target.style.display = 'none';
        }
    }
</script>
{% endblock %}