<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rótulo {{ $rotulo->codigo_rotulo }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * { box-sizing: border-box; }

        body {
            background: #f1f5f9;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #111827;
            margin: 0;
            padding: 16px;
        }

        /* ── Label card ─────────────────────────────────── */
        .label-card {
            background: #fff;
            border: 2px solid #1e293b;
            border-radius: 6px;
            padding: 14px 16px;
            margin: 0 auto;
            page-break-inside: avoid;
        }

        /* Format sizing */
        .fmt-10x15   .label-card { width: 378px;  min-height: 567px; }
        .fmt-media-carta .label-card { width: 612px; min-height: 396px; }
        .fmt-carta   .label-card { width: 612px;  min-height: 792px; }
        .fmt-termica .label-card { width: 284px;  min-height: 340px; font-size: 11px; }

        /* ── Header stripe ────────────────────────────── */
        .label-header {
            background: #1e293b;
            color: #fff;
            border-radius: 3px;
            padding: 6px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .label-header .numero { font-size: 15px; font-weight: 700; letter-spacing: .5px; }
        .label-header .empresa { font-size: 10px; opacity: .7; }

        /* ── Address blocks ───────────────────────────── */
        .address-block {
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            padding: 8px 10px;
            margin-bottom: 8px;
        }
        .address-block .section-label {
            text-transform: uppercase;
            font-size: 9px;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 1px;
            margin-bottom: 3px;
        }
        .address-block .name { font-size: 14px; font-weight: 700; }
        .address-block .detail { font-size: 11px; color: #374151; margin-top: 1px; }

        /* Destination gets a thicker border + accent */
        .address-dest { border-color: #1e293b; border-width: 2px; }
        .address-dest .section-label { color: #1d4ed8; }
        .address-dest .name { font-size: 16px; }

        /* ── Content row ──────────────────────────────── */
        .content-row {
            display: flex;
            gap: 8px;
            font-size: 11px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .content-item { flex: 1; min-width: 80px; }
        .content-item .ci-label { font-size: 9px; text-transform: uppercase; color: #64748b; letter-spacing: .8px; }
        .content-item .ci-value { font-weight: 600; }

        /* ── Codes row ────────────────────────────────── */
        .codes-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-top: 8px;
            border-top: 1px dashed #cbd5e1;
        }
        .qr-block { text-align: center; }
        .qr-block img { width: 90px; height: 90px; display: block; }
        .qr-block .qr-label { font-size: 8px; color: #94a3b8; margin-top: 2px; }
        .barcode-block { flex: 1; text-align: center; }
        .barcode-block svg, .barcode-block img { max-width: 100%; height: 50px; }
        .barcode-block .code-text { font-family: monospace; font-size: 9px; color: #475569; margin-top: 2px; }

        /* ── Footer ───────────────────────────────────── */
        .label-footer {
            text-align: right;
            font-size: 8px;
            color: #94a3b8;
            margin-top: 6px;
        }

        /* ── Print controls ────────────────────────────── */
        .print-controls {
            max-width: 760px;
            margin: 0 auto 16px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }

        @media print {
            body { background: #fff; padding: 0; }
            .print-controls { display: none !important; }
            .label-card { border-radius: 0; }

            @page {
                margin: 8mm;
            }
        }
    </style>
</head>
<body class="fmt-{{ str_replace('_', '-', $rotulo->formato) }}">

<div class="print-controls d-print-none">
    <div>
        <strong>Rótulo</strong> {{ $rotulo->codigo_rotulo }}
        <span class="badge bg-secondary ms-2">{{ $rotulo->formatoLabel() }}</span>
    </div>
    <button class="btn btn-primary btn-sm ms-auto" onclick="window.print()"><i class="bx bx-printer me-1"></i>Imprimir</button>
    <a class="btn btn-success btn-sm" href="{{ route('rotulos.pdf', $rotulo) }}"><i class="bx bxs-file-pdf me-1"></i>PDF</a>
    <a class="btn btn-light btn-sm" href="{{ route('envios.show', $envio) }}">Volver</a>
</div>

@php
    $snap = $rotulo->contenido_snapshot ?? [];
    $numero         = $snap['numero_envio'] ?? $envio->numero_envio;
    $destNombre     = $snap['destinatario_nombre'] ?? $envio->destinatario_nombre;
    $destTelefono   = $snap['destinatario_telefono'] ?? $envio->destinatario_telefono;
    $destDireccion  = $snap['destinatario_direccion'] ?? $envio->destinatario_direccion;
    $destCiudad     = $snap['destinatario_ciudad'] ?? $envio->destinatario_ciudad;
    $destDpto       = $snap['destinatario_departamento'] ?? $envio->destinatario_departamento;
    $destPais       = $snap['destinatario_pais'] ?? $envio->destinatario_pais;
    $remNombre      = $snap['remitente_nombre'] ?? $envio->remitente_nombre;
    $remTelefono    = $snap['remitente_telefono'] ?? $envio->remitente_telefono;
    $remDireccion   = $snap['remitente_direccion'] ?? $envio->remitente_direccion;
    $remCiudad      = $snap['remitente_ciudad'] ?? $envio->remitente_ciudad;
    $contenido      = $snap['descripcion_contenido'] ?? $envio->descripcion_contenido;
    $peso           = $snap['peso_kg'] ?? $envio->peso_kg;
    $valorDeclarado = $snap['valor_declarado'] ?? $envio->valor_declarado;
    $transportadora = $snap['transportadora'] ?? $envio->transportadora;
    $guia           = $snap['numero_guia'] ?? $envio->numero_guia;
@endphp

<div class="label-card">

    {{-- Header --}}
    <div class="label-header">
        <div>
            <div class="numero">{{ $numero }}</div>
            @if ($transportadora || $guia)
                <div class="empresa">{{ $transportadora }}{{ $transportadora && $guia ? ' · ' : '' }}{{ $guia }}</div>
            @endif
        </div>
        <div style="font-size:10px;opacity:.6">Veltrix POS</div>
    </div>

    {{-- DESTINATARIO --}}
    <div class="address-block address-dest">
        <div class="section-label">▸ Destinatario</div>
        <div class="name">{{ $destNombre }}</div>
        @if ($destTelefono)
            <div class="detail">📞 {{ $destTelefono }}</div>
        @endif
        <div class="detail">{{ $destDireccion }}</div>
        <div class="detail">{{ $destCiudad }}{{ $destDpto ? ', ' . $destDpto : '' }} — {{ $destPais }}</div>
    </div>

    {{-- REMITENTE --}}
    <div class="address-block">
        <div class="section-label">◂ Remitente</div>
        <div class="name" style="font-size:12px">{{ $remNombre }}</div>
        @if ($remTelefono)
            <div class="detail">📞 {{ $remTelefono }}</div>
        @endif
        @if ($remDireccion)
            <div class="detail">{{ $remDireccion }}{{ $remCiudad ? ', ' . $remCiudad : '' }}</div>
        @endif
    </div>

    {{-- Contenido --}}
    <div class="content-row">
        <div class="content-item">
            <div class="ci-label">Contenido</div>
            <div class="ci-value">{{ $contenido }}</div>
        </div>
        <div class="content-item">
            <div class="ci-label">Peso</div>
            <div class="ci-value">{{ number_format((float)$peso, 3) }} kg</div>
        </div>
        @if ($valorDeclarado)
            <div class="content-item">
                <div class="ci-label">Valor declarado</div>
                <div class="ci-value">${{ number_format((float)$valorDeclarado, 2) }}</div>
            </div>
        @endif
    </div>

    {{-- QR + Barcode --}}
    <div class="codes-row">
        @if ($rotulo->qr_data)
            <div class="qr-block">
                <img src="{{ $rotulo->qr_data }}" alt="QR">
                <div class="qr-label">Escanear para rastrear</div>
            </div>
        @endif
        @if ($rotulo->barcode_data)
            <div class="barcode-block">
                {!! $rotulo->barcode_data !!}
                <div class="code-text">{{ $rotulo->codigo_rotulo }}</div>
            </div>
        @endif
        @if (!$rotulo->qr_data && !$rotulo->barcode_data)
            <div class="text-muted" style="font-size:10px">{{ $rotulo->codigo_rotulo }}</div>
        @endif
    </div>

    <div class="label-footer">
        Generado {{ now()->format('d/m/Y H:i') }} · Veltrix POS
    </div>

</div>

</body>
</html>
