<%@ Page Title="E-Commerce Product Images" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">E-Commerce Product Images - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">E-Commerce Product Images</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<style>
    .product-form { max-width: 480px; }
    .product-images {
        display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px;
    }
    .product-img {
        width: 100px; height: 100px; border-radius: 8px; overflow: hidden;
        border: 2px solid #e2e8f0; position: relative; cursor: pointer;
    }
    .product-img img { width: 100%; height: 100%; object-fit: cover; }
    .product-img.primary { border-color: #3b82f6; }
    .product-img .badge-primary {
        position: absolute; top: 4px; left: 4px; font-size: 0.6rem;
        background: #3b82f6; color: #fff; padding: 2px 6px; border-radius: 4px;
    }
</style>

<div class="demo-card">
    <div class="demo-card-header">E-Commerce Product Images</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Upload product images for an e-commerce listing. Supports multiple images
            with a primary image selector. Uses Web Forms controls for product fields.
        </p>

        <div class="product-form">
            <div class="mb-3">
                <label class="form-label">Product Name</label>
                <asp:TextBox ID="txtProductName" runat="server" CssClass="form-control" placeholder="Wireless Headphones" />
            </div>
            <div class="mb-3">
                <label class="form-label">Product Images (click to set primary)</label>
                <au:AjaxFileUpload ID="Uploader1" runat="server"
                    AllowMultiple="true"
                    AutoUpload="true"
                    AllowedExtensions="jpg,jpeg,png,webp"
                    ShowProgress="true"
                    OnClientFileSelected="onProductImageSelect" />
                <div class="product-images" id="productImages"></div>
            </div>
            <div class="mb-3">
                <label class="form-label">Price</label>
                <asp:TextBox ID="txtPrice" runat="server" CssClass="form-control" placeholder="$49.99" />
            </div>
            <div class="mb-3">
                <label class="form-label">Category</label>
                <asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-select">
                    <asp:ListItem Text="Electronics" Value="electronics" />
                    <asp:ListItem Text="Clothing" Value="clothing" />
                    <asp:ListItem Text="Home & Garden" Value="home" />
                </asp:DropDownList>
            </div>
        </div>

        <div class="code-panel">
            <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
    AllowMultiple="true"
    AutoUpload="true"
    AllowedExtensions="jpg,jpeg,png,webp"
    ShowProgress="true"
    OnClientFileSelected="onProductImageSelect" /&gt;

&lt;asp:TextBox ID="txtPrice" runat="server" CssClass="form-control" /&gt;
&lt;asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-select"&gt;
    &lt;asp:ListItem Text="Electronics" Value="electronics" /&gt;
&lt;/asp:DropDownList&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    function onProductImageSelect(file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var div = document.createElement('div');
            div.className = 'product-img';
            div.innerHTML = '<img src="' + e.target.result + '" alt="Product">';
            div.addEventListener('click', function () {
                document.querySelectorAll('.product-img').forEach(function (p) {
                    p.classList.remove('primary');
                    var b = p.querySelector('.badge-primary');
                    if (b) b.remove();
                });
                div.classList.add('primary');
                div.innerHTML += '<span class="badge-primary">Primary</span>';
            });
            var container = document.getElementById('productImages');
            if (!container.children.length) {
                div.classList.add('primary');
                div.innerHTML += '<span class="badge-primary">Primary</span>';
            }
            container.appendChild(div);
        };
        reader.readAsDataURL(file);
    }
</script>
</asp:Content>
