<!DOCTYPE html>
<html>
<head>
    <title>Invoice #{{ $order->id }}</title>

    <style>
        body{
            font-family: Arial, sans-serif;
            padding:20px;
        }

        table{
            width:100%;
            border-collapse:collapse;
        }

        table th,
        table td{
            border:1px solid #ddd;
            padding:8px;
        }

        .text-right{
            text-align:right;
        }

        @media print{
            .no-print{
                display:none;
            }
        }
    </style>
</head>
<body>

    <button class="no-print" onclick="window.print()">
        Print Invoice
    </button>

    <h2>Invoice #{{ $order->id }}</h2>

    <hr>

    <h4>Customer Information</h4>

    <div class="col-md-6">

    <div class="card-body">
                    

                    <p><strong>{{ $order->shipping_address['name'] ?? '' }}</strong></p>
                    <p>{{ $order->shipping_address['address'] ?? '' }}</p>
                    <p>{{  $order->shipping_address['city'] ?? '' }}, {{  $order->shipping_address['state'] ?? '' }}</p>
                    <p>{{  $order->shipping_address['country'] ?? '' }} - {{  $order->shipping_address['postal_code'] ?? '' }}</p>
                    <p><strong>Phone:</strong> {{ $order->shipping_address['phone'] ?? '' }}</p>
   </div>
</div>
    <div class="col-md-4">
    <div style="text-align:center; margin-top:20px;">
    <h4>Scan to Verify Order</h4>

   <img src="{{ $qrImage }}" width="150">
</div>
</div>

    <table>
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Qty</th>
                <th>Total</th>
            </tr>
        </thead>

        <tbody>

        @php $grandTotal = 0; @endphp

        @foreach($order->orderDetails as $item)

            @php
                $total = $item->price * $item->quantity;
                $grandTotal += $total;
            @endphp

            <tr>
                <td>{{ $item->product->name ?? '' }}</td>
                <td>{{ $item->price }}</td>
                <td>{{ $item->quantity }}</td>
                <td>{{ $total }}</td>
            </tr>

        @endforeach

        </tbody>

        <tfoot>
            <tr>
                <th colspan="3" class="text-right">
                    Grand Total
                </th>

                <th>
                    {{ $grandTotal }}
                </th>
            </tr>
        </tfoot>
    </table>

    <script>
        window.onload = function() {
            window.print();
        }
    </script>

</body>
</html>