@*
    EN: Table Detail — Bill preview with items, subtotal, service charge, VAT, total, split bill.
    VI: Chi tiết bàn — Xem hóa đơn với danh sách món, tạm tính, phí dịch vụ, VAT, tổng, tách hóa đơn.
*@
@page "/pos/restaurant/table-detail"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;align-items:center;justify-content:center;padding:24px;">
    <div style="width:100%;max-width:480px;background:var(--pos-bg-elevated);border-radius:16px;
                display:flex;flex-direction:column;overflow:hidden;">
        @* ═══ HEADER / TIÊU ĐỀ ═══ *@
        <div style="padding:16px 20px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;gap:12px;">
            <button class="pos-category-tab" @onclick="@(() => NavigateTo("restaurant"))">
                <i data-lucide="arrow-left" style="width:14px;"></i>
            </button>
            <div style="flex:1;">
                <div style="font-size:16px;font-weight:700;">Bàn 3 — Hóa đơn</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">PV: Nguyễn Văn A · 18:45</div>
            </div>
            <span style="font-size:12px;padding:4px 10px;border-radius:6px;background:rgba(255,92,0,.15);color:var(--pos-orange-primary);font-weight:600;">
                6 khách
            </span>
        </div>

        @* ═══ ORDERED ITEMS / CÁC MÓN ĐÃ GỌI ═══ *@
        <div style="flex:1;overflow-y:auto;padding:12px 20px;">
            @foreach (var item in _items)
            {
                <div style="display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);">
                    <span style="width:28px;font-size:13px;color:var(--pos-text-tertiary);">x@(item.Qty)</span>
                    <span style="flex:1;font-size:14px;font-weight:500;">@item.Name</span>
                    <span style="font-size:14px;font-weight:600;">@FormatPrice(item.Price * item.Qty)</span>
                </div>
            }
        </div>

        @* ═══ BILL SUMMARY / TỔNG KẾT HÓA ĐƠN ═══ *@
        <div style="padding:16px 20px;border-top:1px solid var(--pos-border-subtle);display:flex;flex-direction:column;gap:8px;">
            <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--pos-text-secondary);">
                <span>Tạm tính</span><span>@FormatPrice(Subtotal)</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--pos-text-secondary);">
                <span>Phí dịch vụ (5%)</span><span>@FormatPrice(ServiceCharge)</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--pos-text-secondary);">
                <span>VAT (8%)</span><span>@FormatPrice(Vat)</span>
            </div>
            <div style="height:1px;background:var(--pos-border-default);margin:4px 0;"></div>
            <div style="display:flex;justify-content:space-between;font-size:18px;font-weight:700;">
                <span>Tổng cộng</span>
                <span style="color:var(--pos-orange-primary);">@FormatPrice(Total)</span>
            </div>
        </div>

        @* ═══ ACTIONS / HÀNH ĐỘNG ═══ *@
        <div style="padding:12px 20px 20px;display:flex;flex-direction:column;gap:10px;">
            @* EN: Split bill toggle / VI: Tùy chọn tách hóa đơn *@
            <div style="display:flex;gap:10px;">
                <button class="pos-category-tab @(_splitMode == "full" ? "pos-category-tab--active" : "")"
                        style="flex:1;text-align:center;" @onclick="@(() => _splitMode = "full")">Thanh toán đầy đủ</button>
                <button class="pos-category-tab @(_splitMode == "split" ? "pos-category-tab--active" : "")"
                        style="flex:1;text-align:center;" @onclick="@(() => _splitMode = "split")">Tách hóa đơn</button>
            </div>

            @if (_splitMode == "split")
            {
                <div style="display:flex;gap:8px;justify-content:center;padding:8px 0;">
                    @for (var i = 2; i <= 4; i++)
                    {
                        var count = i;
                        <button class="pos-category-tab @(_splitCount == count ? "pos-category-tab--active" : "")"
                                @onclick="() => _splitCount = count">@count người</button>
                    }
                </div>
                <div style="text-align:center;font-size:14px;color:var(--pos-text-secondary);">
                    Mỗi người: <b style="color:var(--pos-orange-primary);">@FormatPrice(Total / _splitCount)</b>
                </div>
            }

            <button class="pos-btn-checkout">
                <i data-lucide="credit-card"></i> Thanh toán
            </button>
        </div>
    </div>
</div>

@code {
    private string _splitMode = "full";
    private int _splitCount = 2;

    // EN: Demo bill items / VI: Các món trong hóa đơn mẫu
    private readonly List<BillItem> _items = new()
    {
        new("Gỏi cuốn", 45_000, 2), new("Chả giò", 40_000, 1),
        new("Phở bò tái", 75_000, 2), new("Cá kho tộ", 120_000, 1),
        new("Cơm tấm sườn", 65_000, 1), new("Lẩu thái", 250_000, 1),
        new("Trà đá", 10_000, 4), new("Bia Sài Gòn", 25_000, 3),
    };

    private decimal Subtotal => _items.Sum(i => i.Price * i.Qty);
    private decimal ServiceCharge => Math.Round(Subtotal * 0.05m);
    private decimal Vat => Math.Round(Subtotal * 0.08m);
    private decimal Total => Subtotal + ServiceCharge + Vat;

    private record BillItem(string Name, decimal Price, int Qty);
}
