<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice #{{ $order->order_number }}</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 13px;
            color: #333333;
            line-height: 1.4;
            margin: 0;
            padding: 0;
        }
        .invoice-box {
            max-width: 800px;
            margin: auto;
            padding: 0px;
        }
        .header-table, .addresses-table, .items-table, .summary-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 25px;
        }
        .header-table td {
            vertical-align: top;
        }
        .logo {
            font-size: 26px;
            font-weight: bold;
            color: #111111;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0;
        }
        .store-info {
            font-size: 11px;
            color: #666666;
            margin-top: 5px;
        }
        .invoice-details {
            text-align: right;
        }
        .invoice-title {
            font-size: 24px;
            font-weight: bold;
            color: #4f46e5; /* Premium Indigo */
            margin: 0 0 5px 0;
            text-transform: uppercase;
        }
        .badge {
            display: inline-block;
            padding: 3px 8px;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: 3px;
            margin-top: 5px;
        }
        .badge-paid {
            background-color: #d1fae5;
            color: #065f46;
        }
        .badge-unpaid {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .badge-refunded {
            background-color: #f3f4f6;
            color: #374151;
        }
        .section-title {
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            color: #4f46e5;
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }
        .addresses-table td {
            width: 50%;
            vertical-align: top;
            padding-right: 15px;
        }
        .address-box {
            font-size: 11px;
            color: #4b5563;
            line-height: 1.5;
        }
        .address-box strong {
            color: #111111;
        }
        .items-table th {
            background-color: #f9fafb;
            border-bottom: 2px solid #e5e7eb;
            color: #374151;
            font-weight: bold;
            text-align: left;
            padding: 10px;
            font-size: 11px;
            text-transform: uppercase;
        }
        .items-table td {
            padding: 10px;
            border-bottom: 1px solid #f3f4f6;
            font-size: 11px;
        }
        .items-table tr:last-child td {
            border-bottom: none;
        }
        .price-col {
            text-align: right;
        }
        .summary-wrapper {
            width: 100%;
            margin-top: 15px;
        }
        .summary-right {
            float: right;
            width: 40%;
        }
        .summary-table td {
            padding: 6px 10px;
            font-size: 11px;
        }
        .summary-table td.label {
            text-align: right;
            color: #6b7280;
        }
        .summary-table td.value {
            text-align: right;
            font-weight: bold;
            color: #111111;
        }
        .summary-table tr.total td {
            border-top: 1px solid #e5e7eb;
            font-size: 13px;
            color: #4f46e5;
        }
        .clear {
            clear: both;
        }
        .footer {
            margin-top: 60px;
            text-align: center;
            border-top: 1px solid #e5e7eb;
            padding-top: 20px;
            font-size: 10px;
            color: #9ca3af;
        }
    </style>
</head>
<body>

<div class="invoice-box">
    <!-- Header -->
    <table class="header-table">
        <tr>
            <td>
                <div class="logo">Sawdabazar</div>
                <div class="store-info">
                    <strong>Sawdabazar E-Commerce Ltd.</strong><br>
                    House 12, Road 5, Banani, Dhaka-1213, Bangladesh<br>
                    Phone: +880 1712-345678 | Email: support@sawdabazar.com
                </div>
            </td>
            <td class="invoice-details">
                <div class="invoice-title">Invoice</div>
                <div><strong>Order ID:</strong> #{{ $order->order_number }}</div>
                <div><strong>Date:</strong> {{ $order->created_at->format('M j, Y h:i A') }}</div>
                <div><strong>Payment Method:</strong> {{ strtoupper($order->payment_method) }}</div>
                <div>
                    @if(strtolower($order->payment_status) === 'paid')
                        <span class="badge badge-paid">Paid</span>
                    @elseif(strtolower($order->payment_status) === 'refunded')
                        <span class="badge badge-refunded">Refunded</span>
                    @else
                        <span class="badge badge-unpaid">Unpaid</span>
                    @endif
                </div>
            </td>
        </tr>
    </table>

    <!-- Addresses -->
    <table class="addresses-table">
        <tr>
            <td>
                <div class="section-title">Bill To</div>
                <div class="address-box">
                    <strong>{{ $order->customer_name }}</strong><br>
                    @if($order->customer_email)
                        Email: {{ $order->customer_email }}<br>
                    @endif
                    Phone: {{ $order->customer_phone }}<br>
                    {!! nl2br(e($order->billing_address ?? $order->shipping_address)) !!}
                </div>
            </td>
            <td>
                <div class="section-title">Ship To</div>
                <div class="address-box">
                    <strong>{{ $order->customer_name }}</strong><br>
                    Phone: {{ $order->customer_phone }}<br>
                    {!! nl2br(e($order->shipping_address)) !!}
                </div>
            </td>
        </tr>
    </table>

    <!-- Items Table -->
    <table class="items-table">
        <thead>
            <tr>
                <th style="width: 50%;">Product Details</th>
                <th style="width: 15%;">SKU</th>
                <th style="width: 15%; text-align: right;">Unit Price</th>
                <th style="width: 10%; text-align: center;">Qty</th>
                <th style="width: 10%; text-align: right;">Total</th>
            </tr>
        </thead>
        <tbody>
            @foreach($order->items as $item)
                <tr>
                    <td>
                        <strong>{{ $item->product_name }}</strong>
                        @if($item->variant?->options)
                            <div style="font-size: 9px; color: #6b7280; margin-top: 3px;">
                                @foreach($item->variant->options as $key => $value)
                                    {{ $key }}: {{ $value }}{{ !$loop->last ? ' | ' : '' }}
                                @endforeach
                            </div>
                        @endif
                    </td>
                    <td>{{ $item->product_sku }}</td>
                    <td class="price-col">৳{{ number_format($item->price, 2) }}</td>
                    <td style="text-align: center;">{{ $item->quantity }}</td>
                    <td class="price-col">৳{{ number_format($item->price * $item->quantity, 2) }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Summary -->
    <div class="summary-wrapper">
        <div class="summary-right">
            <table class="summary-table">
                <tr>
                    <td class="label">Subtotal:</td>
                    <td class="value">৳{{ number_format($order->subtotal, 2) }}</td>
                </tr>
                <tr>
                    <td class="label">Shipping Cost:</td>
                    <td class="value">৳{{ number_format($order->shipping_cost, 2) }}</td>
                </tr>
                @if($order->tax > 0)
                <tr>
                    <td class="label">VAT/Tax:</td>
                    <td class="value">৳{{ number_format($order->tax, 2) }}</td>
                </tr>
                @endif
                @if($order->discount > 0)
                <tr>
                    <td class="label">{{ $order->is_exchange ? 'Returned value:' : 'Discount:' }}</td>
                    <td class="value">-৳{{ number_format($order->discount, 2) }}</td>
                </tr>
                @endif
                <tr class="total">
                    <td class="label" style="font-weight: bold; color: #111111;">Grand Total:</td>
                    <td class="value" style="font-size: 14px;">৳{{ number_format($order->grand_total, 2) }}</td>
                </tr>
            </table>
        </div>
        <div class="clear"></div>
    </div>

    <!-- Notes if exist -->
    @if($order->notes)
        <div style="margin-top: 20px;">
            <div class="section-title">Customer Note</div>
            <div style="font-size: 11px; color: #4b5563; padding: 8px; background-color: #f9fafb; border-radius: 4px;">
                {{ $order->notes }}
            </div>
        </div>
    @endif

    <!-- Footer -->
    <div class="footer">
        Thank you for your purchase from Sawdabazar!<br>
        This is a system-generated electronic invoice. No signature is required.<br>
        For return policies and customer support, please visit www.sawdabazar.com or call +880 1712-345678.
    </div>
</div>

</body>
</html>
