source: KernelRecordsMVC.Web/Views/Admin/EditProduct.cshtml

@model KernelRecordsMVC.Application.ViewModels.EditProductViewModel

@{
    ViewData["Title"] = "Modify Product";
}

<div class="admin-page admin-form-page">

    <!-- HEADER -->

    <div class="admin-header">

        <div>

            <a asp-action="Products"
               class="admin-back-link">

                ← Products

            </a>

            <span class="admin-eyebrow">
                PRODUCT MANAGEMENT
            </span>

            <h1>Modify Product</h1>

            <p>
                Update inventory information or apply a discount.
            </p>

        </div>

    </div>


    <!-- PRODUCT SUMMARY -->

    <div class="admin-product-summary">

        <div>

            <span class="admin-eyebrow">
                SELECTED PRODUCT
            </span>

            <h2>
                @Model.ReleaseTitle
            </h2>

        </div>

        <div class="admin-product-summary-meta">

            <div>

                <span>FORMAT</span>

                <strong>
                    @Model.Format
                </strong>

            </div>

            <div>

                <span>CURRENT PRICE</span>

                <strong>
                    @Model.Price.ToString("C")
                </strong>

            </div>

            <div>

                <span>STOCK</span>

                <strong>
                    @Model.Stock
                </strong>

            </div>

        </div>

    </div>


    <section class="admin-form-card admin-edit-card">

        <form asp-action="EditProduct"
              method="post"
              id="productEditForm">

            @Html.AntiForgeryToken()

            <input type="hidden"
                   asp-for="ProductId" />


            <div asp-validation-summary="ModelOnly"
                 class="admin-validation">
            </div>


            <!-- =================================================
                 MODIFICATION TYPE
                 ================================================= -->

            <div class="admin-form-field">

                <label asp-for="ModificationType">
                    What do you want to do?
                </label>

                <div class="admin-modification-options">

                    <label class="admin-modification-option">

                        <input type="radio"
                               asp-for="ModificationType"
                               value="UPDATE"
                               id="updateOption" />

                        <span>

                            <strong>
                                Update Product
                            </strong>

                            <small>
                                Change price, description or stock.
                            </small>

                        </span>

                    </label>


                    <label class="admin-modification-option">

                        <input type="radio"
                               asp-for="ModificationType"
                               value="DISCOUNT"
                               id="discountOption" />

                        <span>

                            <strong>
                                Apply Discount
                            </strong>

                            <small>
                                Reduce the current selling price.
                            </small>

                        </span>

                    </label>

                </div>

                <span asp-validation-for="ModificationType"
                      class="admin-field-error">
                </span>

            </div>


            <!-- =================================================
                 UPDATE FIELDS
                 ================================================= -->

            <div id="updateFields"
                 class="admin-edit-section">

                <div class="admin-edit-section-heading">

                    <span class="admin-eyebrow">
                        PRODUCT UPDATE
                    </span>

                    <h3>Product Information</h3>

                </div>


                <div class="admin-form-row">

                    <!-- PRICE -->

                    <div class="admin-form-field">

                        <label asp-for="Price">
                            Price
                        </label>

                        <div class="admin-input-prefix">

                            <span>$</span>

                            <input asp-for="Price"
                                   type="number"
                                   min="0"
                                   step="0.01" />

                        </div>

                        <span asp-validation-for="Price"
                              class="admin-field-error">
                        </span>

                    </div>


                    <!-- STOCK -->

                    <div class="admin-form-field">

                        <label asp-for="Stock">
                            Stock
                        </label>

                        <input asp-for="Stock"
                               type="number"
                               min="0" />

                        <span asp-validation-for="Stock"
                              class="admin-field-error">
                        </span>

                    </div>

                </div>


                <div class="admin-form-field">

                    <label asp-for="ProductDescription">
                        Description
                    </label>

                    <textarea asp-for="ProductDescription"
                              rows="5"></textarea>

                    <span asp-validation-for="ProductDescription"
                          class="admin-field-error">
                    </span>

                </div>

            </div>


            <!-- =================================================
                 DISCOUNT
                 ================================================= -->

            <div id="discountFields"
                 class="admin-edit-section">

                <div class="admin-edit-section-heading">

                    <span class="admin-eyebrow">
                        PROMOTION
                    </span>

                    <h3>Apply Discount</h3>

                    <p>
                        The percentage will be deducted
                        from the product's current price.
                    </p>

                </div>


                <div class="admin-form-field">

                    <label asp-for="Discount">
                        Discount Percentage
                    </label>

                    <div class="admin-input-suffix">

                        <input asp-for="Discount"
                               type="number"
                               min="0.01"
                               max="99.99"
                               step="0.01"
                               placeholder="10" />

                        <span>%</span>

                    </div>

                    <span asp-validation-for="Discount"
                          class="admin-field-error">
                    </span>

                </div>


                <div class="admin-discount-preview">

                    <span>
                        CURRENT PRICE
                    </span>

                    <strong id="currentPrice"
                            data-price="@Model.Price">
                        @Model.Price.ToString("C")
                    </strong>


                    <span>
                        NEW PRICE
                    </span>

                    <strong id="discountedPrice">
                        —
                    </strong>

                </div>

            </div>


            <!-- ACTIONS -->

            <div class="admin-form-actions">

                <button type="submit"
                        class="admin-button primary">

                    Save Changes

                </button>

                <a asp-action="Products"
                   class="admin-button secondary">

                    Cancel

                </a>

            </div>

        </form>

    </section>

</div>


@section Scripts
{
    <partial name="_ValidationScriptsPartial" />

    <script>

        document.addEventListener("DOMContentLoaded", function ()
        {
            const updateOption =
                document.getElementById("updateOption");

            const discountOption =
                document.getElementById("discountOption");

            const updateFields =
                document.getElementById("updateFields");

            const discountFields =
                document.getElementById("discountFields");

            const discountInput =
                document.getElementById("Discount");

            const currentPriceElement =
                document.getElementById("currentPrice");

            const discountedPriceElement =
                document.getElementById("discountedPrice");


            function updateMode()
            {
                const isDiscount =
                    discountOption.checked;

                updateFields.style.display =
                    isDiscount ? "none" : "block";

                discountFields.style.display =
                    isDiscount ? "block" : "none";
            }


            function updateDiscountPreview()
            {
                const currentPrice =
                    parseFloat(
                        currentPriceElement.dataset.price);

                const discount =
                    parseFloat(discountInput.value);


                if (isNaN(discount) ||
                    discount <= 0 ||
                    discount >= 100)
                {
                    discountedPriceElement.textContent =
                        "—";

                    return;
                }


                const newPrice =
                    currentPrice *
                    (1 - discount / 100);


                discountedPriceElement.textContent =
                    "$" + newPrice.toFixed(2);
            }


            updateOption.addEventListener(
                "change",
                updateMode);

            discountOption.addEventListener(
                "change",
                updateMode);

            discountInput.addEventListener(
                "input",
                updateDiscountPreview);


            updateMode();
            updateDiscountPreview();
        });

    </script>
}