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

{% block content %}
<div style="max-width: 800px; margin: 0 auto;">
    <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
        <h2 style="margin-top: 0; color: var(--text-color);">Add New Pack Listing</h2>
        <p style="color: var(--muted-text-color); margin-bottom: 2rem;">
            Create a listing for physical or virtual packs.
        </p>
        
        <!-- Tabs for Single vs Bulk -->
        <div style="display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border-color);">
            <button id="tab-single" class="tab-btn active" onclick="switchTab('single')" style="background: none; border: none; color: var(--text-color); padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid var(--primary-color);">Single Listing</button>
            <button id="tab-bulk" class="tab-btn" onclick="switchTab('bulk')" style="background: none; border: none; color: var(--muted-text-color); padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent;">Bulk Upload</button>
        </div>

        <!-- Single Listing Form -->
        <div id="single-form-container">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                {% for field in form %}
                <div style="margin-bottom: 1.5rem;">
                    <label for="{{ field.id_for_label }}" style="display: block; color: var(--muted-text-color); font-size: 0.875rem; margin-bottom: 0.5rem;">
                        {{ field.label }}
                    </label>
                    
                    {{ field }}
                    
                    {% if field.help_text %}
                    <div style="color: var(--muted-text-color); font-size: 0.75rem; margin-top: 0.5rem;">{{ field.help_text }}</div>
                    {% endif %}
                    {% if field.errors %}
                    <div style="color: var(--danger-color); font-size: 0.875rem; margin-top: 0.25rem;">
                        {{ field.errors.as_text }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                
                <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem;">
                    <a href="{% url 'store:manage_listings' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color); text-decoration: none;">Cancel</a>
                    <button type="submit" class="btn">Create Listing</button>
                </div>
            </form>
        </div>

        <!-- Bulk Upload Form -->
        <div id="bulk-form-container" style="display: none;">
            <div style="margin-bottom: 2rem; padding: 1rem; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 0.5rem;">
                <h3 style="margin-top: 0; color: var(--text-color); font-size: 1.1rem;">Instructions</h3>
                <ol style="color: var(--muted-text-color); margin-left: 1.5rem; margin-bottom: 0;">
                    <li>Download the <a href="{% url 'store:download_listing_template' type='pack' %}" style="color: var(--primary-color);">CSV Template</a>.</li>
                    <li>Fill out the CSV with pack details.</li>
                    <li>For images, put the filename (e.g., "bootstrap.jpg") in the CSV.</li>
                    <li>Upload the CSV and select ALL corresponding image files at once below.</li>
                </ol>
            </div>

            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="bulk_upload" value="true">
                
                {% for field in bulk_form %}
                <div style="margin-bottom: 1.5rem;">
                    <label for="{{ field.id_for_label }}" style="display: block; color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.5rem;">
                        {{ field.label }}
                    </label>
                    
                    {{ field }}
                    
                    {% if field.help_text %}
                    <div style="color: #64748b; font-size: 0.75rem; margin-top: 0.5rem;">{{ field.help_text }}</div>
                    {% endif %}
                    {% if field.errors %}
                    <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem;">
                        {{ field.errors.as_text }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                
                <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem;">
                    <a href="{% url 'store:manage_listings' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color); text-decoration: none;">Cancel</a>
                    <button type="submit" class="btn">Upload Bulk Listings</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    /* Scoped styles for form inputs in this view to match dashboard theme */
    form input[type="text"],
    form input[type="number"],
    form input[type="file"], 
    form select, 
    form textarea {
        display: block;
        width: 100%;
        padding: 0.75rem;
        background: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    
    form input:focus,
    form select:focus,
    form textarea:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2); /* Soft glow */
    }
    .tab-btn:hover {
        color: var(--text-color) !important;
    }
</style>

<script>
    function switchTab(tab) {
        const singleBtn = document.getElementById('tab-single');
        const bulkBtn = document.getElementById('tab-bulk');
        const singleForm = document.getElementById('single-form-container');
        const bulkForm = document.getElementById('bulk-form-container');
        
        if (tab === 'single') {
            singleBtn.classList.add('active');
            singleBtn.style.borderBottom = "2px solid var(--primary-color)";
            singleBtn.style.color = "white";
            
            bulkBtn.classList.remove('active');
            bulkBtn.style.borderBottom = "2px solid transparent";
            bulkBtn.style.color = "#94a3b8";
            
            singleForm.style.display = "block";
            bulkForm.style.display = "none";
        } else {
            bulkBtn.classList.add('active');
            bulkBtn.style.borderBottom = "2px solid var(--primary-color)";
            bulkBtn.style.color = "white";
            
            singleBtn.classList.remove('active');
            singleBtn.style.borderBottom = "2px solid transparent";
            singleBtn.style.color = "#94a3b8";
            
            bulkForm.style.display = "block";
            singleForm.style.display = "none";
        }
    }
</script>
{% endblock %}