@page
@model Admin.Pages.Store.Game.WriteModel
@{
    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.Code" 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.Code" id="gameCode" class="form-control" maxlength="6" placeholder="자동 생성" />
                            <button type="button" id="btnRegenerateCode" class="btn btn-outline-secondary" title="새 코드 재생성">
                                <i class="fa-solid fa-rotate"></i> 재생성
                            </button>
                        </div>
                    </div>
                </div>
                <small class="form-text text-muted">자동 생성된 6자 영숫자 코드 (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" placeholder="예) 리그 오브 레전드 (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" placeholder="예) League of Legends (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" placeholder="예) Riot Games Korea (100자 이내)" />
                <span asp-validation-for="Input.Publisher" class="text-danger"></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 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 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.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 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 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" 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");

        // 게임 코드 재생성
        document.getElementById("btnRegenerateCode").addEventListener("click", async function () {
            const btn = this;
            btn.disabled = true;
            try {
                const res = await fetch("?handler=GenerateCode", {
                    method: "GET",
                    headers: { "Accept": "application/json" }
                });
                if (!res.ok) {
                    throw new Error("코드 생성 실패");
                }
                const data = await res.json();
                if (data && data.code) {
                    document.getElementById("gameCode").value = data.code;
                }
            } catch (e) {
                alert("코드 재생성 중 오류가 발생했습니다.");
            } finally {
                btn.disabled = false;
            }
        });
    </script>
}