<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Purchase Invoice - {{ $purchase->voucher_no }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        @media print {
            @page { margin: 15mm; size: A4 portrait; }
            .no-print { display: none !important; }
            body { background: white !important; }
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="no-print fixed top-0 left-0 right-0 z-50 bg-white border-b shadow-md px-4 py-3 flex items-center justify-between">
        <span class="text-sm font-semibold text-slate-600">Print Preview</span>
        <div class="flex gap-2">
            <button onclick="window.print()" class="px-4 py-2 bg-primary-600 text-white text-sm font-semibold rounded-lg hover:bg-primary-700">🖨️ Print</button>
            <button onclick="window.close()" class="px-4 py-2 border border-slate-300 text-sm rounded-lg hover:bg-slate-50">Close</button>
        </div>
    </div>

    <div class="max-w-[210mm] mx-auto bg-white min-h-screen px-8 pt-20 pb-8 print:pt-0" style="box-shadow: 0 0 20px rgba(0,0,0,0.05);">
        {{-- Header --}}
        <div class="border-b-2 border-primary-600 pb-4 mb-6 flex items-start justify-between">
            <div>
                <h1 class="text-3xl font-black text-slate-900 tracking-tight">{{ $company->company_name ?? 'ABC YARN HOUSE' }}</h1>
                <p class="text-sm text-slate-500 mt-1">{{ $company->tagline ?? 'Premium Quality Yarn Supplier' }}</p>
                <p class="text-xs text-slate-400 mt-1">{{ $company->address ?? '' }}</p>
                <p class="text-xs text-slate-400">{{ $company->phone ?? '' }} | {{ $company->email ?? '' }}</p>
            </div>
            <div class="text-right">
                <h2 class="text-xl font-bold text-primary-700">PURCHASE INVOICE</h2>
                <p class="text-xs text-slate-500 mt-1">#{{ $purchase->voucher_no }}</p>
            </div>
        </div>

        {{-- Info --}}
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div class="border border-slate-200 rounded-lg p-4">
                <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Supplier</p>
                <p class="font-bold text-slate-900">{{ $purchase->party->name ?? '—' }}</p>
                <p class="text-xs text-slate-500">{{ $purchase->party->phone ?? '' }}</p>
                <p class="text-xs text-slate-500">{{ $purchase->party->address ?? '' }}</p>
            </div>
            <div class="border border-slate-200 rounded-lg p-4">
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Invoice Date</p>
                        <p class="text-sm font-semibold">{{ $purchase->purchase_date->format('d M, Y') }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Invoice No</p>
                        <p class="text-sm font-semibold">{{ $purchase->invoice_no ?? '—' }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Status</p>
                        <p class="text-sm font-semibold text-emerald-600">{{ ucfirst($purchase->status) }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Created By</p>
                        <p class="text-sm font-semibold">{{ $purchase->creator->name ?? 'System' }}</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Table --}}
        <table class="w-full border-collapse mb-6">
            <thead>
                <tr class="bg-primary-600 text-white text-left">
                    <th class="px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider w-10">#</th>
                    <th class="px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider">Yarn Description</th>
                    <th class="px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider">Lot No</th>
                    <th class="px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider text-right">Bags</th>
                    <th class="px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider text-right">Qty (Kg)</th>
                    <th class="px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider text-right">Rate</th>
                    <th class="px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider text-right">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($purchase->items as $i => $item)
                <tr class="border-b border-slate-200 {{ $i % 2 === 0 ? 'bg-white' : 'bg-slate-50' }}">
                    <td class="px-3 py-2.5 text-xs text-center">{{ $i + 1 }}</td>
                    <td class="px-3 py-2.5 text-sm font-medium">{{ $item->yarn->name ?? '—' }}</td>
                    <td class="px-3 py-2.5 text-xs font-mono text-slate-600">{{ $item->lot_no ?? '—' }}</td>
                    <td class="px-3 py-2.5 text-sm text-right">{{ number_format($item->bags) }}</td>
                    <td class="px-3 py-2.5 text-sm text-right">{{ number_format($item->quantity) }}</td>
                    <td class="px-3 py-2.5 text-sm text-right">৳{{ number_format($item->rate) }}</td>
                    <td class="px-3 py-2.5 text-sm font-bold text-right">৳{{ number_format($item->amount) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        {{-- Totals --}}
        <div class="flex justify-end">
            <div class="w-72 space-y-1.5">
                <div class="flex justify-between text-sm py-1">
                    <span class="text-slate-600">Subtotal</span>
                    <span class="font-semibold">৳{{ number_format($purchase->subtotal) }}</span>
                </div>
                @if($purchase->labour_charge > 0)
                <div class="flex justify-between text-sm py-1">
                    <span class="text-slate-600">Labour Charge</span>
                    <span class="font-semibold">৳{{ number_format($purchase->labour_charge) }}</span>
                </div>
                @endif
                @if($purchase->car_rent > 0)
                <div class="flex justify-between text-sm py-1">
                    <span class="text-slate-600">Car Rent</span>
                    <span class="font-semibold">৳{{ number_format($purchase->car_rent) }}</span>
                </div>
                @endif
                <div class="border-t-2 border-primary-600 pt-2 flex justify-between text-lg font-bold">
                    <span class="text-primary-800">Grand Total</span>
                    <span class="text-primary-800">৳{{ number_format($purchase->grand_total) }}</span>
                </div>
                <div class="flex justify-between text-sm pt-1">
                    <span class="text-slate-600">Paid Amount</span>
                    <span class="font-semibold text-emerald-700">৳{{ number_format($purchase->paid_amount) }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-slate-600">Due Amount</span>
                    <span class="font-semibold text-rose-700">৳{{ number_format($purchase->due_amount) }}</span>
                </div>
            </div>
        </div>

        @if($purchase->remarks)
        <div class="mt-6 border-t border-slate-200 pt-4">
            <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Remarks</p>
            <p class="text-sm text-slate-600">{{ $purchase->remarks }}</p>
        </div>
        @endif

        {{-- Footer --}}
        <div class="mt-8 border-t border-slate-200 pt-4 text-center text-xs text-slate-400">
            <p>This is a computer-generated invoice. No signature required.</p>
            <p class="mt-1">© {{ date('Y') }} {{ $company->company_name ?? 'ABC YARN HOUSE' }} — All Rights Reserved</p>
        </div>
    </div>

    <script>
        window.onload = function() {
            // Auto-print after 500ms delay
        };
    </script>
</body>
</html>
