<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Purchase Order {{ $purchaseOrder->po_number }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background: #f3f6fb; font-family: Arial, Helvetica, sans-serif; }
        .doc { max-width: 980px; margin: 24px auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
        .doc-head { padding: 24px; background: linear-gradient(100deg, #114b5f 0%, #1a936f 100%); color: #fff; }
        .doc-body { padding: 24px; }
        .muted { color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
        .value { font-weight: 700; color: #111827; }
        .box { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; height: 100%; }
        .table thead th { background: #f9fafb; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
        .summary { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; }
        @media print { body { background: #fff; } .doc { border: 0; border-radius: 0; margin: 0; max-width: none; } .no-print { display: none !important; } }
    </style>
</head>
<body>
    <div class="doc">
        <div class="doc-head d-flex justify-content-between align-items-start">
            <div>
                <h3 class="mb-1">{{ $hotel->name ?? hotelName() }}</h3>
                <div>{{ $hotel->address ?? 'Address not set' }}{{ !empty($hotel->city) ? ', '.$hotel->city : '' }}{{ !empty($hotel->country) ? ', '.$hotel->country : '' }}</div>
                <div>Email: {{ $hotel->email ?? 'N/A' }} | Phone: {{ $hotel->phone ?? 'N/A' }}</div>
                @if(!empty($hotel?->tax_id))
                    <div>TIN: {{ $hotel->tax_id }}</div>
                @endif
            </div>
            <div class="text-end">
                <h4 class="mb-1">PURCHASE ORDER</h4>
                <div><strong>{{ $purchaseOrder->po_number }}</strong></div>
                <div>Date: {{ optional($purchaseOrder->created_at)->format('Y-m-d') }}</div>
            </div>
        </div>

        <div class="doc-body">
            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <div class="box">
                        <div class="muted">Supplier</div>
                        <div class="value">{{ $purchaseOrder->vendor->company ?? 'N/A' }}</div>
                        <div>Contact: {{ $purchaseOrder->vendor->name ?? 'N/A' }}</div>
                        <div>Phone: {{ $purchaseOrder->vendor->phone ?? 'N/A' }}</div>
                        <div>Email: {{ $purchaseOrder->vendor->email ?? 'N/A' }}</div>
                        <div>Address: {{ $purchaseOrder->vendor->full_address ?? 'N/A' }}</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box">
                        <div class="muted">Order Details</div>
                        <div><strong>Status:</strong> {{ ucfirst($purchaseOrder->status) }}</div>
                        <div><strong>Urgency:</strong> {{ ucfirst($purchaseOrder->urgency) }}</div>
                        <div><strong>Delivery Date:</strong> {{ optional($purchaseOrder->delivery_date)->format('Y-m-d') ?: 'N/A' }}</div>
                        <div><strong>Requested By:</strong> {{ $purchaseOrder->orderedBy->name ?? 'N/A' }}</div>
                    </div>
                </div>
            </div>

            <div class="table-responsive mb-3">
                <table class="table table-bordered align-middle mb-0">
                    <thead>
                        <tr>
                            <th style="width: 45%">Description</th>
                            <th class="text-end">Purchase Qty</th>
                            <th class="text-end">Stock Qty</th>
                            <th class="text-end">Unit Price (UGX)</th>
                            <th class="text-end">Amount (UGX)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $purchaseOrder->item->name ?? 'N/A' }}</td>
                            <td class="text-end">
                                {{ number_format((float)($purchaseOrder->purchase_quantity ?? $purchaseOrder->quantity), 3) }}
                                {{ $purchaseOrder->purchase_unit ?? $purchaseOrder->stock_unit ?? 'units' }}
                            </td>
                            <td class="text-end">{{ number_format((float)$purchaseOrder->quantity, 0) }} {{ $purchaseOrder->stock_unit ?? 'units' }}</td>
                            <td class="text-end">{{ number_format((float)$purchaseOrder->unit_price, 2) }}</td>
                            <td class="text-end">{{ number_format((float)$purchaseOrder->total_amount, 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="row g-3">
                <div class="col-md-7">
                    <div class="box">
                        <div class="muted">Notes / Terms</div>
                        <div><strong>Notes:</strong> {{ $purchaseOrder->notes ?: 'N/A' }}</div>
                        <div class="mt-1"><strong>Terms:</strong> {{ $purchaseOrder->terms ?: 'N/A' }}</div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="summary">
                        <div class="d-flex justify-content-between"><span>Subtotal</span><strong>UGX {{ number_format((float)$purchaseOrder->total_amount, 2) }}</strong></div>
                        <div class="d-flex justify-content-between"><span>Tax</span><span>UGX 0.00</span></div>
                        <hr>
                        <div class="d-flex justify-content-between fs-5"><strong>Total</strong><strong>UGX {{ number_format((float)$purchaseOrder->total_amount, 2) }}</strong></div>
                    </div>
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-md-6">
                    <div>______________________________</div>
                    <small>Prepared By</small>
                </div>
                <div class="col-md-6 text-md-end">
                    <div>______________________________</div>
                    <small>Authorized Signature</small>
                </div>
            </div>

            <div class="mt-4 no-print d-flex gap-2">
                <button class="btn btn-primary" onclick="window.print()">Print / Save PDF</button>
                <a class="btn btn-outline-secondary" href="{{ route('purchase-orders.show', $purchaseOrder) }}">Back to PO</a>
            </div>
        </div>
    </div>
</body>
</html>
