<style>
/* Screen: keep print controls out of the document flow issues */
.page-header.no-print {
    align-items: flex-start;
}
.page-header.no-print .flex.gap-2 {
    flex-shrink: 0;
}

/* Tighter document padding (card default is 24px; p-8 is unused in app.css) */
.purchase-order-card {
    padding: 16px 20px !important;
}

/* PO line items: one column grid via colgroup so header/body stay aligned */
.purchase-order-card table.po-items-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.purchase-order-card table.po-items-table col.po-w-num { width: 6%; }
.purchase-order-card table.po-items-table col.po-w-product { width: 40%; }
.purchase-order-card table.po-items-table col.po-w-cost { width: 18%; }
.purchase-order-card table.po-items-table col.po-w-qty { width: 12%; }
.purchase-order-card table.po-items-table col.po-w-line { width: 24%; }

.purchase-order-card table.po-items-table thead th,
.purchase-order-card table.po-items-table tbody td {
    box-sizing: border-box;
    vertical-align: top;
    padding: 10px 12px;
}

/* Beat global thead th { text-align: left } from app.css */
.purchase-order-card table.po-items-table thead th {
    white-space: normal;
}

.purchase-order-card table.po-items-table .po-col-num { text-align: center !important; }
.purchase-order-card table.po-items-table .po-col-product { text-align: left !important; }
.purchase-order-card table.po-items-table .po-col-cost,
.purchase-order-card table.po-items-table .po-col-line { text-align: right !important; }
.purchase-order-card table.po-items-table .po-col-qty { text-align: center !important; }

.purchase-order-card .po-section-below-header {
    margin-bottom: 1rem;
}

.purchase-order-card .po-section-table {
    margin-bottom: 1rem;
}

.purchase-order-card .po-section-totals {
    margin-top: 1rem;
    padding-top: 1rem;
}

.purchase-order-card .po-section-notes {
    margin-top: 1rem;
    padding-top: 1rem;
}

.purchase-order-card .po-notes-inner {
    padding: 12px 14px;
}

@media print {
    @page {
        margin: 8mm;
        size: A4;
    }

    body {
        margin: 0;
        padding: 0;
        background: #fff !important;
        font-size: 11pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* App chrome — do not print sidebar, top bar, or action areas */
    aside,
    nav,
    .sidebar,
    .main-nav,
    .topbar,
    .page-header,
    .no-print,
    .alert {
        display: none !important;
    }

    .app-wrapper {
        display: block !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .page-content {
        padding: 0 !important;
        max-width: none !important;
    }

    /* Purchase document uses full printable width */
    .purchase-order-card {
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
    }

    .purchase-order-card,
    .purchase-order-card .bg-raised {
        background: #fff !important;
    }

    .purchase-order-card,
    .purchase-order-card * {
        color: #000 !important;
    }

    .btn,
    button {
        display: none !important;
    }

    /* Hide badges in chrome only; keep PO status visible */
    .badge {
        display: none !important;
    }

    .purchase-order-card .badge {
        display: inline-block !important;
        border: 1px solid #000 !important;
        padding: 2px 8px !important;
        background: #fff !important;
        font-size: 9pt !important;
        font-weight: 700 !important;
    }

    /* Flex layouts inside the PO must stay flex (avoid .card > * { display:block }) */
    .purchase-order-card .flex {
        display: flex !important;
    }

    .purchase-order-card .justify-between {
        justify-content: space-between !important;
    }

    .purchase-order-card .justify-end {
        justify-content: flex-end !important;
    }

    .purchase-order-card .text-right {
        text-align: right !important;
    }

    .purchase-order-card .text-center {
        text-align: center !important;
    }

    .purchase-order-card .po-totals-col {
        width: 100%;
        max-width: 260px;
        flex: 0 0 auto;
    }

    .purchase-order-card .po-notes-inner {
        padding: 8px 10px !important;
    }

    .purchase-order-card .po-totals-col .flex.justify-between {
        gap: 1rem;
    }

    .purchase-order-card .po-totals-col .flex.justify-between span:first-child {
        flex-shrink: 0;
    }

    .purchase-order-card .po-totals-col .flex.justify-between span:last-child {
        text-align: right;
        min-width: 6.5em;
    }

    .purchase-order-card .table-wrapper {
        overflow: visible !important;
        width: 100% !important;
        border: none !important;
    }

    .purchase-order-card table.po-items-table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 9.5pt !important;
        border-collapse: collapse !important;
    }

    .purchase-order-card table.po-items-table thead th,
    .purchase-order-card table.po-items-table tbody td {
        padding: 5px 7px !important;
        border: 1px solid #bbb !important;
    }

    .purchase-order-card table.po-items-table thead th {
        background: #eee !important;
        font-weight: bold !important;
    }

    .purchase-order-card .text-3xl {
        font-size: 18pt !important;
    }

    .purchase-order-card .text-xl,
    .purchase-order-card .text-lg {
        font-size: 12pt !important;
    }

    .purchase-order-card .text-sm {
        font-size: 9pt !important;
    }

    .purchase-order-card .text-xs {
        font-size: 8pt !important;
    }

    .purchase-order-card .po-section-below-header,
    .purchase-order-card .po-section-table {
        margin-bottom: 0.65rem !important;
    }

    .purchase-order-card .po-section-totals,
    .purchase-order-card .po-section-notes {
        margin-top: 0.65rem !important;
        padding-top: 0.65rem !important;
    }
}
</style>

<div class="page-header no-print">
    <div>
        <a href="<?= APP_URL ?>/purchases" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Purchases
        </a>
        <h1>Purchase Order: <?= e($purchase['purchase_no']) ?></h1>
    </div>
    <div class="flex gap-2">
        <button type="button" class="btn btn-outline no-print po-print-btn" onclick="window.print()" aria-label="Print purchase order">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
            Print
        </button>
    </div>
</div>

<div class="card purchase-order-card">
    <div class="flex justify-between po-section-below-header">
        <div>
            <div class="text-xl font-bold mb-1"><?= e($purchase['tenant']['business_name'] ?? Auth::tenant()['business_name']) ?></div>
            <div class="text-sm text-muted mb-4"><?= e($purchase['tenant']['business_address'] ?? '') ?></div>

            <div class="text-xs text-muted uppercase font-bold tracking-widest mb-1">Supplier Info</div>
            <?php if (!empty($purchase['supplier'])): ?>
                <div class="text-lg font-bold"><?= e($purchase['supplier']['name']) ?></div>
                <div class="text-sm text-muted"><?= e($purchase['supplier']['email'] ?? '') ?> &bull; <?= e($purchase['supplier']['phone'] ?? '') ?></div>
            <?php else: ?>
                <div class="text-sm text-muted">No supplier selected</div>
            <?php endif; ?>
        </div>
        <div class="text-right">
             <div class="text-3xl font-black text-primary-color mb-1">PURCHASE ORDER</div>
             <div class="text-lg font-bold mb-1">#<?= e($purchase['purchase_no']) ?></div>
             <div class="text-sm text-muted">Order Date: <?= date('M j, Y H:i', strtotime($purchase['created_at'])) ?></div>
             <?php if (!empty($purchase['user'])): ?>
             <div class="text-sm text-muted">Processed by: <?= e($purchase['user']['name']) ?></div>
             <?php endif; ?>
             <div class="mt-4">
                <span class="badge badge-success"><?= strtoupper(e($purchase['status'])) ?></span>
             </div>
        </div>
    </div>

    <div class="table-wrapper po-section-table">
        <table class="po-items-table">
            <colgroup>
                <col class="po-w-num">
                <col class="po-w-product">
                <col class="po-w-cost">
                <col class="po-w-qty">
                <col class="po-w-line">
            </colgroup>
            <thead>
                <tr>
                    <th class="po-col-num" scope="col">#</th>
                    <th class="po-col-product" scope="col">Product Item</th>
                    <th class="po-col-cost" scope="col">Unit Cost</th>
                    <th class="po-col-qty" scope="col">Quantity</th>
                    <th class="po-col-line" scope="col">Line Total</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($purchase['items'] as $idx => $item): ?>
                <tr>
                    <td class="po-col-num"><?= $idx + 1 ?></td>
                    <td class="po-col-product">
                        <div class="font-bold"><?= e($item['product_name']) ?></div>
                        <div class="text-xs text-muted">SKU: <?= e($item['sku']) ?></div>
                    </td>
                    <td class="po-col-cost"><?= money($item['cost_price']) ?></td>
                    <td class="po-col-qty"><?= (float)$item['quantity'] ?></td>
                    <td class="po-col-line font-bold"><?= money($item['total']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <div class="flex justify-end po-section-totals border-t border-soft">
        <div class="po-totals-col" style="width: 100%; max-width: 320px;">
             <div class="flex justify-between py-1">
                <span class="text-muted">Subtotal</span>
                <span class="font-bold"><?= money($purchase['total'] + $purchase['discount_amount'] - $purchase['tax_amount']) ?></span>
             </div>
             <div class="flex justify-between py-1">
                <span class="text-muted">Discount</span>
                <span class="font-bold text-danger">- <?= money($purchase['discount_amount']) ?></span>
             </div>
             <div class="flex justify-between py-1">
                <span class="text-muted">Tax</span>
                <span class="font-bold text-info">+ <?= money($purchase['tax_amount']) ?></span>
             </div>
             <div class="flex justify-between py-4 mt-2 border-t-2 border-primary" style="font-size: 1.4rem;">
                <span class="font-black">Total</span>
                <span class="font-black text-primary-color"><?= money($purchase['total']) ?></span>
             </div>
             <div class="flex justify-between py-2 text-success" style="font-size: 1.1rem; border-top: 1px dashed var(--border);">
                 <span>Amount Paid</span>
                 <span class="font-bold"><?= money($purchase['amount_paid']) ?></span>
             </div>
        </div>
    </div>
    
    <?php if (!empty($purchase['notes'])): ?>
    <div class="po-section-notes border-t border-soft">
        <div class="text-xs text-muted uppercase font-bold tracking-widest mb-2">Order Notes</div>
        <div class="po-notes-inner bg-raised rounded text-sm leading-relaxed">
            <?= nl2br(e($purchase['notes'])) ?>
        </div>
    </div>
    <?php endif; ?>
</div>
