@page
@model Admin.Pages.Donation.List.IndexModel
@using SharedKernel.Extensions
@{
    ViewData["Title"] = "후원 내역";
}

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

    <partial name="_StatusMessage" />

    <div class="row g-2 mb-2">
        <div class="col-12 col-lg-auto">
            <div class="row g-2">
                <div class="col-auto col-md-auto">
                    <select id="search" class="form-select">
                        <option value="">검색 조건</option>
                        <option value="1" selected="@(Model.Query.Search == 1)">후원자 ID</option>
                        <option value="2" selected="@(Model.Query.Search == 2)">후원자 SID</option>
                        <option value="3" selected="@(Model.Query.Search == 3)">후원자 이름</option>
                        <option value="4" selected="@(Model.Query.Search == 4)">피후원자 ID</option>
                        <option value="5" selected="@(Model.Query.Search == 5)">피후원자 SID</option>
                        <option value="6" selected="@(Model.Query.Search == 6)">피후원자 이름</option>
                        <option value="7" selected="@(Model.Query.Search == 7)">보낸 이름</option>
                    </select>
                </div>
                <div class="col col-md-auto">
                    <input type="search" id="keyword" class="form-control" maxlength="100" value="@Model.Query.Keyword" />
                </div>
            </div>
        </div>
        <div class="col-12 col-sm">
            <div class="row g-2">
                <div class="col-12 col-md-auto">
                    <div class="row row-cols-2 g-2">
                        <div class="col">
                            <input type="datetime-local" name="startAt" id="startAt" class="form-control" value="@Model.Query.StartAt" />
                        </div>
                        <div class="col d-none">~</div>
                        <div class="col">
                            <input type="datetime-local" name="endAt" id="endAt" class="form-control" value="@Model.Query.EndAt" />
                        </div>
                    </div>
                </div>
                <div class="col col-md-auto text-center">
                    <button type="submit" id="btnSearch" class="btn btn-primary w-100">검색</button>
                </div>
            </div>
        </div>
    </div>

    <hr />

    <div class="row g-2 align-items-end">
        <div class="col">
            Total : @Model.Total.ToString("N0")
        </div>
        <div class="col text-end">
            <select id="perPage" class="form-select w-auto d-inline-block" form="fAdminList">
                <option value="10" selected="@(Model.Query.PerPage == 10)">10</option>
                <option value="20" selected="@(Model.Query.PerPage == 20)">20</option>
                <option value="50" selected="@(Model.Query.PerPage == 50)">50</option>
                <option value="100" selected="@(Model.Query.PerPage == 100)">100</option>
            </select>
            <button type="submit" id="btnListDelete" class="btn btn-danger" form="fAdminList" formaction="?handler=Delete" formmethod="post" disabled>삭제</button>
            <button type="button" id="btnExport" class="btn btn-outline-success">엑셀 다운로드</button>
        </div>
    </div>

    <form name="f_admin_list" id="fAdminList" method="post" accept-charset="utf-8" autocomplete="off">
        @Html.AntiForgeryToken()
    </form>

    <div class="table-responsive">
        <table class="table table-bordered table-hover mt-3">
            <colgroup>
                <col style="width: 5%;" />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
            </colgroup>
            <thead>
                <tr>
                    <th>
                        <div class="form-check">
                            <input type="checkbox" id="checkedAll" class="form-check-input" value="1" form="fAdminList" />
                            <label for="checkedAll" class="form-check-label">ID</label>
                        </div>
                    </th>
                    <th>후원 금액</th>
                    <th>보낸 이름</th>
                    <th>후원자</th>
                    <th>후원자 잔고</th>
                    <th>피후원자</th>
                    <th>피후원자 잔고</th>
                    <th>전달 내용</th>
                    <th>등록 일시</th>
                </tr>
            </thead>
            <tbody>
                @if (Model.List == null || Model.List.Count <= 0)
                {
                    <tr>
                        <td colspan="9">No Data.</td>
                    </tr>
                }
                else
                {
                    @foreach (var row in Model.List)
                    {
                        <tr>
                            <td>
                                <div class="form-check">
                                    <input type="checkbox" name="ids" id="chk_@row.ID" class="form-check-input list-check-box" value="@row.ID" form="fAdminList" />
                                    <label for="chk_@row.ID" class="form-check-label">@row.ID</label>
                                </div>
                            </td>
                            <td>@row.Amount.ToString("N0")</td>
                            <td>@row.SendName</td>
                            <td>[@row.Sponsor.ID] @row.Sponsor.Email, @(row.Sponsor.Name ?? "-")</td>
                            <td>@row.SponsorBalance.ToString("N0")</td>
                            <td>[@row.Receiver.ID] @row.Receiver.Email, @(row.Receiver.Name ?? "-")</td>
                            <td>@row.ReceiverDonationBalance.ToString("N0")</td>
                            <td>
                                @if (!string.IsNullOrEmpty(row.Message))
                                {
                                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#messageModal_@row.ID">
                                        보기
                                    </button>

                                    <div class="modal fade" id="messageModal_@row.ID" tabindex="-1" aria-labelledby="messageModalLabel_@row.ID" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-5" id="messageModalLabel_@row.ID">전달 내용</h1>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">@row.Message</div>
                                                <div class="modal-footer justify-content-center">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                                else
                                {
                                    <text>-</text>
                                }
                            </td>
                            <td>@row.CreatedAt.GetDateAt()</td>
                        </tr>
                    }
                }
            </tbody>
        </table>

        <partial name="_Pagination" model="Model.Pagination" />
    </div>
</div>

@section Scripts {
    <script src="~/lib/xlsx/xlsx.full.min.js"></script>
    <script>
        $(document).on("click", "#btnExport", async function () {
            try {
                const qs = location.search || "";
                const res = await fetch(`/Donation/List?handler=ExportData${qs ? "&" + qs.substring(1) : ""}`, { credentials: "same-origin" });
                if (!res.ok) throw new Error("데이터 조회 실패");

                const { rows } = await res.json();
                if (!rows || rows.length === 0) {
                    alert("내보낼 데이터가 없습니다.");
                    return;
                }

                const headers = ["ID", "후원금액", "보낸이름", "후원자", "후원자잔고", "피후원자", "피후원자잔고", "전달내용", "등록일시KST"];
                const rowsForSheet = rows.map(r => headers.map(h => r[h]));
                const data = [headers, ...rowsForSheet];

                const ws = XLSX.utils.aoa_to_sheet(data);
                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, "후원내역");

                const kstNow = new Date(Date.now() + 9 * 60 * 60 * 1000).toISOString().replace("T", " ").slice(0, 19).replaceAll(":", "");
                XLSX.writeFile(wb, `후원내역_${kstNow}.xlsx`);
            } catch (e) {
                console.error(e);
                alert("엑셀 생성 중 오류가 발생했습니다.");
            }
        });

        function updateQueryString() {
            let queryParams = new URLSearchParams();

            const search = document.getElementById("search").value;
            const keyword = document.getElementById("keyword").value;
            const startAt = document.getElementById("startAt").value;
            const endAt = document.getElementById("endAt").value;

            if (search) queryParams.set("search", search);
            if (keyword) queryParams.set("keyword", keyword);
            if (startAt) queryParams.set("startAt", startAt);
            if (endAt) queryParams.set("endAt", endAt);
            queryParams.set("perPage", document.getElementById("perPage").value);

            window.location.href = window.location.pathname + "?" + queryParams.toString();
        }

        $(document).on("change", "#perPage", function () { updateQueryString(); });

        $(document).on("click", "#btnSearch", function (e) {
            e.preventDefault();
            updateQueryString();
        });

        $(document).on("keyup", "#keyword, #startAt, #endAt", function (e) {
            if (e.which === 13 || e.key === "Enter") {
                e.preventDefault();
                updateQueryString();
            }
        });

        // 체크박스 선택에 따른 삭제 버튼 활성/비활성
        $(document).on("change", ".list-check-box, #checkedAll", function () {
            if (this.id === "checkedAll") {
                $(".list-check-box").prop("checked", this.checked);
            }
            const anyChecked = $(".list-check-box:checked").length > 0;
            $("#btnListDelete").prop("disabled", !anyChecked);
        });
    </script>
}