@include("admin.dash.layout.header")
<div class="nk-content ">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="components-preview wide-md mx-auto">
                    <div class="nk-block nk-block-lg">
                        <div class="nk-block-head">
                            <div class="nk-block-head-content">
                                <h4 class="nk-block-title">Products</h4>
                                <div class="nk-block-des">
                                    <p>Here, you can see all the <code class="code-class">products</code> available on sitzee.</p>
                                </div>
                            </div>
                        </div>

                        <a href="javascript:;" onclick="$('#new_product').modal('show')" class="btn btn-primary" style="float:right"><em class="icon ni ni-plus"></em><span>Add Product</span></a>

                        <table class="datatable-init-export nowrap nk-tb-list is-separate" data-auto-responsive="false" data-order="5">
                            <thead>
                                <tr class="nk-tb-item nk-tb-head">
                                    <th class="nk-tb-col tb-col-sm"><span>Image</span></th> 
                                    <th class="nk-tb-col tb-col-sm"><span>Quantity</span></th> 
                                    <th class="nk-tb-col tb-col-sm"><span>Uploaded By</span></th> 
                                    <th class="nk-tb-col tb-col-sm"><span>Price</span></th> 
                                    <th class="nk-tb-col tb-col-sm"><span>Rating</span></th>

                                    <th class="nk-tb-col"><span>Date</span></th>
                                    <th class="nk-tb-col nk-tb-col-tools">
                                        <ul class="nk-tb-actions gx-1 my-n1"></ul>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($data as $d)
                                <tr class="nk-tb-item">
                                    <td class="nk-tb-col tb-col-sm">
                                        <span class="tb-product"> 
                                            <img src="{{$d->image}}" alt="{{$d->title}}" class="thumb">
                                            <span class="title">{{$d->title}}</span>
                                        </span>
                                    </td>
                                    <td class="nk-tb-col tb-col-md">
                                        <span class="tb-sub">{{$d->qty}}</span>
                                    </td>
                                    <td class="nk-tb-col tb-col-md">
                                       @if($d->name)
                                        <img src="{{$d->user_image}}" class="rounded-circle" width="30" height="30" alt="{{$d->name}}">
                                        <span class="tb-sub">{{$d->name}}</span>
                                        @else
                                        <span class="tb-sub">Admin</span>
                                        @endif
                                    </td>
                                    <td class="nk-tb-col tb-col-md">
                                        <span class="tb-sub">{{$d->price}}</span>
                                    </td>
                                    <td class="nk-tb-col tb-col-md">
    @php
        $rating = isset($d->rating) ? $d->rating : ['average' => 0, 'count' => 0];
    @endphp
    @if($rating['count'] > 0)
        <div class="d-flex align-items-center">
            <div class="rating-stars me-2">
                @for($i = 1; $i <= 5; $i++)
                    @if($i <= floor($rating['average']))
                        <i class="icon ni ni-star-fill text-warning"></i>
                    @elseif($i <= $rating['average'])
                        <i class="icon ni ni-star-half text-warning"></i>
                    @else
                        <i class="icon ni ni-star text-muted"></i>
                    @endif
                @endfor
            </div>
            <small class="text-muted">{{ number_format($rating['average'], 1) }} ({{ $rating['count'] }})</small>
        </div>
    @else
        <span class="text-muted">No ratings</span>
    @endif
</td>
                                    <td class="nk-tb-col tb-col-md">
                                        <span class="tb-sub">{{$d->created_at}}</span>
                                    </td>
                                    <td class="nk-tb-col nk-tb-col-tools">
                                        <ul class="nk-tb-actions gx-1 my-n1">
                                            <li class="me-n1">
                                                <div class="dropdown">
                                                    <a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <ul class="link-list-opt no-bdr"> 
 <li><a href="javascript:;" onclick="edit_item('{{$d->id}}')"><em class="icon ni ni-pen"></em><span>Edit Product</span></a></li>

                                                        <li><a href="javascript:;" onclick="delete_item(`{{$d->id}}`)"><em class="icon ni ni-trash"></em><span>Remove Product</span></a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include("admin.dash.layout.footer")

<!-- Add Product Modal -->
<div class="modal fade" role="dialog" id="new_product">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-md">
                <form id="new_product_form" enctype="multipart/form-data">
                    <h5 class="title">New Product</h5>
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Product Title *</label>
                                <input type="text" name="title" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category *</label>
                                <select name="category" class="form-control" required>
                                    <option value="">Select Category</option>
                                    @foreach(DB::table("category")->get() as $cat)
                                    <option value="{{$cat->id}}">{{$cat->title}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label>Description *</label>
                                <textarea name="description" class="form-control" rows="3" required></textarea>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Quantity *</label>
                                <input type="number" name="qty" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Base Price *</label>
                                <input type="number" name="price" class="form-control" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Size *</label>
                                <select name="size" class="form-control" required>
                                    <option value="">Select Size</option>
                                    <option value="XS">XS</option>
                                    <option value="S">S</option>
                                    <option value="M">M</option>
                                    <option value="L">L</option>
                                    <option value="XL">XL</option>
                                    <option value="XXL">XXL</option>
                                    <option value="XXXL">XXXL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Main Image *</label>
                                <input type="file" name="image" class="form-control" accept="image/*" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Back Image (Optional)</label>
                                <input type="file" name="backimage" class="form-control" accept="image/*">
                            </div>
                        </div>
                    </div>

                    <h6 class="mt-4 mb-3">Product Variants</h6>
                    <div id="variants-container">
                        <div class="variant-item border p-3 mb-3 rounded">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Color *</label>
                                        <input type="text" name="variants[0][color]" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Size *</label>
                                        <select name="variants[0][size]" class="form-control" required>
                                            <option value="">Select Size</option>
                                            <option value="XS">XS</option>
                                            <option value="S">S</option>
                                            <option value="M">M</option>
                                            <option value="L">L</option>
                                            <option value="XL">XL</option>
                                            <option value="XXL">XXL</option>
                                            <option value="XXXL">XXXL</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Price *</label>
                                        <input type="number" name="variants[0][price]" class="form-control" step="0.01" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Image *</label>
                                        <input type="file" name="variants[0][image]" class="form-control" accept="image/*" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Back Image (Optional)</label>
                                        <input type="file" name="variants[0][backimage]" class="form-control" accept="image/*">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="btn btn-outline-primary mb-3" onclick="addVariant()">
                        <em class="icon ni ni-plus"></em> Add Variant
                    </button>

                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Save Product</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
 
<!-- Edit Product Modal -->
<div class="modal fade" role="dialog" id="edit_modal">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-md">
                <form id="edit_product_form" enctype="multipart/form-data">
                    <h5 class="title">Edit Product</h5>
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Product Title *</label>
                                <input type="text" name="etitle" id="etitle" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category *</label>
                                <select name="ecategory" id="ecategory" class="form-control" required>
                                    <option value="">Select Category</option>
                                    @foreach(DB::table("category")->get() as $cat)
                                    <option value="{{$cat->id}}">{{$cat->title}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label>Description *</label>
                                <textarea name="edescription" id="edescription" class="form-control" rows="3" required></textarea>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Quantity *</label>
                                <input type="number" name="eqty" id="eqty" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Base Price *</label>
                                <input type="number" name="eprice" id="eprice" class="form-control" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Size *</label>
                                <select name="esize" id="esize" class="form-control" required>
                                    <option value="">Select Size</option>
                                    <option value="XS">XS</option>
                                    <option value="S">S</option>
                                    <option value="M">M</option>
                                    <option value="L">L</option>
                                    <option value="XL">XL</option>
                                    <option value="XXL">XXL</option>
                                    <option value="XXXL">XXXL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Main Image (Leave empty to keep current)</label>
                                <input type="file" name="eimage" class="form-control" accept="image/*">
                                <small class="text-muted">Current: <span id="current_image"></span></small>
                                <img src="" id="current_image_preview" class="img-thumbnail mt-2" style="max-width: 200px; display: none;">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Back Image (Leave empty to keep current)</label>
                                <input type="file" name="ebackimage" class="form-control" accept="image/*">
                                <small class="text-muted">Current: <span id="current_backimage"></span></small>
                                <img src="" id="current_backimage_preview" class="img-thumbnail mt-2" style="max-width: 200px; display: none;">
                            </div>
                        </div>
                    </div>

                    <h6 class="mt-4 mb-3">Product Variants</h6>
                    <div id="edit-variants-container">
                        <!-- Existing variants will be loaded here -->
                    </div>
                    
                    <button type="button" class="btn btn-outline-primary mb-3" onclick="addEditVariant()">
                        <em class="icon ni ni-plus"></em> Add Variant
                    </button>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Update Product</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="product_id">

<script>
let variantCount = 1;

function addVariant() {
    const container = document.getElementById('variants-container');
    const variantHtml = `
        <div class="variant-item border p-3 mb-3 rounded">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6>Variant ${variantCount + 1}</h6>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeVariant(this)">
                    <em class="icon ni ni-trash"></em>
                </button>
            </div>
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Color *</label>
                        <input type="text" name="variants[${variantCount}][color]" class="form-control" required>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Size *</label>
                        <select name="variants[${variantCount}][size]" class="form-control" required>
                            <option value="">Select Size</option>
                            <option value="XS">XS</option>
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                            <option value="XXL">XXL</option>
                            <option value="XXXL">XXXL</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Price *</label>
                        <input type="number" name="variants[${variantCount}][price]" class="form-control" step="0.01" required>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Image *</label>
                        <input type="file" name="variants[${variantCount}][image]" class="form-control" accept="image/*" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Back Image (Optional)</label>
                        <input type="file" name="variants[${variantCount}][backimage]" class="form-control" accept="image/*">
                    </div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', variantHtml);
    variantCount++;
}

function removeVariant(button) {
    if (document.querySelectorAll('.variant-item').length > 1) {
        button.closest('.variant-item').remove();
    }
}

$(document).ready(function() {
    $('#new_product_form').submit(function(e) {
        e.preventDefault();
        
        var formData = new FormData(this);
        $("button").attr("disabled", true);
        formData.append("_token", "{{csrf_token()}}");
        
        $.ajax({
            type: 'POST',
            url: '/admin/store_products',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                $('#new_product').modal('hide');
                Swal.fire("", response.message, "success");
                // location.reload();
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
                Swal.fire("Error", "Something went wrong", "error");
            },
            complete: function() {
                $("button").attr("disabled", false);
            }
        });
    });

    $('#edit_product_form').submit(function(e) {
        e.preventDefault();
        
        var formData = new FormData(this);
        $("button").attr("disabled", true);
        formData.append("_token", "{{csrf_token()}}");
        formData.append("id", $("#product_id").val());
        
        $.ajax({
            type: 'POST',
            url: '/admin/update_products',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                $('#edit_modal').modal('hide');
                Swal.fire("", response.message, "success");
                location.reload();
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
                Swal.fire("Error", "Something went wrong", "error");
            },
            complete: function() {
                $("button").attr("disabled", false);
            }
        });
    });
});

function delete_item(id) {
    if (confirm("Are you sure?")) {
        $("button").attr("disabled", true);
        $.ajax({
            type: "POST",
            url: "/admin/delete_products",
            data: {
                id: id,
                "_token": "{{csrf_token()}}"
            },
            success: function(response) {
                location.reload();
                $("button").attr("disabled", false);
                Swal.fire("", response.message, "success");
            },
            error: function() {
                alert("An error occurred while submitting the form.");
                $("button").attr("disabled", false);
            }
        });
    }
}

let editVariantCount = 0;

function addEditVariant() {
    const container = document.getElementById('edit-variants-container');
    const variantHtml = `
        <div class="variant-item border p-3 mb-3 rounded new-variant">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6>New Variant ${editVariantCount + 1}</h6>
                <div>
                    <button type="button" class="btn btn-sm btn-success me-2" onclick="saveNewVariant(this, ${$("#product_id").val()})">
                        <em class="icon ni ni-check"></em> Save
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeEditVariant(this)">
                        <em class="icon ni ni-trash"></em>
                    </button>
                </div>
            </div>
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Color *</label>
                        <input type="text" name="new_variants[${editVariantCount}][color]" class="form-control" required>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Size *</label>
                        <select name="new_variants[${editVariantCount}][size]" class="form-control" required>
                            <option value="">Select Size</option>
                            <option value="XS">XS</option>
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                            <option value="XXL">XXL</option>
                            <option value="XXXL">XXXL</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Price *</label>
                        <input type="number" name="new_variants[${editVariantCount}][price]" class="form-control" step="0.01" required>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Image *</label>
                        <input type="file" name="new_variants[${editVariantCount}][image]" class="form-control" accept="image/*" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Back Image (Optional)</label>
                        <input type="file" name="new_variants[${editVariantCount}][backimage]" class="form-control" accept="image/*">
                    </div>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', variantHtml);
    editVariantCount++;
}

function saveNewVariant(button, productId) {
    const variantItem = button.closest('.variant-item');
    const formData = new FormData();
    
    // Get all inputs within this variant
    const inputs = variantItem.querySelectorAll('input, select');
    inputs.forEach(input => {
        if (input.type === 'file') {
            if (input.files[0]) {
                formData.append(input.name, input.files[0]);
            }
        } else {
            formData.append(input.name, input.value);
        }
    });
    
    formData.append('product_id', productId);
    formData.append('_token', "{{csrf_token()}}");
    
    // Disable the save button
    button.setAttribute('disabled', true);
    
    $.ajax({
        type: 'POST',
        url: '/admin/save_new_variant',
        data: formData,
        contentType: false,
        processData: false,
        success: function(response) {
            Swal.fire("", response.message, "success");
            // Remove the new variant class and update button text
            variantItem.classList.remove('new-variant');
            button.outerHTML = `
                <button type="button" class="btn btn-sm btn-primary me-2" onclick="updateExistingVariant(this, ${response.variant_id})">
                    <em class="icon ni ni-edit"></em> Update
                </button>
            `;
            // Add hidden variant ID for future updates
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'variants[' + response.variant_id + '][id]';
            hiddenInput.value = response.variant_id;
            variantItem.appendChild(hiddenInput);
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
            Swal.fire("Error", "Something went wrong", "error");
        },
        complete: function() {
            button.removeAttribute('disabled');
        }
    });
}

function updateExistingVariant(button, variantId) {
    const variantItem = button.closest('.variant-item');
    const formData = new FormData();
    
    // Get all inputs within this variant
    const inputs = variantItem.querySelectorAll('input, select');
    inputs.forEach(input => {
        if (input.type === 'file') {
            if (input.files[0]) {
                formData.append(input.name, input.files[0]);
            }
        } else {
            formData.append(input.name, input.value);
        }
    });
    
    formData.append('variant_id', variantId);
    formData.append('_token', "{{csrf_token()}}");
    
    // Disable the update button
    button.setAttribute('disabled', true);
    
    $.ajax({
        type: 'POST',
        url: '/admin/update_variant',
        data: formData,
        contentType: false,
        processData: false,
        success: function(response) {
            Swal.fire("", response.message, "success");
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
            Swal.fire("Error", "Something went wrong", "error");
        },
        complete: function() {
            button.removeAttribute('disabled');
        }
    });
}

function removeEditVariant(button) {
    button.closest('.variant-item').remove();
}

function removeEditVariant2(button, id) {
    if (confirm("Are you sure you want to remove this variant?")) {
        // Optionally, you can also send an AJAX request to delete the variant from the database
        $.ajax({
            type: 'POST',
            url: '/admin/delete_variant',
            data: {
                id: id,
                "_token": "{{csrf_token()}}"
            },
            success: function(response) {
                Swal.fire("", response.message, "success");
                button.closest('.variant-item').remove();
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
                Swal.fire("Error", "Something went wrong", "error");
            }
        });
    }
}

function edit_item(id) {
    $.ajax({
        type: 'GET',
        url: `/admin/get_product/${id}`,
        success: function(response) {
            const product = response.product;
            
            $("#edit_modal").modal("show");
            $("#etitle").val(product.title);
            $("#edescription").val(product.description);
            $("#eqty").val(product.qty);
            $("#ecategory").val(product.category);
            $("#eprice").val(product.price);
            $("#esize").val(product.size);
            $("#current_image").text(product.image ? 'Image uploaded' : 'No image');
            $("#current_backimage").text(product.backimage ? 'Image uploaded' : 'No image');
            $("#current_image_preview").attr("src", product.image).toggle(!!product.image);
            $("#current_backimage_preview").attr("src", product.backimage).toggle(!!product.backimage);
            $("#product_id").val(id);
            
            // Reset variant counter
            editVariantCount = 0;
            
            // Load existing variants
            const container = document.getElementById('edit-variants-container');
            container.innerHTML = '';

            response.variants.forEach((variant, index) => {
                var sizes = JSON.parse(variant.sizes);
                sizes = sizes.join(",") 

                const variantHtml = `
                    <div class="variant-item border p-3 mb-3 rounded">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6>Existing Variant ${index + 1}</h6>
                            <div>
                                <button type="button" class="btn btn-sm btn-primary me-2" onclick="updateExistingVariant(this, ${variant.id})">
                                    <em class="icon ni ni-edit"></em> Update
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeEditVariant2(this,${variant.id})">
                                    <em class="icon ni ni-trash"></em>
                                </button>
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Color *</label>
                                    <input type="text" name="variants[${variant.id}][color]" class="form-control" value="${variant.color}" required>
                                    <input type="hidden" name="variants[${variant.id}][id]" value="${variant.id}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Size *</label>
                                    <select name="variants[${variant.id}][size]" class="form-control" id="variant-size-${variant.id}" required>
                                        <option value="">Select Size</option>
                                        <option value="XS" ${sizes === 'XS' ? 'selected' : ''}>XS</option>
                                        <option value="S" ${sizes === 'S' ? 'selected' : ''}>S</option>
                                        <option value="M" ${sizes === 'M' ? 'selected' : ''}>M</option>
                                        <option value="L" ${sizes === 'L' ? 'selected' : ''}>L</option>
                                        <option value="XL" ${sizes === 'XL' ? 'selected' : ''}>XL</option>
                                        <option value="XXL" ${sizes === 'XXL' ? 'selected' : ''}>XXL</option>
                                        <option value="XXXL" ${sizes === 'XXXL' ? 'selected' : ''}>XXXL</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Price *</label>
                                    <input type="number" name="variants[${variant.id}][price]" class="form-control" step="0.01" value="${variant.price}" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Image (Leave empty to keep current)</label>
                                    <input type="file" name="variants[${variant.id}][image]" class="form-control" accept="image/*">
                                    <small class="text-muted">Current: ${variant.image ? 'Image uploaded' : 'No image'}</small>
                                    <img src="${variant.image}" class="img-thumbnail mt-2" style="max-width: 200px; display: ${variant.image ? 'block' : 'none'};">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Back Image (Leave empty to keep current)</label>
                                    <input type="file" name="variants[${variant.id}][backimage]" class="form-control" accept="image/*">
                                    <small class="text-muted">Current: ${variant.backimage ? 'Image uploaded' : 'No image'}</small>
                                    <img src="${variant.backimage}" class="img-thumbnail mt-2" style="max-width: 200px; display: ${variant.backimage ? 'block' : 'none'};">
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                container.insertAdjacentHTML('beforeend', variantHtml);
                editVariantCount = index + 1;
                setTimeout(()=>{
                $(`#variant-size-${variant.id}`).val(sizes);
                },200)
            });

            setTimeout(() => {
                response.variants.forEach((variant, index) => {
                    $(`select[name="variants[${variant.id}][size]"]`).val(variant.sizes);
                });
            }, 100);
        }
    });
}

</script>