<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        @page {
            margin: 0;
        }

        body {
            margin: 0;
            padding: 0;
            /* font-family: "Arial Narrow", "DejaVu Sans", sans-serif; */
        }

        .sticker {
            width: 170pt;
            height: 40pt;
            overflow: hidden;
        }

        .sticker:last-child {
            page-break-after: auto;
        }

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

        td {
            padding: 0;
            margin: 0;
            vertical-align: top;
        }

        .qr {
            width: 35pt;
            height: 35pt;
            padding-top: 3pt;
            padding-left: 4pt;
        }

        /* .text {
            padding-left: 5pt;
        } */

        .text {
            position: relative;
            padding-left: 5pt;
        }

        /* .serial {
            font-size: 10pt;
            font-weight: bold;
            margin-top: 6pt;
        } */

        .serial {
            font-size: 8pt;
            font-weight: bold;
            position: relative;
            top: 8pt;
            right: 6pt;
        }

        /* .po {
            font-size: 8pt;
            margin-bottom: 6pt;
            margin-left: 75pt;
        } */

        .po {
            font-size: 8pt;
            font-weight: bold;
            text-align: left !important;
            position: absolute;
            right: 5pt;
            top: 8pt;
        }

        .po-long {
            font-size: 8pt;
            font-weight: bold;
            text-align: left !important;
            position: absolute;
            right: 5pt;
            top: 8pt;
            width: 45pt;
        }

        /* .desc {
            font-size: 6pt;
            margin-left: -5pt;
            font-weight: bold;
            padding-top: 10pt;
        } */
        .desc {
            font-family: "Arial Narrow";
            font-size: 7pt;
            font-weight: bold;
            letter-spacing: -0.3px;
            white-space: nowrap;
            padding-top: 15pt;
            margin-left: -5pt;
            overflow: hidden;
        }
    </style>
</head>
<body>

@foreach($stickers as $sticker)
    <div class="sticker">
        <table>
            <tr>
                <td style="width:40pt;">
                    <img class="qr" src="{{ $sticker['qr'] }}">
                </td>
                <td class="text">
                    <div class="serial">{{ $sticker['serial'] }}</div>
                    {{-- <div class="po">{{ $sticker['production_order'] }}</div> --}}
                    <div class="{{ strlen($sticker['serial']) > 14 ? 'po-long' : 'po' }}">
                        {{ $sticker['production_order'] }}
                    </div>
                    <div class="desc">{{ $sticker['description'] }}</div>
                </td>
            </tr>
        </table>
    </div>
@endforeach

</body>
</html>
