<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Comprobante de Retiro - {{ $order->order_reference }}</title>
    <style>
        @media print {
            .no-print { display: none !important; }
        }
        body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; font-size: 12px; margin: 24px; }
        h1 { font-size: 18px; margin: 0 0 8px; }
        .meta { margin-bottom: 16px; }
        .meta div { margin: 2px 0; }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; vertical-align: top; }
        th { background: #f5f5f5; text-align: left; }
        .right { text-align: right; }
        .copy { page-break-after: always; }
        .muted { color: #666; }
        .thumb { width: 52px; height: 52px; object-fit: contain; display: block; }
    </style>
</head>
<body>
    <div class="no-print" style="margin-bottom: 12px;">
        <button onclick="window.print()">Imprimir</button>
    </div>

    <h1>Comprobante de Retiro en Tienda</h1>

    <div class="meta">
        <div><strong>Pedido:</strong> {{ $order->order_reference }}</div>
        @if(filled($order->original_order_reference))
            <div class="muted"><strong>Orden original:</strong> {{ $order->original_order_reference }}</div>
        @endif
        <div><strong>Tienda:</strong> {{ $order->store_name ?? 'N/A' }}</div>
        @if(filled($pickupStoreName ?? null))
            <div><strong>Sucursal:</strong> {{ $pickupStoreName }}</div>
        @endif
        <div><strong>Fecha:</strong> {{ now()->format('d/m/Y H:i') }}</div>
        <div><strong>Cliente:</strong> {{ $customerName ?? $order->customer_name }}</div>
        <div><strong>Nombre de quien retira:</strong> {{ $pickupName }}</div>
    </div>

    <table>
        <thead>
            <tr>
                <th style="width: 70px;">Imagen</th>
                <th style="width: 140px;">SKU</th>
                <th>Producto</th>
                <th style="width: 80px;" class="right">Cantidad</th>
            </tr>
        </thead>
        <tbody>
        @foreach($details as $detail)
            <tr>
                <td>
                    @if(filled($detail->product_image_url ?? null))
                        <img class="thumb" src="{{ $detail->product_image_url }}" alt="{{ $detail->product_reference }}" />
                    @endif
                </td>
                <td>{{ $detail->product_reference }}</td>
                <td>{{ $detail->product_name }}</td>
                <td class="right">{{ $detail->product_quantity }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>

    <div style="margin-top: 18px;">
        <div><strong>Firma quien retira:</strong> _______________________________</div>
        <div style="margin-top: 8px;"><strong>Firma de quien entrega en tienda:</strong> _______________________________</div>
    </div>
</body>
</html>
