@model LittleShop.DTOs.UpdateVariantCollectionDto

@{
    ViewData["Title"] = "Edit Variant Collection";
    var collectionId = ViewData["CollectionId"];
}

<div class="row mb-4">
    <div class="col">
        <h1><i class="fas fa-edit"></i> Edit Variant Collection</h1>
    </div>
    <div class="col-auto">
        <a href="@Url.Action("Index")" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Collections
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="post" action="@Url.Action("Edit", new { id = collectionId })">
            @Html.AntiForgeryToken()

            <div asp-validation-summary="All" class="alert alert-danger" role="alert"></div>

            <div class="mb-3">
                <label for="Name" class="form-label">Collection Name</label>
                <input type="text" class="form-control" id="Name" name="Name" value="@Model.Name" maxlength="100" placeholder="e.g., Mens Clothes, Jewelry Sizes">
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>

            <div class="mb-3">
                <label for="PropertiesJson" class="form-label">Properties (JSON)</label>
                <textarea class="form-control font-monospace" id="PropertiesJson" name="PropertiesJson" rows="10" placeholder='[{"name":"Size","values":["S","M","L","XL"]},{"name":"Colour","values":null}]'>@Model.PropertiesJson</textarea>
                <div class="form-text">
                    Define properties as JSON array. Each property has a "name" and optional "values" array.
                    <br>If "values" is null, users can enter freeform text. If "values" is an array, users select from dropdown.
                    <br><strong>Example:</strong> <code>[{"name":"Size","values":["S","M","L"]},{"name":"Colour","values":null}]</code>
                </div>
                <span asp-validation-for="PropertiesJson" class="text-danger"></span>
            </div>

            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="IsActive" name="IsActive" value="true" @(Model.IsActive == true ? "checked" : "")>
                    <label class="form-check-label" for="IsActive">
                        Active
                    </label>
                </div>
                <div class="form-text">Inactive collections cannot be selected when editing products</div>
            </div>

            <div class="border-top pt-3">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Save Changes
                </button>
                <a href="@Url.Action("Index")" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}