<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Processing Order List</title>
    <style>
        @page {
            size: A4 landscape;
            margin: 8mm;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: #fff;
            color: #000;
            font-family: DejaVu Sans, Arial, sans-serif;
            font-size: 10px;
            line-height: 1.35;
        }

        .report-page {
            width: 100%;
        }

        .report-header {
            text-align: center;
            margin-bottom: 10px;
        }

        .shop-name {
            font-size: 18px;
            font-weight: 700;
            margin: 0 0 2px;
        }

        .report-title {
            font-size: 14px;
            font-weight: 700;
            margin: 0 0 6px;
        }

        .meta-row {
            display: flex;
            justify-content: center;
            gap: 20px;
            font-size: 10px;
        }

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

        th,
        td {
            border: 1px solid #000;
            padding: 5px 4px;
            vertical-align: top;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        th {
            text-align: left;
            font-weight: 700;
            background: #f3f3f3;
        }

        .col-sl { width: 4%; text-align: center; }
        .col-order { width: 9%; }
        .col-name { width: 12%; }
        .col-phone { width: 10%; }
        .col-address { width: 24%; }
        .col-product { width: 23%; }
        .col-qty { width: 6%; text-align: center; }
        .col-note { width: 12%; }

        .line {
            margin: 0 0 3px;
        }

        .line:last-child {
            margin-bottom: 0;
        }

        .variation {
            font-size: 9px;
        }

        @media print {
            html,
            body {
                width: 297mm;
                min-height: 210mm;
                margin: 0;
                padding: 0;
            }

            .no-print {
                display: none !important;
            }
        }
    </style>
</head>
<body>
<main class="report-page">
    <div class="report-header">
        <h1 class="shop-name">Ammar Online Shop</h1>
        <h2 class="report-title">Processing Order List</h2>
        <div class="meta-row">
            <span><strong>Print Date:</strong> {{ $printDate }}</span>
            <span><strong>Order Status:</strong> Processing</span>
        </div>
    </div>

    <table>
        <thead>
        <tr>
            <th class="col-sl">SL</th>
            <th class="col-order">Order/Invoice No</th>
            <th class="col-name">Customer Name</th>
            <th class="col-phone">Phone Number</th>
            <th class="col-address">Customer Address</th>
            <th class="col-product">Product Name</th>
            <th class="col-qty">Product Qty</th>
            <th class="col-note">Customer Note</th>
        </tr>
        </thead>
        <tbody>
        @foreach($reportRows as $index => $row)
            <tr>
                <td class="col-sl">{{ $index + 1 }}</td>
                <td class="col-order">{{ $row['order_no'] }}</td>
                <td class="col-name">{{ $row['customer_name'] }}</td>
                <td class="col-phone">{{ $row['phone'] ?: '-' }}</td>
                <td class="col-address">{{ $row['address'] ?: '-' }}</td>
                <td class="col-product">
                    @foreach($row['items'] as $item)
                        <div class="line">
                            {{ $item['name'] }}
                            @if(!empty($item['variation']))
                                <div class="variation">{{ $item['variation'] }}</div>
                            @endif
                        </div>
                    @endforeach
                </td>
                <td class="col-qty">
                    @foreach($row['items'] as $item)
                        <div class="line">{{ $item['quantity'] }}</div>
                    @endforeach
                </td>
                <td class="col-note">{{ $row['note'] ?: '-' }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
</main>

@if(!empty($autoPrint) && empty($pdfMode))
    <script>
        window.addEventListener('load', function () {
            window.print();
        });
    </script>
@endif
</body>
</html>
