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

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow">
                <div class="card-header bg-primary text-white py-3">
                    <h4 class="mb-0"><i class="fas fa-plus-circle"></i> Add New Product</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">
                            <!-- Product Name -->
                            <div class="col-md-8">
                                <div class="form-floating">
                                    {{ form.name|add_class:"form-control" }}
                                    <label for="{{ form.name.id_for_label }}">Product Name *</label>
                                </div>
                            </div>

                            <!-- Category Dropdown -->
                            <div class="col-md-4">
                                <div class="form-floating">
                                    {{ form.category|add_class:"form-select" }}
                                    <label for="{{ form.category.id_for_label }}">Category</label>
                                </div>
                            </div>
                        </div>

                        <!-- New Category (Dynamic) -->
                        <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 for="{{ form.description.id_for_label }}">Description</label>
                            </div>
                        </div>

                        <!-- Price & Stock -->
                        <div class="row g-4 mt-3">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    {{ form.price|add_class:"form-control" }}
                                    <label for="{{ form.price.id_for_label }}">Price ($)</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    {{ form.stock|add_class:"form-control" }}
                                    <label for="{{ form.stock.id_for_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>

                        <!-- Multiple Image Upload -->
                        <div class="mt-5">
                            <label class="form-label fw-bold mb-3">Product 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; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                                        </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> Create Product
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// ====================== DYNAMIC CATEGORY ADD ======================
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) {
            // Add new option to category dropdown
            const option = new Option(data.category_name, data.category_id);
            categorySelect.add(option);
            categorySelect.value = data.category_id;
            
            // Clear input
            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.");
    });
});

// ====================== LIVE IMAGE PREVIEW + AUTO RESIZE ======================
async function resizeImageFile(file, maxWidth = 1200, maxHeight = 1200) {
    if (!file.type.startsWith('image/')) {
        return file;
    }

    const imageBitmap = await createImageBitmap(file);
    let { width, height } = imageBitmap;

    if (width <= maxWidth && height <= maxHeight) {
        return file;
    }

    const ratio = Math.min(maxWidth / width, maxHeight / height);
    const canvas = document.createElement('canvas');
    canvas.width = Math.round(width * ratio);
    canvas.height = Math.round(height * ratio);

    const ctx = canvas.getContext('2d');
    ctx.drawImage(imageBitmap, 0, 0, canvas.width, canvas.height);

    return new Promise((resolve) => {
        canvas.toBlob((blob) => {
            if (!blob) {
                resolve(file);
                return;
            }
            const resizedFile = new File([blob], file.name, {
                type: file.type,
                lastModified: Date.now(),
            });
            resolve(resizedFile);
        }, file.type, 0.85);
    });
}

document.querySelectorAll('input[type="file"]').forEach((input, index) => {
    input.addEventListener('change', async function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('preview-' + index);

        if (file && preview) {
            const resizedFile = await resizeImageFile(file, 1200, 1200);

            // Replace the selected file with the resized version for upload
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(resizedFile);
            e.target.files = dataTransfer.files;

            const reader = new FileReader();
            reader.onload = function(event) {
                preview.src = event.target.result;
                preview.style.display = 'block';
                preview.style.maxWidth = '100%';
                preview.style.height = 'auto';
            }
            reader.readAsDataURL(resizedFile);
        }
    });
});
</script>

{% endblock %}