@page
@model Admin.Pages.Forum.Posts.List.WriteModel
@using Microsoft.AspNetCore.Mvc.Rendering
@{
    ViewData["Title"] = "게시글 등록";
}

<partial name="_Editor" />

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

    <partial name="_StatusMessage" />

    <form id="fPostWrite" method="post" accept-charset="utf-8" autocomplete="off" enctype="multipart/form-data">

        <!-- 게시판 -->
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label"><span class="text-danger">*</span> 게시판</label>
            <div class="col-sm-10">
                @if ((Model.BoardList?.Count ?? 0) > 0)
                {
                    <select asp-for="Input.BoardID" class="form-select w-auto" required asp-items="@Model.BoardList" id="Input_BoardID">
                        <option value="">- 선택 -</option>
                    </select>
                }
                else
                {
                    <input type="number" asp-for="Input.BoardID" class="form-control w-auto" required />
                }
            </div>
        </div>

        <!-- 말머리 -->
        <div class="row mb-2" id="prefixRow" hidden>
            <label class="col-sm-2 col-form-label" id="prefixLabel">말머리</label>
            <div class="col-sm-10">
                <select asp-for="Input.BoardPrefixID" class="form-select w-auto" id="boardPrefixSelect">
                    <option value="">- 선택 -</option>
                </select>
            </div>
        </div>

        <!-- 제목 -->
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label"><span class="text-danger">*</span> 제목</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.Subject" class="form-control" required maxlength="255" placeholder="제목을 입력하세요 (최대 255자)" />
            </div>
        </div>

        <!-- 내용 (CKEditor) -->
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">내용</label>
            <div class="col-sm-10">
                <textarea asp-for="Input.Content" class="ck-editor" id="Input_Content" rows="12" placeholder="내용을 입력하세요"></textarea>
            </div>
        </div>

        <!-- 썸네일 -->
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">대표 이미지</label>
            <div class="col-sm-10">
                <div id="thumbPrev" hidden>
                    <img class="img-fluid img-thumbnail" alt="대표 이미지 미리보기" style="max-width: 300px;" /><br />
                    <button type="button" class="btn btn-sm btn-danger mt-2 mb-2 btn-remove-preview">삭제</button>
                </div>
                <input type="file" id="Input_ThumbnailFile" asp-for="Input.ThumbnailFile" class="form-control" />
                <span class="form-text text-muted">
                    지원 확장자: <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>, <code>.gif</code>, <code>.webp</code>, <code>.bmp</code>
                </span>
            </div>
        </div>

        <!-- 첨부파일 -->
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">첨부파일</label>
            <div class="col-sm-10">
                <input type="file" asp-for="Input.Files" class="form-control" multiple />
                <span class="form-text text-muted">허용 확장자: <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>, <code>.gif</code>, <code>.webp</code>, <code>.bmp</code>, <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>, <code>.xls</code>, <code>.xlsx</code>, <code>.ppt</code>, <code>.pptx</code>, <code>.txt</code>, <code>.zip</code>, <code>.rar</code>, <code>.7z</code>, <code>.hwp</code>, <code>.hwpx</code>, <code>.csv</code></span>
            </div>
        </div>

        <!-- 태그 -->
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">태그</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.TagsInput" class="form-control" placeholder="태그를 쉼표(,)로 구분하여 입력하세요" />
                <span class="form-text text-muted">예: 비트코인, 이더리움, 블록체인</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="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" asp-for="Input.IsNotice" />
                    <label class="form-check-label" for="Input_IsNotice">공지</label>
                </div>

                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" asp-for="Input.IsSecret" />
                    <label class="form-check-label" for="Input_IsSecret">비밀</label>
                </div>

                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" asp-for="Input.IsAnonymous" />
                    <label class="form-check-label" for="Input_IsAnonymous">익명</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 class="btn btn-secondary btn-cancel" href="/Forum/Posts/List">취소</a>
        </div>
        <br />
    </form>
</div>

@section Scripts {
    <script>
        setupImagePreview("Input_ThumbnailFile", "thumbPrev");
        // 게시판 변경 시 말머리 동적 로드
        document.getElementById("Input_BoardID")?.addEventListener("change", async function () {
            const boardID = this.value;
            const prefixRow = document.getElementById("prefixRow");
            const prefixSelect = document.getElementById("boardPrefixSelect");

            prefixSelect.innerHTML = '<option value="">- 선택 -</option>';

            if (!boardID) {
                prefixRow.hidden = true;
                return;
            }

            try {
                const res = await fetch(`/Forum/Posts/List/Write?handler=Prefixes&boardID=${boardID}`);
                const data = await res.json();
                const prefixLabel = document.getElementById("prefixLabel");

                if (prefixLabel) {
                    prefixLabel.textContent = data.isQnA ? "문의 유형" : "말머리";
                }

                if (data.items.length > 0) {
                    data.items.forEach(item => {
                        const opt = document.createElement("option");
                        opt.value = item.id;
                        opt.textContent = item.name;
                        prefixSelect.appendChild(opt);
                    });
                    prefixRow.hidden = false;
                } else {
                    prefixRow.hidden = true;
                }
            } catch {
                prefixRow.hidden = true;
            }
        });

        // 취소 버튼 확인
        $(function () {
            $(".btn-cancel").on("click", function (e) {
                const s = $("input[name='Input.Subject']").val()?.trim();
                if (s) {
                    e.preventDefault();
                    if (confirm("내용이나 제목이 남아 있습니다. 글 작성을 취소하시겠습니까?")) {
                        location.href = $(this).attr("href");
                    }
                }
            });
        });
    </script>
}