{% extends 'common/base.html' %}
{% load static %}
{% block title %}Add Product{% endblock %}
{% block content %}

<style>
    label {
        font-weight: bold;
    }
</style>

<div class="container-fluid" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-2">
        <h1 class="h3 mb-0 text-gray-800 mt-2">
            Add Product
            <span style="margin-left:30px;float:right">
                <a href="{% url 'product_list' %}" class="btn btn-info">Product List</a>
            </span>
        </h1>
    </div>


    <form method="POST" action="" enctype="multipart/form-data">{% csrf_token %}
        <div class="row">
            <div class="col-lg-9">
                <div class="card shadow">
                    <div class="card-body">


                        <!-- Product Basic Info -->
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label>Name (Bangla)</label>
                                <input type="text" name="name_bangla" class="form-control">
                            </div>
                            <div class="form-group col-md-6">
                                <label>Name (English)</label>
                                <input type="text" name="name_english" class="form-control">
                            </div>
                        </div>

                        <div class="row">

                            <div class="form-group col-md-3">
                                <label>Unit Price</label>
                                <input type="number" name="unit_price" class="form-control">
                            </div>
                            <div class="form-group col-md-3">
                                <label>Discount (%)</label>
                                <input type="number" name="discount" class="form-control">
                            </div>

                            <div class="form-group col-md-3">
                                <label>Quantity</label>
                                <input type="number" name="quantity" class="form-control">
                            </div>
                            <div class="form-group col-md-3">
                                <label>Stock Status</label>
                                <select name="stock_status" class="form-control">
                                    <option value="1">Available</option>
                                    <option value="2">Out of Stock</option>
                                    <option value="3">Discontinue</option>
                                </select>
                            </div>

                        </div>

                        <div class="form-group">
                            <label>Full Detail</label>
                            <textarea name="full_detail" class="form-control" rows="5"></textarea>
                        </div>


                        <hr>
                        <h5 class="mb-3">SEO Information</h5>

                        <div class="row">
                            <div class="form-group col-md-12">
                                <label>Meta Title</label>
                                <input type="text" name="seo_meta_title" class="form-control">
                            </div>
                            <div class="form-group col-md-12">
                                <label>Meta Description</label>
                                <textarea name="seo_meta_description" class="form-control" rows="4"></textarea>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-12">
                                <label>Focus Keyword</label>
                                <textarea name="seo_focus_keyword" class="form-control" rows="4"></textarea>
                            </div>
                        </div>





                    </div>
                </div>

            </div>
            <div class="col-lg-3">
                <div class="card shadow">
                    <div class="card-body">
                        <div class="form-group">
                            <label>Product Image</label>
                            <!-- Preview Box -->
                            <div class="mb-2">
                                <img id="product_preview"
                                    src="https://lh3.googleusercontent.com/proxy/IuNS_wQN4UhMdsmuKXfX2HsnnGdNTQom7vr5mzLaF5gCAYRvE2botuL0krMA-vvWyPevVyehcnfF-B9juKcCFkSJIVZvwQdVwhqvrN9qrzaiIbLidz7Itxr9UYIo"
                                    alt="Product Preview"
                                    style="width:100%; height:200px; object-fit:contain; border:1px solid #ccc;padding: 8px;">
                            </div>
                            <input type="file" name="product_image" class="form-control" accept=".jpg,.png,.webp"
                                onchange="previewProductImage(event)">
                        </div>

                        <div class="form-group">
                            <label>Product Others Image</label>
                            <!-- Multiple Images Preview Box -->
                            <div id="others_preview" class="mb-2"
                                style="display:flex; gap:5px; flex-wrap:wrap;border: 1px solid #ccc;padding:5px;min-height: 50px;">
                            </div>
                            <input type="file" name="product_others_image" class="form-control" multiple
                                accept=".jpg,.png,.webp" onchange="previewOthersImages(event)">
                        </div>

                        <div class="form-group">
                            <label>OG Image</label>
                            <div class="mb-2">
                                <img id="og_product_preview"
                                    src="https://lh3.googleusercontent.com/proxy/IuNS_wQN4UhMdsmuKXfX2HsnnGdNTQom7vr5mzLaF5gCAYRvE2botuL0krMA-vvWyPevVyehcnfF-B9juKcCFkSJIVZvwQdVwhqvrN9qrzaiIbLidz7Itxr9UYIo"
                                    alt="Product Preview"
                                    style="width:100%; height:200px; object-fit:contain; border:1px solid #ccc;padding: 8px;">
                            </div>
                            <input type="file" name="seo_og_image" class="form-control" accept=".jpg,.png,.webp"
                                onchange="og_previewProductImage(event)">
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary mt-3">Save Product</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <br>
</div>


<script>
    // Single Product Image Preview
    function previewProductImage(event) {
        var output = document.getElementById('product_preview');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function () {
            URL.revokeObjectURL(output.src) // free memory
        }
    }

</script>

<script>
    // Single Product Image Preview
    function og_previewProductImage(event) {
        var output = document.getElementById('og_product_preview');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function () {
            URL.revokeObjectURL(output.src) // free memory
        }
    }

</script>

<script>
    var othersFiles = []; // store selected files

    function previewOthersImages(event) {
        var files = event.target.files;

        // Append new files to the array
        for (var i = 0; i < files.length; i++) {
            othersFiles.push(files[i]);
        }

        renderOthersPreviews();
    }

    function renderOthersPreviews() {
        var previewContainer = document.getElementById('others_preview');
        previewContainer.innerHTML = ""; // clear previous previews

        othersFiles.forEach(function (file, index) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var wrapper = document.createElement('div');
                wrapper.style.position = 'relative';
                wrapper.style.display = 'inline-block';

                // Preview image
                var img = document.createElement('img');
                img.src = e.target.result;
                img.style.width = '77px';
                img.style.height = '77px';
                img.style.objectFit = 'cover';
                img.style.border = '1px solid #ccc';
                img.style.padding = '2px';
                wrapper.appendChild(img);

                // Delete button
                var delBtn = document.createElement('span');
                delBtn.innerHTML = '&times;';
                delBtn.style.position = 'absolute';
                delBtn.style.top = '0';
                delBtn.style.right = '0';
                delBtn.style.background = 'red';
                delBtn.style.color = 'white';
                delBtn.style.width = '20px';
                delBtn.style.height = '20px';
                delBtn.style.textAlign = 'center';
                delBtn.style.lineHeight = '20px';
                delBtn.style.cursor = 'pointer';
                delBtn.style.borderRadius = '50%';
                delBtn.onclick = function () {
                    removeOthersFile(index);
                }
                wrapper.appendChild(delBtn);

                previewContainer.appendChild(wrapper);
            }
            reader.readAsDataURL(file);
        });

        // Update the input files using DataTransfer (for form submission)
        updateInputFiles();
    }

    function removeOthersFile(index) {
        othersFiles.splice(index, 1);
        renderOthersPreviews();
    }

    function updateInputFiles() {
        var dataTransfer = new DataTransfer();
        othersFiles.forEach(function (file) {
            dataTransfer.items.add(file);
        });
        document.querySelector('input[name="product_others_image"]').files = dataTransfer.files;
    }
</script>

{% endblock %}