Altob.NtuInvoiceGateway/Altob.NtuInvoiceGateway/Pages/Invoice.cshtml

@page
@model InvoiceModel
@{
    ViewData["Title"] = "消費者發票資訊填寫";
    Layout = "_SimpleLayout";
}

<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="alert alert-secondary text-center mb-3" role="alert">
                <h5 class="mb-0">營業人：@Model.CompanyName（統編：@Model.CompanyTaxId）</h5>
            </div>
            @* @if (!string.IsNullOrEmpty(Model.DisplayTransDateTime) || !string.IsNullOrEmpty(Model.DisplayTransAmount)) *@
            @* { *@
            <div class="card mb-3 border-info">
                <div class="card-body bg-light">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">發票日期：</label>
                            <span class="ms-2">@Model.DisplayTransDateTime</span>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">發票金額：</label>
                            <span class="ms-2">NT$ @Model.DisplayTransAmount</span>
                        </div>
                    </div>
                </div>
            </div>
            @* } *@

            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">消費者發票資訊填寫</h4>
                </div>
                <div class="card-body">
                    @if (!string.IsNullOrEmpty(Model.ErrorMessage))
                    {
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            @Model.ErrorMessage
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    }

                    @if (!string.IsNullOrEmpty(Model.SuccessMessage))
                    {
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            @Model.SuccessMessage 1111
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    }

                    <form method="post" asp-page-handler="ToEndPoint">
                        <div asp-validation-summary="All" class="text-danger mb-3"></div>

                        <!-- 隱藏欄位：系統傳入的資料 -->
                        <input type="hidden" asp-for="InvoiceData.Identifier" />
                        <input type="hidden" asp-for="InvoiceData.TransDateTime" />
                        <input type="hidden" asp-for="InvoiceData.TransAmount" />
                        <input type="hidden" asp-for="InvoiceData.DeviceID" />
                        <input type="hidden" asp-for="InvoiceData.LocationID" />
                        <input type="hidden" asp-for="InvoiceData.CarPlateNum" />
                        <input type="hidden" asp-for="InvoiceData.OrderID" />
                        <input type="hidden" asp-for="InvoiceData.TaxType" />

                        <div class="alert alert-info mb-4">
                            <strong>注意：</strong>以下三個選項至少需填寫一個
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label asp-for="InvoiceData.Email" class="form-label">消費者信箱</label>
                                <input asp-for="InvoiceData.Email" class="form-control" type="email" maxlength="64" placeholder="example@email.com" />
                                <span asp-validation-for="InvoiceData.Email" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="InvoiceData.CarrierID" class="form-label">手機條碼</label>
                                <input asp-for="InvoiceData.CarrierID" class="form-control" maxlength="8" placeholder="/ABC1234" />
                                <small class="form-text text-muted">8碼，第1碼為/，例：/ABC1234</small>
                                <span asp-validation-for="InvoiceData.CarrierID" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label asp-for="InvoiceData.BuyerIdentifier" class="form-label">購買者統編</label>
                                <input asp-for="InvoiceData.BuyerIdentifier" class="form-control" maxlength="8" placeholder="12345678" />
                                <small class="form-text text-muted">8位數字</small>
                                <span asp-validation-for="InvoiceData.BuyerIdentifier" class="text-danger"></span>
                            </div>
                            @* <div class="col-md-6">
                                <label asp-for="InvoiceData.LoveCode" class="form-label">愛心碼</label>
                                <input asp-for="InvoiceData.LoveCode" class="form-control" maxlength="7" placeholder="123456" />
                                <small class="form-text text-muted">輸入為捐贈發票</small>
                                <span asp-validation-for="InvoiceData.LoveCode" class="text-danger"></span>
                            </div> *@
                        </div>

                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-primary btn-lg">送出</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const requiredGroup = [
                document.querySelector('input[name="InvoiceData.Email"]'),
                document.querySelector('input[name="InvoiceData.CarrierID"]'),
                document.querySelector('input[name="InvoiceData.BuyerIdentifier"]')
            ];

            const form = document.querySelector('form[method="post"]');
            if (!form) {
                return;
            }

            form.addEventListener('submit', function(event) {
                const hasValue = requiredGroup.some(field => field && field.value.trim() !== '');
                if (!hasValue) {
                    event.preventDefault();
                    alert('Email、手機條碼、購買者統編至少需填寫一項。');
                }
            });
        });
    </script>
}