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

{% block content %}
<div class="container-fluid mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            <div class="card shadow">
                <div class="card-header bg-primary text-white py-3">
                    <h5>{{ title }}</h5>
                </div>
                <div class="card-body p-4">

                    <form method="post" enctype="multipart/form-data" id="image-form">
                        {% csrf_token %}

                        <div id="image-fields-container">
                            <!-- Initial field -->
                            <div class="image-field mb-4 border rounded p-3" data-index="0">
                                <div class="row align-items-end">
                                    <div class="col-md-6">
                                        <input type="file" name="images" class="form-control image-input" accept="image/*">
                                        <div class="mt-2 text-center">
                                            <img class="preview-img" src="#" alt="Preview" 
                                                 style="max-height: 160px; max-width: 100%; border-radius: 10px; display: none; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <input type="text" name="alt_text" class="form-control" placeholder="Alt text (optional)">
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger btn-sm w-100 remove-field">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex gap-3 mt-4">
                            <button type="button" id="add-more-btn" class="btn btn-outline-primary">
                                <i class="fas fa-plus"></i> Add More Image
                            </button>
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-upload"></i> Upload All Images
                            </button>
                            <a href="{% url 'shop:product_image_list' product.id %}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Dynamic image upload with preview and remove
let fieldCount = 1;
const MAX_IMAGES = 10;

function addNewImageField() {
    if (fieldCount >= MAX_IMAGES) {
        alert(`Maximum ${MAX_IMAGES} images allowed.`);
        return;
    }

    fieldCount++;

    const container = document.getElementById('image-fields-container');
    
    const newField = document.createElement('div');
    newField.className = 'image-field mb-4 border rounded p-3';
    newField.innerHTML = `
        <div class="row align-items-end">
            <div class="col-md-6">
                <input type="file" name="images" class="form-control image-input" accept="image/*">
                <div class="mt-2 text-center">
                    <img class="preview-img" src="#" alt="Preview" 
                         style="max-height: 160px; max-width: 100%; border-radius: 10px; display: none; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                </div>
            </div>
            <div class="col-md-4">
                <input type="text" name="alt_text" class="form-control" placeholder="Alt text (optional)">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-danger btn-sm w-100 remove-field">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>
    `;

    container.appendChild(newField);
    attachPreviewListener(newField);
    attachRemoveListener(newField);
}

function attachPreviewListener(field) {
    const input = field.querySelector('.image-input');
    const preview = field.querySelector('.preview-img');

    input.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file && preview) {
            const reader = new FileReader();
            reader.onload = function(event) {
                preview.src = event.target.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(file);
        }
    });
}

function attachRemoveListener(field) {
    const removeBtn = field.querySelector('.remove-field');
    removeBtn.addEventListener('click', function() {
        if (document.querySelectorAll('.image-field').length > 1) {
            field.remove();
            fieldCount--;
        } else {
            alert("At least one image field must remain.");
        }
    });
}

// Initialize first field
document.addEventListener('DOMContentLoaded', function() {
    const firstField = document.querySelector('.image-field');
    if (firstField) {
        attachPreviewListener(firstField);
        attachRemoveListener(firstField);
    }

    // Add More button
    document.getElementById('add-more-btn').addEventListener('click', addNewImageField);
});
</script>

{% endblock %}