@page "{id:int}"
@model Admin.Pages.Store.Game.EditModel
@{
    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">
        <input type="hidden" asp-for="Input.ID" />
        <input type="hidden" asp-for="QueryString" />

        <div class="row mb-2">
            <label asp-for="Input.Code" 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.Code" class="form-control" maxlength="6" placeholder="예) LOL, BG3 (6자 이내)" />
                    </div>
                </div>
                <small class="form-text text-muted">외부 연동/내부 식별용 코드 (선택, UNIQUE)</small>
                <span asp-validation-for="Input.Code" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.KorName" class="col-sm-2 col-form-label"><span>*</span> 한글명</label>
            <div class="col-sm-10">
                <input asp-for="Input.KorName" class="form-control" required maxlength="255" />
                <span asp-validation-for="Input.KorName" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.EngName" class="col-sm-2 col-form-label">영문명</label>
            <div class="col-sm-10">
                <input asp-for="Input.EngName" class="form-control" maxlength="255" />
                <span asp-validation-for="Input.EngName" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Publisher" class="col-sm-2 col-form-label"><span>*</span> 게임사</label>
            <div class="col-sm-10">
                <input asp-for="Input.Publisher" class="form-control" required maxlength="100" />
                <span asp-validation-for="Input.Publisher" 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">
                @if (!string.IsNullOrEmpty(Model.CurrentThumbnail))
                {
                    <div class="mb-2">
                        <img src="@Model.CurrentThumbnail" alt="" class="img-thumbnail" style="max-height:100px;" />
                    </div>
                    <div class="form-check">
                        <input asp-for="Input.RemoveThumbnail" class="form-check-input" />
                        <label asp-for="Input.RemoveThumbnail" class="form-check-label">현재 작은 이미지 삭제</label>
                    </div>
                }
                else
                {
                    <span class="text-muted">없음</span>
                }
            </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/*" />
                <small class="form-text text-muted">목록 카드/썸네일에 표시되는 작은 이미지 (권장 1:1)</small>
                <span asp-validation-for="Input.ThumbnailFile" 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">
                @if (!string.IsNullOrEmpty(Model.CurrentBigImage))
                {
                    <div class="mb-2">
                        <img src="@Model.CurrentBigImage" alt="" class="img-thumbnail" style="max-height:200px;" />
                    </div>
                    <div class="form-check">
                        <input asp-for="Input.RemoveBigImage" class="form-check-input" />
                        <label asp-for="Input.RemoveBigImage" class="form-check-label">현재 큰 이미지 삭제</label>
                    </div>
                }
                else
                {
                    <span class="text-muted">없음</span>
                }
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.BigImageFile" class="col-sm-2 col-form-label">새 큰 이미지</label>
            <div class="col-sm-10">
                <div id="bigPrev" hidden><img class="img-fluid img-thumbnail" alt="큰 이미지 미리보기" /></div>
                <input asp-for="Input.BigImageFile" type="file" class="form-control" accept="image/*" />
                <small class="form-text text-muted">상품 상세 페이지 배너/상점 메인 배너에 표시되는 큰 이미지 (권장 16:9)</small>
                <span asp-validation-for="Input.BigImageFile" 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="gameDescription"></textarea>
                <span asp-validation-for="Input.Description" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Link" class="col-sm-2 col-form-label">게임 사이트 주소</label>
            <div class="col-sm-10">
                <input asp-for="Input.Link" class="form-control" type="url" maxlength="255" placeholder="예) https://lol.inven.co.kr (255자 이내)" />
                <span asp-validation-for="Input.Link" class="text-danger"></span>
            </div>
        </div>

        <hr />
        <h5>게임 상세 정보</h5>

        <div class="row mb-2">
            <label asp-for="Input.TrailerUrl" class="col-sm-2 col-form-label">YouTube 예고편 URL</label>
            <div class="col-sm-10">
                <input asp-for="Input.TrailerUrl" class="form-control" type="url" maxlength="500" placeholder="예) https://www.youtube.com/watch?v=XXXXXXXX" />
                <small class="form-text text-muted">게임 상세 페이지 좌측 상단에 예고편으로 임베드됩니다.</small>
                <span asp-validation-for="Input.TrailerUrl" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.ReleaseDate" 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.ReleaseDate" class="form-control" type="date" />
                    </div>
                </div>
                <span asp-validation-for="Input.ReleaseDate" 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">
                @if (Model.GenreOptions.Count == 0)
                {
                    <span class="text-muted">등록된 장르가 없습니다.</span>
                }
                else
                {
                    foreach (var g in Model.GenreOptions)
                    {
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="Input.GenreIDs" value="@g.ID" id="genre_@g.ID" @(Model.Input.GenreIDs.Contains(g.ID) ? "checked" : null) />
                            <label class="form-check-label" for="genre_@g.ID">@g.KorName</label>
                        </div>
                    }
                }
            </div>
        </div>
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">카테고리</label>
            <div class="col-sm-10 align-content-center">
                @if (Model.CategoryOptions.Count == 0)
                {
                    <span class="text-muted">등록된 카테고리가 없습니다.</span>
                }
                else
                {
                    foreach (var c in Model.CategoryOptions)
                    {
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="Input.CategoryIDs" value="@c.ID" id="category_@c.ID" @(Model.Input.CategoryIDs.Contains(c.ID) ? "checked" : null) />
                            <label class="form-check-label" for="category_@c.ID">@c.KorName</label>
                        </div>
                    }
                }
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.MinSpec" class="col-sm-2 col-form-label">최소 사양</label>
            <div class="col-sm-10">
                <textarea asp-for="Input.MinSpec" class="form-control" rows="3" placeholder="예) OS: Windows 10 / CPU: i5 / RAM: 8GB / GPU: GTX 1060"></textarea>
                <span asp-validation-for="Input.MinSpec" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.RecommendedSpec" class="col-sm-2 col-form-label">권장 사양</label>
            <div class="col-sm-10">
                <textarea asp-for="Input.RecommendedSpec" class="form-control" rows="3" placeholder="예) OS: Windows 11 / CPU: i7 / RAM: 16GB / GPU: RTX 3060"></textarea>
                <span asp-validation-for="Input.RecommendedSpec" 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">
                @if (Model.LanguageOptions.Count == 0)
                {
                    <span class="text-muted">등록된 언어가 없습니다. (상점 &gt; 게임 언어에서 추가)</span>
                }
                else
                {
                    var supportMap = Model.CurrentLanguages.ToDictionary(x => x.GameLanguageID);
                    <table class="table table-bordered table-sm w-auto align-middle text-center">
                        <thead>
                            <tr>
                                <th>언어</th>
                                <th>인터페이스</th>
                                <th>풀 오디오</th>
                                <th>자막</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for (var i = 0; i < Model.LanguageOptions.Count; i++)
                            {
                                var lang = Model.LanguageOptions[i];
                                supportMap.TryGetValue(lang.ID, out var sup);
                                <tr>
                                    <td class="text-start">@lang.KorName</td>
                                    <td>
                                        <input type="hidden" name="Input.Languages[@i].GameLanguageID" value="@lang.ID" />
                                        <input type="checkbox" class="form-check-input" name="Input.Languages[@i].Interface" value="true" @(sup is not null && sup.Interface ? "checked" : null) />
                                    </td>
                                    <td>
                                        <input type="checkbox" class="form-check-input" name="Input.Languages[@i].FullAudio" value="true" @(sup is not null && sup.FullAudio ? "checked" : null) />
                                    </td>
                                    <td>
                                        <input type="checkbox" class="form-check-input" name="Input.Languages[@i].Subtitles" value="true" @(sup is not null && sup.Subtitles ? "checked" : null) />
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                    <small class="form-text text-muted">체크한 항목이 게임 상세의 언어 지원 표에 표시됩니다. 셋 다 미체크면 해당 언어는 저장되지 않습니다.</small>
                }
            </div>
        </div>
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">현재 상세 이미지</label>
            <div class="col-sm-10">
                @if (Model.CurrentImages.Count == 0)
                {
                    <span class="text-muted">없음</span>
                }
                else
                {
                    <small class="form-text text-muted d-block mb-2">드래그하여 순서를 변경하세요. 삭제 체크 후 저장하면 제거됩니다.</small>
                    <div id="detailImages" class="d-flex flex-wrap gap-3">
                        @foreach (var img in Model.CurrentImages)
                        {
                            <div class="detail-img text-center border rounded p-2" data-id="@img.ID" style="cursor:move;">
                                <input type="hidden" class="img-order" name="Input.ImageOrder" value="@img.ID" />
                                <img src="@img.Url" alt="" class="img-thumbnail d-block" style="max-height:100px;" />
                                <div class="form-check form-check-inline mt-1">
                                    <input class="form-check-input img-remove" type="checkbox" name="Input.RemoveImageIDs" value="@img.ID" id="rmimg_@img.ID" />
                                    <label class="form-check-label" for="rmimg_@img.ID">삭제</label>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.DetailImages" class="col-sm-2 col-form-label">새 상세 이미지</label>
            <div class="col-sm-10">
                <input asp-for="Input.DetailImages" type="file" class="form-control" accept="image/*" multiple />
                <small class="form-text text-muted">추가할 스크린샷 (여러 장 선택 가능). 기존 이미지는 위에서 삭제 체크 후 저장하면 제거됩니다.</small>
                <span asp-validation-for="Input.DetailImages" class="text-danger"></span>
            </div>
        </div>

        <hr />

        <div class="row mb-2">
            <label asp-for="Input.CommissionRate" 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.CommissionRate" id="commissionRate" class="form-control" type="number" step="any" min="0" max="100" required />
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>
                <small class="form-text text-muted">소수점 7자리까지 입력 가능 (예: 0.0636364)</small>
                <span asp-validation-for="Input.CommissionRate" 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>

        <hr />

        <div class="d-grid gap-2 text-center d-md-block">
            <button type="submit" class="btn btn-success">수정</button>
            <a href="/Store/Game@(Model.QueryString)" class="btn btn-secondary">취소</a>
        </div>
        <br />
    </form>
</div>

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

        (function () {
            const container = document.getElementById("detailImages");
            if (!container) {
                return;
            }

            let dragEl = null;

            container.querySelectorAll(".detail-img").forEach(function (el) {
                el.setAttribute("draggable", "true");
                el.addEventListener("dragstart", function () { dragEl = el; el.classList.add("opacity-50"); });
                el.addEventListener("dragend", function () { el.classList.remove("opacity-50"); dragEl = null; });
            });

            container.addEventListener("dragover", function (e) {
                e.preventDefault();
                if (!dragEl) {
                    return;
                }
                const after = getDragAfter(container, e.clientX);
                if (after == null) {
                    container.appendChild(dragEl);
                } else {
                    container.insertBefore(dragEl, after);
                }
            });

            function getDragAfter(box, x) {
                const els = [...box.querySelectorAll(".detail-img:not(.opacity-50)")];
                return els.reduce(function (closest, child) {
                    const rect = child.getBoundingClientRect();
                    const offset = x - rect.left - rect.width / 2;
                    if (offset < 0 && offset > closest.offset) {
                        return { offset: offset, element: child };
                    }
                    return closest;
                }, { offset: Number.NEGATIVE_INFINITY }).element;
            }

            container.querySelectorAll(".img-remove").forEach(function (cb) {
                cb.addEventListener("change", function () {
                    const item = cb.closest(".detail-img");
                    const order = item.querySelector(".img-order");
                    order.disabled = cb.checked;
                    item.style.opacity = cb.checked ? "0.4" : "1";
                });
            });
        })();
    </script>
}