{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="mb-0">{{ title }}</h3>
    <a href="{% if date_str %}{% url 'home' %}{% else %}{% url 'outfit_list' %}{% endif %}" class="btn-close btn-close-white" aria-label="Close"></a>
</div>

<form method="post" id="outfit-form">
    {% csrf_token %}
    
    {% if form.errors %}
    <div class="alert alert-danger">
        <ul class="mb-0">
            {% for field, errors in form.errors.items %}
                {% for error in errors %}
                    <li>{{ field }}: {{ error }}</li>
                {% endfor %}
            {% endfor %}
        </ul>
    </div>
    {% endif %}
    
    <div class="mb-4">
        <label class="form-label text-dim small text-uppercase">Outfit Name (Optional)</label>
        {{ form.name }}
    </div>

    <div class="mb-4">
        <label class="form-label text-dim small text-uppercase">Season (Optional)</label>
        {{ form.season }}
    </div>

    <div class="mb-4">
        <label class="form-label text-dim small text-uppercase d-flex justify-content-between">
            Select Items 
            <span class="badge bg-accent text-dark" id="item-count">0 selected</span>
        </label>
        <div class="row g-2 overflow-y-auto no-scrollbar" style="max-height: 300px;">
            {% for item in wardrobe_items %}
            <div class="col-4">
                <div class="item-card position-relative rounded overflow-hidden border border-2 border-transparent" 
                     data-id="{{ item.id }}" data-type="item" style="cursor: pointer; height: 100px;">
                    <img src="{{ item.image.url }}" class="w-100 h-100 object-fit-cover">
                    <div class="position-absolute bottom-0 start-0 end-0 p-1 bg-dark bg-opacity-75" style="font-size: 0.6rem;">
                        {{ item.name|default:"Item"|truncatechars:10 }}
                    </div>
                    <div class="check-overlay position-absolute top-0 end-0 p-1 d-none">
                        <i class="fas fa-check-circle text-primary-accent"></i>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="d-none">
            {{ form.items }}
        </div>
    </div>

    <div class="mb-4">
        <label class="form-label text-dim small text-uppercase">Select Accessories</label>
        <div class="d-flex gap-2 overflow-x-auto pb-2 no-scrollbar">
            {% for acc in accessories %}
            <div class="item-card position-relative rounded-circle overflow-hidden border border-2 border-transparent" 
                 data-id="{{ acc.id }}" data-type="accessory" style="cursor: pointer; width: 70px; height: 70px; flex-shrink: 0;">
                <img src="{{ acc.image.url }}" class="w-100 h-100 object-fit-cover">
                <div class="check-overlay position-absolute top-0 end-0 p-1 d-none">
                    <i class="fas fa-check-circle text-primary-accent"></i>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="d-none">
            {{ form.accessories }}
        </div>
    </div>

    <div class="mb-4">
        <label class="form-label text-dim small text-uppercase">Folder / Group (Optional)</label>
        {{ form.folder }}
        <div class="mt-2">
            <a class="text-accent small text-decoration-none" data-bs-toggle="collapse" href="#newFolderCollapse">
                <i class="fas fa-plus-circle me-1"></i> Add New Group
            </a>
            <div class="collapse mt-2" id="newFolderCollapse">
                {{ form.new_folder }}
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-accent w-100 py-3 fw-bold">SAVE OUTFIT</button>
</form>

{% endblock %}

{% block extra_css %}
<style>
    .item-card.selected {
        border-color: var(--primary-accent) !important;
    }
    .item-card.selected .check-overlay {
        display: block !important;
    }
    .border-transparent { border-color: transparent; }
    .text-primary-accent { color: var(--primary-accent); }
    .object-fit-cover { object-fit: cover; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const itemCards = document.querySelectorAll('.item-card');
    const itemsSelect = document.querySelector('select[name="items"]');
    const accsSelect = document.querySelector('select[name="accessories"]');
    const itemCountBadge = document.getElementById('item-count');

    function updateBadge() {
        const selectedCount = document.querySelectorAll('.item-card.selected').length;
        itemCountBadge.textContent = `${selectedCount} selected`;
    }

    itemCards.forEach(card => {
        card.addEventListener('click', function() {
            const id = this.dataset.id;
            const type = this.dataset.type;
            const isSelected = this.classList.toggle('selected');
            
            const select = (type === 'item') ? itemsSelect : accsSelect;
            
            for (let option of select.options) {
                if (option.value === id) {
                    option.selected = isSelected;
                    break;
                }
            }
            updateBadge();
        });
    });
    
    // Initial badge update if some items are selected (e.g. on form error)
    updateBadge();
});
</script>
{% endblock %}