<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Purchase Invoice - {{ $purchase->purchase_code }}</title>
    <style>
        body {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 12px;
            margin: 0;
            padding: 20px;
            color: #333;
            background: white;
        }
        
        .invoice-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            background: white;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #4e73df;
        }
        
        .company-name {
            font-size: 24px;
            font-weight: bold;
            color: #4e73df;
            margin-bottom: 5px;
        }
        
        .invoice-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .invoice-code {
            font-size: 16px;
            color: #666;
        }
        
        .info-box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        
        .info-section {
            flex: 1;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 0 10px;
        }
        
        .info-section:first-child {
            margin-left: 0;
        }
        
        .info-section:last-child {
            margin-right: 0;
        }
        
        .info-section h5 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #4e73df;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .table th {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 8px;
            text-align: left;
            font-weight: bold;
        }
        
        .table td {
            border: 1px solid #dee2e6;
            padding: 8px;
        }
        
        .text-right {
            text-align: right;
        }
        
        .text-center {
            text-align: center;
        }
        
        .totals {
            width: 50%;
            margin-left: auto;
            border-collapse: collapse;
        }
        
        .totals td {
            padding: 5px 10px;
            border: none;
        }
        
        .totals tr:last-child td {
            border-top: 2px solid #333;
            font-weight: bold;
            font-size: 14px;
        }
        
        .footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 2px solid #ddd;
            text-align: center;
        }
        
        .signatures {
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
        }
        
        .signature-box {
            text-align: center;
            flex: 1;
            margin: 0 20px;
        }
        
        .signature-line {
            border-top: 1px solid #333;
            width: 80%;
            margin: 40px auto 10px;
        }
        
        .status-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: bold;
            margin: 2px;
        }
        
        .badge-success { background: #d4edda; color: #155724; }
        .badge-warning { background: #fff3cd; color: #856404; }
        .badge-danger { background: #f8d7da; color: #721c24; }
        .badge-info { background: #d1ecf1; color: #0c5460; }
        
        .page-break {
            page-break-before: always;
        }
        
        .no-print {
            display: none;
        }
    </style>
</head>
<body>
    <div class="invoice-container">
        <!-- Header -->
        <div class="header">
            <div class="company-name">{{ config('app.name', 'Purchase System') }}</div>
            <div class="invoice-title">PURCHASE INVOICE</div>
            <div class="invoice-code">{{ $purchase->purchase_code }}</div>
            <div>Date: {{ $purchase->purchase_date->format('d M, Y') }}</div>
        </div>
        
        <!-- Supplier & Purchase Info -->
        <div class="info-box">
            <div class="info-section">
                <h5>SUPPLIER INFORMATION</h5>
                <strong>{{ $purchase->supplier->name ?? 'N/A' }}</strong><br>
                @if($purchase->supplier->company_name)
                {{ $purchase->supplier->company_name }}<br>
                @endif
                Phone: {{ $purchase->supplier->phone ?? 'N/A' }}<br>
                Email: {{ $purchase->supplier->email ?? 'N/A' }}<br>
                Address: {{ $purchase->supplier->address ?? 'N/A' }}
            </div>
            
            <div class="info-section">
                <h5>PURCHASE INFORMATION</h5>
                <strong>Purchase Code:</strong> {{ $purchase->purchase_code }}<br>
                <strong>Reference:</strong> {{ $purchase->reference_no ?? 'N/A' }}<br>
                <strong>Warehouse:</strong> {{ $purchase->warehouse->name ?? 'Main Warehouse' }}<br>
                <strong>Created By:</strong> {{ $purchase->creator->name ?? 'System' }}<br>
                <strong>Payment Method:</strong> {{ ucfirst($purchase->payment_method) }}<br>
                <strong>Status:</strong> 
                <span class="status-badge badge-{{ $purchase->status == 'received' ? 'success' : ($purchase->status == 'pending' ? 'warning' : ($purchase->status == 'cancelled' ? 'danger' : 'info')) }}">
                    {{ strtoupper($purchase->status) }}
                </span>
            </div>
        </div>
        
        <!-- Items Table -->
        <table class="table">
            <thead>
                <tr>
                    <th width="5%">#</th>
                    <th width="35%">PRODUCT</th>
                    <th width="15%">CODE</th>
                    <th width="15%">QUANTITY</th>
                    <th width="15%">UNIT COST</th>
                    <th width="15%" class="text-right">TOTAL</th>
                </tr>
            </thead>
            <tbody>
                @foreach($purchase->items as $index => $item)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>
                        <strong>{{ $item->product_name }}</strong>
                        @if($item->batch_no)
                        <br><small>Batch: {{ $item->batch_no }}</small>
                        @endif
                        @if($item->expiry_date)
                        <br><small>Expiry: {{ $item->expiry_date->format('d M, Y') }}</small>
                        @endif
                    </td>
                    <td>{{ $item->product_code }}</td>
                    <td>{{ number_format($item->quantity, 2) }}</td>
                    <td>৳{{ number_format($item->unit_cost, 2) }}</td>
                    <td class="text-right">৳{{ number_format($item->total_cost, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        
        <!-- Totals -->
        <table class="totals">
            <tr>
                <td>Subtotal:</td>
                <td class="text-right">৳{{ number_format($purchase->subtotal, 2) }}</td>
            </tr>
            
            @if($purchase->discount_amount > 0)
            <tr>
                <td>Discount:</td>
                <td class="text-right">-৳{{ number_format($purchase->discount_amount, 2) }}</td>
            </tr>
            @endif
            
            @if($purchase->tax_amount > 0)
            <tr>
                <td>Tax ({{ $purchase->tax_rate ?? 0 }}%):</td>
                <td class="text-right">+৳{{ number_format($purchase->tax_amount, 2) }}</td>
            </tr>
            @endif
            
            @if($purchase->shipping_cost > 0)
            <tr>
                <td>Shipping:</td>
                <td class="text-right">+৳{{ number_format($purchase->shipping_cost, 2) }}</td>
            </tr>
            @endif
            
            <tr>
                <td><strong>GRAND TOTAL:</strong></td>
                <td class="text-right"><strong>৳{{ number_format($purchase->grand_total, 2) }}</strong></td>
            </tr>
            
            <tr>
                <td>Paid Amount:</td>
                <td class="text-right">৳{{ number_format($purchase->paid_amount, 2) }}</td>
            </tr>
            
            <tr>
                <td>Due Amount:</td>
                <td class="text-right {{ $purchase->due_amount > 0 ? 'text-danger' : 'text-success' }}">
                    <strong>৳{{ number_format($purchase->due_amount, 2) }}</strong>
                </td>
            </tr>
        </table>
        
        <!-- Payment Status -->
        <div style="margin-top: 20px; text-align: center;">
            <h3>
                <span class="status-badge badge-{{ $purchase->payment_status == 'paid' ? 'success' : ($purchase->payment_status == 'partial' ? 'warning' : 'danger') }}">
                    PAYMENT STATUS: {{ strtoupper($purchase->payment_status) }}
                </span>
            </h3>
        </div>
        
        <!-- Notes -->
        @if($purchase->notes)
        <div style="margin-top: 30px; padding: 15px; border: 1px solid #ddd; border-radius: 5px;">
            <strong>Notes:</strong><br>
            {{ $purchase->notes }}
        </div>
        @endif
        
        <!-- Signatures -->
        <div class="signatures">
            <div class="signature-box">
                <div class="signature-line"></div>
                <strong>Supplier Signature</strong><br>
                Name: ____________________<br>
                Date: ____________________
            </div>
            
            <div class="signature-box">
                <div class="signature-line"></div>
                <strong>Authorized Signature</strong><br>
                Name: ____________________<br>
                Date: ____________________
            </div>
        </div>
        
        <!-- Footer -->
        <div class="footer">
            <p>This is a computer generated invoice. No signature required.</p>
            <p>Printed on: {{ date('d M, Y h:i A') }}</p>
            <p>Thank you for your business!</p>
        </div>
    </div>
    
    <!-- Print Button for Browser -->
    <div class="no-print" style="position: fixed; top: 20px; right: 20px;">
        <button onclick="window.print()" style="padding: 10px 20px; background: #4e73df; color: white; border: none; border-radius: 5px; cursor: pointer;">
            Print Invoice
        </button>
    </div>
    
    <script>
        // Auto print when PDF is generated
        @if(request()->has('print') && request()->print == 'true')
        window.print();
        @endif
        
        // After print, close window if opened in new tab
        window.onafterprint = function() {
            if(window.opener) {
                window.close();
            }
        };
    </script>
</body>
</html>