@page
@model Admin.Pages.Store.Product.WriteModel
@using Domain.Entities.Store.ValueObject
@{
    ViewData["Title"] = "상품 등록";
}

<div class="container">
    <h3>@ViewData["Title"]</h3>
    <hr />

    <partial name="_StatusMessage" />

    <form name="f_admin_write" id="fAdminWrite" method="post" accept-charset="utf-8" autocomplete="off" enctype="multipart/form-data">
        <div class="row mb-2">
            <label asp-for="Input.GameID" class="col-sm-2 col-form-label"><span>*</span> 게임</label>
            <div class="col-sm-10">
                <select asp-for="Input.GameID" asp-items="Model.Games" class="form-select" required>
                    <option value="">게임을 선택하세요</option>
                </select>
                <span asp-validation-for="Input.GameID" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Name" class="col-sm-2 col-form-label"><span>*</span> 상품명</label>
            <div class="col-sm-10">
                <input asp-for="Input.Name" class="form-control" required maxlength="200" placeholder="200자 이내" />
                <span asp-validation-for="Input.Name" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Type" class="col-sm-2 col-form-label"><span>*</span> 상품 유형</label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input asp-for="Input.Type" type="radio" id="typePhysical" class="form-check-input" value="@ProductType.Physical" />
                    <label class="form-check-label" for="typePhysical">실물 (배송 필요)</label>
                </div>
                <div class="form-check-inline">
                    <input asp-for="Input.Type" type="radio" id="typeDigital" class="form-check-input" value="@ProductType.Digital" />
                    <label class="form-check-label" for="typeDigital">쿠폰 (보관함 발급)</label>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.ThumbnailFile" class="col-sm-2 col-form-label">상품 사진</label>
            <div class="col-sm-10">
                <div id="thumbPrev" hidden><img class="img-fluid img-thumbnail" alt="상품 사진 미리보기" /></div>
                <input asp-for="Input.ThumbnailFile" type="file" class="form-control" accept="image/*" />
                <span asp-validation-for="Input.ThumbnailFile" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Description" class="col-sm-2 col-form-label">설명</label>
            <div class="col-sm-10">
                <textarea asp-for="Input.Description" class="form-control ck-editor" id="productDescription"></textarea>
                <span asp-validation-for="Input.Description" class="text-danger"></span>
            </div>
        </div>

        <hr />

        <div class="row mb-2">
            <label asp-for="Input.Price" class="col-sm-2 col-form-label"><span>*</span> 정가</label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col col-md-auto">
                        <div class="input-group">
                            <input asp-for="Input.Price" class="form-control" type="number" min="0" required id="inputPrice" />
                            <span class="input-group-text">P</span>
                        </div>
                    </div>
                </div>
                <span asp-validation-for="Input.Price" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">할인</label>
            <div class="col-sm-10 align-content-center">
                <div class="d-flex flex-wrap align-items-center gap-2">
                    <div class="form-check-inline">
                        <input asp-for="Input.DiscountType" type="radio" id="discountNone" class="form-check-input" value="@DiscountType.None" />
                        <label class="form-check-label" for="discountNone">없음</label>
                    </div>
                    <div class="form-check-inline">
                        <input asp-for="Input.DiscountType" type="radio" id="discountPercent" class="form-check-input" value="@DiscountType.Percent" />
                        <label class="form-check-label" for="discountPercent">할인율(%)</label>
                    </div>
                    <div class="form-check-inline">
                        <input asp-for="Input.DiscountType" type="radio" id="discountAmount" class="form-check-input" value="@DiscountType.Amount" />
                        <label class="form-check-label" for="discountAmount">할인 금액(P)</label>
                    </div>
                    <div class="input-group" style="max-width:220px">
                        <input asp-for="Input.DiscountValue" class="form-control" type="number" min="0" id="inputDiscountValue" />
                        <span class="input-group-text" id="discountUnit">-</span>
                    </div>
                </div>
                <div class="form-text">
                    판매가: <strong id="salePricePreview" class="text-danger">-</strong>
                </div>
                <span asp-validation-for="Input.DiscountValue" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Stock" class="col-sm-2 col-form-label">재고</label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col col-md-auto">
                        <input asp-for="Input.Stock" class="form-control" type="number" min="-1" />
                    </div>
                </div>
                <small class="form-text text-muted">-1 = 무제한</small>
                <span asp-validation-for="Input.Stock" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.MinPurchase" class="col-sm-2 col-form-label">최소 구매 수량</label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col col-md-auto">
                        <div class="input-group">
                            <input asp-for="Input.MinPurchase" class="form-control" type="number" min="1" max="999" />
                            <span class="input-group-text">개</span>
                        </div>
                    </div>
                </div>
                <small class="form-text text-muted">1회 주문 시 최소 구매 수량 (기본 1)</small>
                <span asp-validation-for="Input.MinPurchase" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.MaxPurchase" class="col-sm-2 col-form-label">최대 구매 수량</label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col col-md-auto">
                        <div class="input-group">
                            <input asp-for="Input.MaxPurchase" class="form-control" type="number" min="1" max="999" />
                            <span class="input-group-text">개</span>
                        </div>
                    </div>
                </div>
                <small class="form-text text-muted">1회 주문 시 최대 구매 수량 (1 ~ 999)</small>
                <span asp-validation-for="Input.MaxPurchase" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.SaleStartAt" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <input asp-for="Input.SaleStartAt" class="form-control w-auto" type="datetime-local" />
                <span asp-validation-for="Input.SaleStartAt" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.SaleEndAt" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <input asp-for="Input.SaleEndAt" class="form-control w-auto" type="datetime-local" />
                <span asp-validation-for="Input.SaleEndAt" class="text-danger"></span>
            </div>
        </div>

        <hr />

        <div class="row mb-2">
            <label asp-for="Input.Order" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col col-md-auto">
                        <input asp-for="Input.Order" class="form-control" type="number" min="0" max="9999" />
                    </div>
                </div>
                <span asp-validation-for="Input.Order" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.IsActive" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input asp-for="Input.IsActive" class="form-check-input" />
                    <label class="form-check-label" for="Input_IsActive">활성으로 표시합니다.</label>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.RequireDonationChannel" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input asp-for="Input.RequireDonationChannel" class="form-check-input" />
                    <label class="form-check-label" for="Input_RequireDonationChannel">구매 시 후원 채널 선택을 필수로 합니다. (미선택 시 선택안함 불가)</label>
                </div>
            </div>
        </div>

        <hr />

        <div class="d-grid gap-2 text-center d-md-block">
            <button type="submit" class="btn btn-success">등록</button>
            <a href="/Store/Product" class="btn btn-secondary">취소</a>
        </div>
        <br />
    </form>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <partial name="_Editor" />
    <script>
        setupImagePreview("Input_ThumbnailFile", "thumbPrev");

        (function() {
            const priceEl = document.getElementById('inputPrice');
            const valEl = document.getElementById('inputDiscountValue');
            const unitEl = document.getElementById('discountUnit');
            const previewEl = document.getElementById('salePricePreview');
            const noneEl = document.getElementById('discountNone');
            const percentEl = document.getElementById('discountPercent');
            const amountEl = document.getElementById('discountAmount');

            function fmt(n) { return Math.max(0, Math.floor(n)).toLocaleString('ko-KR'); }

            function update() {
                const price = parseInt(priceEl.value || '0', 10) || 0;
                const val = parseInt(valEl.value || '0', 10) || 0;
                let mode = 'none';

                if (percentEl.checked) {
                    mode = 'percent';
                }
                else if (amountEl.checked) {
                    mode = 'amount';
                }

                if (mode === 'percent') {
                    unitEl.textContent = '%';
                    valEl.disabled = false;
                    const sale = Math.max(0, price - Math.floor(price * val / 100));
                    previewEl.textContent = fmt(sale) + ' P  (정가 ' + fmt(price) + ' P, -' + val + '%)';
                }
                else if (mode === 'amount') {
                    unitEl.textContent = 'P';
                    valEl.disabled = false;
                    const sale = Math.max(0, price - val);
                    previewEl.textContent = fmt(sale) + ' P  (정가 ' + fmt(price) + ' P, -' + fmt(val) + ' P)';
                }
                else {
                    unitEl.textContent = '-';
                    valEl.disabled = true;
                    previewEl.textContent = fmt(price) + ' P';
                }
            }

            [priceEl, valEl, noneEl, percentEl, amountEl].forEach(el => {
                el.addEventListener('input', update);
                el.addEventListener('change', update);
            });

            update();
        })();
    </script>
}