@page "{id:int}"
@model Admin.Pages.Banner.List.EditModel

@{
    ViewData["Title"] = "배너 수정";
}

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

    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <partial name="_StatusMessage" />

    <form 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.PositionID" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 배너 위치</label>
            <div class="col-sm-10">
                <div class="row">
                    <div class="col col-md-auto">
                        <select asp-for="Input.PositionID" class="form-select" asp-items="Model.Positions" required></select>
                    </div>
                </div>
                <span asp-validation-for="Input.PositionID" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Subject" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 배너 명</label>
            <div class="col-sm-10">
                <input asp-for="Input.Subject" class="form-control" required />
                <span asp-validation-for="Input.Subject" 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" placeholder="https://example.com" />
                <span asp-validation-for="Input.Link" class="text-danger"></span>
                <div class="form-check form-check-inline mt-2">
                    <input type="radio" asp-for="Input.LinkTarget" value="_self" class="form-check-input" id="lt_self" />
                    <label class="form-check-label" for="lt_self">현재 창</label>
                </div>
                <div class="form-check form-check-inline">
                    <input type="radio" asp-for="Input.LinkTarget" value="_blank" class="form-check-input" id="lt_blank" />
                    <label class="form-check-label" for="lt_blank">새 창</label>
                </div>
                <span asp-validation-for="Input.LinkTarget" 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">
                <div class="mb-2">
                    <div class="form-text">
                        Desktop
                        @if (Model.CurrentDesktopImage != null)
                        {
                            <div id="currentDesktopWrap">
                                <br />
                                <img src="@Model.CurrentDesktopImage" class="img-thumbnail img-fluid rounded" />
                                <br />
                                <button type="button" class="btn btn-sm btn-danger mt-2" onclick="markRemove('Desktop')">이미지 삭제</button>
                            </div>
                            <div id="removeDesktopNotice" class="text-danger mt-2" hidden>
                                Desktop 이미지가 삭제됩니다. <button type="button" class="btn btn-sm btn-secondary ms-2" onclick="undoRemove('Desktop')">취소</button>
                            </div>
                            <input type="checkbox" asp-for="Input.RemoveDesktopImage" id="Input_RemoveDesktopImage" hidden />
                        }
                        else
                        {
                            <text>-</text>
                        }
                    </div>
                </div>
                <div>
                    <div class="form-text">
                        Mobile
                        @if (Model.CurrentMobileImage != null)
                        {
                            <div id="currentMobileWrap">
                                <br />
                                <img src="@Model.CurrentMobileImage" class="img-thumbnail img-fluid rounded" />
                                <br />
                                <button type="button" class="btn btn-sm btn-danger mt-2" onclick="markRemove('Mobile')">이미지 삭제</button>
                            </div>
                            <div id="removeMobileNotice" class="text-danger mt-2" hidden>
                                Mobile 이미지가 삭제됩니다. <button type="button" class="btn btn-sm btn-secondary ms-2" onclick="undoRemove('Mobile')">취소</button>
                            </div>
                            <input type="checkbox" asp-for="Input.RemoveMobileImage" id="Input_RemoveMobileImage" hidden />
                        }
                        else
                        {
                            <text>-</text>
                        }
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">이미지</label>
            <div class="col-sm-10">
                <div class="mb-3">
                    <label asp-for="Input.DesktopImageFile" class="form-label">Desktop</label>
                    <div id="DesktopBannerPrev" hidden>
                        <img class="img-fluid img-thumbnail" alt="이미지(Desktop) 미리보기" /><br />
                        <button type="button" class="btn btn-sm btn-danger mt-2 mb-2 btn-remove-preview">제거</button>
                    </div>
                    <input asp-for="Input.DesktopImageFile" type="file" class="form-control" accept="image/*" />
                    <span asp-validation-for="Input.DesktopImageFile" class="text-danger"></span>
                </div>
                <div>
                    <label asp-for="Input.MobileImageFile" class="form-label">Mobile</label>
                    <div id="MobileBannerPrev" hidden>
                        <img class="img-fluid img-thumbnail" alt="이미지(Mobile) 미리보기" /><br />
                        <button type="button" class="btn btn-sm btn-danger mt-2 mb-2 btn-remove-preview">제거</button>
                    </div>
                    <input asp-for="Input.MobileImageFile" type="file" class="form-control" accept="image/*" />
                    <span asp-validation-for="Input.MobileImageFile" class="text-danger"></span>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Order" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 순서</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="-9999" max="9999" required />
                    </div>
                </div>
                <span asp-validation-for="Input.Order" 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">
                <div class="row g-2">
                    <div class="col col-md-auto">
                        <input asp-for="Input.StartAt" class="form-control" />
                        <span asp-validation-for="Input.StartAt" class="text-danger"></span>
                    </div>
                    <div class="col-auto d-none d-md-block align-self-center">~</div>
                    <div class="col col-md-auto">
                        <input asp-for="Input.EndAt" class="form-control" />
                        <span asp-validation-for="Input.EndAt" class="text-danger"></span>
                    </div>
                </div>
                <span class="text-muted form-text">
                    노출 기간을 입력하지 않으면 항상 표시됩니다.
                </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 type="checkbox" asp-for="Input.IsActive" class="form-check-input" />
                    <label class="form-check-label" asp-for="Input.IsActive">사용함</label>
                    <span asp-validation-for="Input.IsActive" class="text-danger"></span>
                </div>
            </div>
        </div>
        <hr />
        <div class="row">
            <div class="col text-center p-3">
                <button type="submit" class="btn btn-success">저장</button>
                <a href="/Banner/List@(Model.QueryString)" class="btn btn-secondary">취소</a>
            </div>
        </div>
        <br />
    </form>
</div>
@section Scripts {
    <script>
        setupImagePreview("Input_DesktopImageFile", "DesktopBannerPrev");
        setupImagePreview("Input_MobileImageFile", "MobileBannerPrev");

        function markRemove(kind) {
            const cb = document.getElementById('Input_Remove' + kind + 'Image');
            const wrap = document.getElementById('current' + kind + 'Wrap');
            const notice = document.getElementById('remove' + kind + 'Notice');
            if (cb) { cb.checked = true; }
            if (wrap) { wrap.hidden = true; }
            if (notice) { notice.hidden = false; }
        }

        function undoRemove(kind) {
            const cb = document.getElementById('Input_Remove' + kind + 'Image');
            const wrap = document.getElementById('current' + kind + 'Wrap');
            const notice = document.getElementById('remove' + kind + 'Notice');
            if (cb) { cb.checked = false; }
            if (wrap) { wrap.hidden = false; }
            if (notice) { notice.hidden = true; }
        }
    </script>
}