@model LittleShop.DTOs.UpdateProductVariationDto

@{
    ViewData["Title"] = "Edit Product Variation";
    var product = ViewData["Product"] as LittleShop.DTOs.ProductDto;
}

<div class="row mb-4">
    <div class="col">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="@Url.Action("Index")">Products</a></li>
                <li class="breadcrumb-item"><a href="@Url.Action("Variations", new { id = product?.Id })">@product?.Name - Variations</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit Variation</li>
            </ol>
        </nav>
        <h1><i class="fas fa-edit"></i> Edit Product Variation</h1>
        <p class="text-muted">Edit the quantity-based pricing option for <strong>@product?.Name</strong></p>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Variation Details</h5>
            </div>
            <div class="card-body">
                <form method="post">
                    @Html.AntiForgeryToken()

                    <div class="mb-3">
                        <label asp-for="Name" class="form-label">Name</label>
                        <input asp-for="Name" class="form-control" placeholder="e.g., Single Item, Twin Pack, Triple Pack" />
                        <span asp-validation-for="Name" class="text-danger"></span>
                        <div class="form-text">A descriptive name for this variation</div>
                    </div>

                    <div class="mb-3">
                        <label asp-for="Description" class="form-label">Description</label>
                        <textarea asp-for="Description" class="form-control" rows="2" placeholder="e.g., Best value for 3 items"></textarea>
                        <span asp-validation-for="Description" class="text-danger"></span>
                        <div class="form-text">Optional description to help customers understand the value</div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label asp-for="Quantity" class="form-label">Quantity</label>
                                <input asp-for="Quantity" type="number" class="form-control" min="1" placeholder="3" />
                                <span asp-validation-for="Quantity" class="text-danger"></span>
                                <div class="form-text">Number of items in this variation</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label asp-for="Price" class="form-label">Price (£)</label>
                                <input asp-for="Price" type="number" step="0.01" class="form-control" min="0.01" placeholder="25.00" />
                                <span asp-validation-for="Price" class="text-danger"></span>
                                <div class="form-text">Total price for this quantity</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label asp-for="SortOrder" class="form-label">Sort Order</label>
                                <input asp-for="SortOrder" type="number" class="form-control" min="0" placeholder="0" />
                                <span asp-validation-for="SortOrder" class="text-danger"></span>
                                <div class="form-text">Order in which this variation appears (0 = first)</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input asp-for="IsActive" class="form-check-input" type="checkbox" />
                                    <label asp-for="IsActive" class="form-check-label">Active</label>
                                </div>
                                <div class="form-text">Uncheck to hide this variation from customers</div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Update Variation
                        </button>
                        <a href="@Url.Action("Variations", new { id = product?.Id })" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">Product Information</h6>
            </div>
            <div class="card-body">
                <p><strong>Product:</strong> @product?.Name</p>
                <p><strong>Base Price:</strong> £@product?.Price</p>
                <p><strong>Category:</strong> @product?.CategoryName</p>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h6 class="card-title mb-0">Pricing Calculator</h6>
            </div>
            <div class="card-body">
                <p class="text-muted">Price per unit calculation:</p>
                <p class="text-muted">Total Price ÷ Quantity = Price per Unit</p>
                <p class="text-muted">Compare with base price of £@product?.Price per item</p>
            </div>
        </div>
    </div>
</div>