{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card bg-dark text-white border-secondary shadow">
                <div class="card-header border-secondary bg-black bg-opacity-50">
                    <h3 class="mb-0 text-center">{{ title }}</h3>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" id="itemForm">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label class="form-label text-muted small fw-bold">NAME</label>
                            {{ form.name }}
                            {% if form.name.errors %}
                                <div class="text-danger small">{{ form.name.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-muted small fw-bold">MAIN CATEGORY</label>
                                {{ form.main_category }}
                                {% if form.main_category.errors %}
                                    <div class="text-danger small">{{ form.main_category.errors }}</div>
                                {% endif %}
                                <div class="mt-2">
                                    {{ form.new_main_category }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted small fw-bold">SUBCATEGORY</label>
                                {{ form.category }}
                                {% if form.category.errors %}
                                    <div class="text-danger small">{{ form.category.errors }}</div>
                                {% endif %}
                                <div class="mt-2">
                                    {{ form.new_subcategory }}
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label text-muted small fw-bold">SEASON</label>
                            {{ form.season }}
                        </div>

                        <div class="mb-4">
                            <label class="form-label text-muted small fw-bold">IMAGE</label>
                            {{ form.image }}
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-check2-circle"></i> Save Item
                            </button>
                            <a href="{% if type == 'wardrobe' %}{% url 'wardrobe_list' %}{% else %}{% url 'accessory_list' %}{% endif %}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('id_main_category').addEventListener('change', function() {
        var parentId = this.value;
        var subcategorySelect = document.getElementById('id_subcategory');
        
        // Clear existing options
        subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
        
        if (parentId) {
            fetch(`/ajax/get-subcategories/?parent_id=${parentId}`)
                .then(response => response.json())
                .then(data => {
                    data.forEach(function(sub) {
                        var option = document.createElement('option');
                        option.value = sub.id;
                        option.text = sub.name;
                        subcategorySelect.appendChild(option);
                    });
                });
        }
    });
</script>
{% endblock %}