@model LittleShop.DTOs.CreateProductVariationDto

@{
    ViewData["Title"] = "Create 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">Create Variation</li>
            </ol>
        </nav>
        <h1><i class="fas fa-plus"></i> Create Product Variation</h1>
        <p class="text-muted">Add a new 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()
                    <input type="hidden" asp-for="ProductId" value="@product?.Id" />

                    <div class="mb-3">
                        <label for="Name" class="form-label">Name</label>
                        <input name="Name" id="Name" value="@Model?.Name" class="form-control @(ViewData.ModelState["Name"]?.Errors.Count > 0 ? "is-invalid" : "")" placeholder="e.g., Single Item, Twin Pack, Triple Pack" required />
                        @if(ViewData.ModelState["Name"]?.Errors.Count > 0)
                        {
                            <div class="invalid-feedback">
                                @ViewData.ModelState["Name"]?.Errors.FirstOrDefault()?.ErrorMessage
                            </div>
                        }
                        <div class="form-text">A descriptive name for this variation</div>
                    </div>

                    <div class="mb-3">
                        <label for="Description" class="form-label">Description</label>
                        <textarea name="Description" id="Description" class="form-control @(ViewData.ModelState["Description"]?.Errors.Count > 0 ? "is-invalid" : "")" rows="2" placeholder="e.g., Best value for 3 items">@Model?.Description</textarea>
                        @if(ViewData.ModelState["Description"]?.Errors.Count > 0)
                        {
                            <div class="invalid-feedback">
                                @ViewData.ModelState["Description"]?.Errors.FirstOrDefault()?.ErrorMessage
                            </div>
                        }
                        <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 for="Quantity" class="form-label">Quantity</label>
                                <input name="Quantity" id="Quantity" value="@Model?.Quantity" type="number" class="form-control @(ViewData.ModelState["Quantity"]?.Errors.Count > 0 ? "is-invalid" : "")" min="1" placeholder="3" required />
                                @if(ViewData.ModelState["Quantity"]?.Errors.Count > 0)
                                {
                                    <div class="invalid-feedback">
                                        @ViewData.ModelState["Quantity"]?.Errors.FirstOrDefault()?.ErrorMessage
                                    </div>
                                }
                                <div class="form-text">
                                    Number of items in this variation
                                    @{
                                        var existingQuantities = ViewData["ExistingQuantities"] as List<int>;
                                    }
                                    @if (existingQuantities?.Any() == true)
                                    {
                                        <br><small class="text-muted">Already used: @string.Join(", ", existingQuantities)</small>
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="Price" class="form-label">Price (£)</label>
                                <input name="Price" id="Price" value="@Model?.Price" type="number" step="0.01" class="form-control @(ViewData.ModelState["Price"]?.Errors.Count > 0 ? "is-invalid" : "")" min="0.01" placeholder="25.00" required />
                                @if(ViewData.ModelState["Price"]?.Errors.Count > 0)
                                {
                                    <div class="invalid-feedback">
                                        @ViewData.ModelState["Price"]?.Errors.FirstOrDefault()?.ErrorMessage
                                    </div>
                                }
                                <div class="form-text">Total price for this quantity</div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="SortOrder" class="form-label">Sort Order</label>
                        <input name="SortOrder" id="SortOrder" value="@(Model?.SortOrder ?? 0)" type="number" class="form-control @(ViewData.ModelState["SortOrder"]?.Errors.Count > 0 ? "is-invalid" : "")" min="0" placeholder="0" />
                        @if(ViewData.ModelState["SortOrder"]?.Errors.Count > 0)
                        {
                            <div class="invalid-feedback">
                                @ViewData.ModelState["SortOrder"]?.Errors.FirstOrDefault()?.ErrorMessage
                            </div>
                        }
                        <div class="form-text">Order in which this variation appears (0 = first)</div>
                    </div>

                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Create 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 Example</h6>
            </div>
            <div class="card-body">
                <p class="text-muted">If you set:</p>
                <ul class="text-muted">
                    <li>Quantity: 3</li>
                    <li>Price: £25.00</li>
                </ul>
                <p class="text-muted">Then price per unit = £8.33 (vs £@product?.Price base price)</p>
            </div>
        </div>
    </div>
</div>