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

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-11">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-primary text-white py-4">
                    <h4 class="mb-0">
                        <i class="fas fa-edit"></i> Update Product: {{ product.name }}
                    </h4>
                </div>
                
                <div class="card-body p-5">
                    <form method="post" enctype="multipart/form-data" id="product-form">
                        {% csrf_token %}

                        <div class="row g-4">
                            <div class="col-md-8">
                                <div class="form-floating">
                                    {{ form.name|add_class:"form-control" }}
                                    <label>Product Name *</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-floating">
                                    {{ form.category|add_class:"form-select" }}
                                    <label>Category</label>
                                </div>
                            </div>
                        </div>

                        <!-- New Category -->
                        <div class="mt-3">
                            <div class="input-group">
                                {{ form.new_category|add_class:"form-control" }}
                                <button type="button" id="add-category-btn" class="btn btn-outline-success">
                                    <i class="fas fa-plus"></i> Add Category
                                </button>
                            </div>
                            <small class="text-muted">Leave empty if using existing category</small>
                        </div>

                        <!-- Description -->
                        <div class="mt-4">
                            <div class="form-floating">
                                {{ form.description|add_class:"form-control" }}
                                <label>Description</label>
                            </div>
                        </div>

                        <!-- Price & Stock -->
                        <div class="row g-4 mt-4">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    {{ form.price|add_class:"form-control" }}
                                    <label>Price ($)</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    {{ form.stock|add_class:"form-control" }}
                                    <label>Stock Quantity</label>
                                </div>
                            </div>
                        </div>

                        <div class="row g-4 mt-3 align-items-center">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    {{ form.allow_customer_offer|add_class:"form-check-input" }}
                                    <label class="form-check-label" for="{{ form.allow_customer_offer.id_for_label }}">Allow customer offer</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    {{ form.min_offer_price|add_class:"form-control" }}
                                    <label for="{{ form.min_offer_price.id_for_label }}">Minimum Offer Price</label>
                                </div>
                            </div>
                        </div>

                        <!-- ====================== EXISTING IMAGES ====================== -->
                        <div class="mt-5">
                            <label class="form-label fw-bold mb-3">Current Images</label>
                            <div class="row g-3" id="existing-images">
                                {% for image in product.images.all %}
                                <div class="col-md-4 col-lg-3" data-image-id="{{ image.id }}">
                                    <div class="border rounded-3 p-2 text-center position-relative">
                                        <img src="{{ image.image.url }}" 
                                             class="img-fluid rounded" 
                                             style="max-height: 140px; object-fit: cover;">
                                        <div class="mt-2 small text-muted">{{ image.alt_text|default:"—" }}</div>
                                        {% if image.is_primary %}
                                        <span class="badge bg-success position-absolute top-0 start-0 m-1">Primary</span>
                                        {% endif %}
                                        <button type="button" 
                                                class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
                                                onclick="deleteImage({{ image.id }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <!-- ====================== ADD NEW IMAGES ====================== -->
                        <div class="mt-5">
                            <label class="form-label fw-bold mb-3">Add New Images (up to 5)</label>
                            <div class="row g-4" id="image-upload-container">
                                {% for image_form in image_forms %}
                                <div class="col-md-6 col-lg-4">
                                    <div class="border rounded-3 p-3 image-upload-box">
                                        <div class="form-floating mb-3">
                                            {{ image_form.image|add_class:"form-control" }}
                                            <label>Choose Image</label>
                                        </div>
                                        <div class="text-center mb-3">
                                            <img id="preview-{{ forloop.counter0 }}" 
                                                 src="#" alt="Preview"
                                                 style="max-height: 140px; max-width: 100%; border-radius: 10px; display: none;">
                                        </div>
                                        <div class="form-floating">
                                            {{ image_form.alt_text|add_class:"form-control" }}
                                            <label>Alt Text (Optional)</label>
                                        </div>
                                        <div class="form-check mt-3">
                                            {{ image_form.is_primary }}
                                            <label class="form-check-label">Set as Primary Image</label>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="d-grid mt-5">
                            <button type="submit" class="btn btn-success btn-lg py-3">
                                <i class="fas fa-save"></i> Update Product
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Live Preview for new images
document.querySelectorAll('input[type="file"]').forEach((input, index) => {
    input.addEventListener('change', function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('preview-' + index);
        if (file && preview) {
            const reader = new FileReader();
            reader.onload = function(event) {
                preview.src = event.target.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(file);
        }
    });
});

// Dynamic Category Add (same as before)
document.getElementById('add-category-btn').addEventListener('click', function() {
    const newCategoryInput = document.querySelector('input[name="new_category"]');
    const categorySelect = document.querySelector('select[name="category"]');
    const categoryName = newCategoryInput.value.trim();

    if (!categoryName) {
        alert("Please enter a category name.");
        return;
    }

    fetch("{% url 'shop:add_category_ajax' %}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({ name: categoryName })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const option = new Option(data.category_name, data.category_id);
            categorySelect.add(option);
            categorySelect.value = data.category_id;
            newCategoryInput.value = '';
            alert("Category added successfully!");
        } else {
            alert(data.error || "Failed to add category.");
        }
    })
    .catch(err => {
        console.error(err);
        alert("An error occurred while adding the category.");
    });
});

// Delete existing image
function deleteImage(imageId) {
    if (!confirm("Delete this image permanently?")) return;

    fetch(`/product/image/${imageId}/delete/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.querySelector(`[data-image-id="${imageId}"]`).remove();
        } else {
            alert(data.error || "Failed to delete image.");
        }
    })
    .catch(err => console.error(err));
}
</script>

{% endblock %}