help_desk/views/admin/etiqueta_qr.ejs

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etiqueta QR - <%= set.nombre %> | Telcotronics</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f1f5f9;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            color: #0f172a;
            padding-bottom: 3rem;
        }
        .action-bar {
            background-color: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        /* Contenedor Etiqueta Adhesiva / Sticker */
        .label-sticker {
            width: 100%;
            max-width: 460px;
            background: #ffffff;
            border: 2px solid #0f172a;
            border-radius: 12px;
            padding: 1.25rem;
            margin: 2rem auto;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        .label-header {
            border-bottom: 2px solid #0f172a;
            padding-bottom: 0.65rem;
            margin-bottom: 0.75rem;
            text-align: center;
        }
        .qr-wrapper {
            background: #ffffff;
            padding: 0.5rem;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            display: inline-block;
        }
        .qr-image {
            width: 190px;
            height: 190px;
            display: block;
        }
        .tools-box {
            background: #f8fafc;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            font-size: 0.76rem;
            margin-top: 0.75rem;
        }
        @media print {
            body {
                background: #ffffff !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            .no-print {
                display: none !important;
            }
            .label-sticker {
                box-shadow: none !important;
                border: 2px solid #000000 !important;
                margin: 0 auto !important;
                max-width: 100% !important;
                width: 95mm !important; /* Estándar térmico / sticker */
                padding: 4mm !important;
                page-break-inside: avoid !important;
            }
            .qr-image {
                width: 48mm !important;
                height: 48mm !important;
            }
            .tools-box {
                background: #ffffff !important;
                border: 1px solid #000000 !important;
                font-size: 8pt !important;
            }
        }
    </style>
</head>
<body>

    <!-- Barra de Acciones (No se imprime) -->
    <div class="action-bar no-print">
        <div class="container d-flex flex-wrap align-items-center justify-content-between gap-2" style="max-width: 700px;">
            <div class="d-flex align-items-center gap-2">
                <a href="/admin/herramientas" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i> Volver
                </a>
                <span class="fw-bold small text-muted">Impresión de Etiqueta QR</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <a href="<%= scanUrl %>" target="_blank" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-mobile-screen me-1"></i> Probar Escaneo
                </a>
                <button type="button" class="btn btn-dark btn-sm fw-bold px-3 shadow-sm" onclick="window.print()">
                    <i class="fas fa-print me-1.5"></i> Imprimir Etiqueta
                </button>
            </div>
        </div>
    </div>

    <!-- Etiqueta QR para pegar en la Caja de Herramientas -->
    <div class="container" style="max-width: 700px;">
        <div class="label-sticker">
            <!-- Cabecera -->
            <div class="label-header">
                <div class="d-flex align-items-center justify-content-center gap-1.5 mb-1">
                    <i class="fas fa-toolbox text-dark fs-6"></i>
                    <strong class="text-uppercase" style="letter-spacing: 1.5px; font-size: 0.85rem;">
                        <%= set.company_name || 'TELCOTRONICS' %>
                    </strong>
                </div>
                <div class="text-muted fw-bold text-uppercase" style="font-size: 0.65rem; letter-spacing: 0.5px;">
                    Control de Equipamiento & Kits FSM
                </div>
            </div>

            <!-- Identificación del Kit -->
            <div class="text-center mb-2.5">
                <h2 class="h5 fw-bold text-dark mb-0"><%= set.nombre %></h2>
                <div class="d-flex align-items-center justify-content-center gap-2 mt-1">
                    <span class="badge bg-dark font-monospace px-2 py-1" style="font-size: 0.75rem;">
                        <%= set.codigo || 'KIT-' + set.id %>
                    </span>
                    <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">
                        <%= set.categoria %>
                    </span>
                </div>
            </div>

            <!-- Código QR Central -->
            <div class="text-center mb-2">
                <div class="qr-wrapper shadow-sm">
                    <img src="<%= qrDataUrl %>" alt="Código QR" class="qr-image">
                </div>
                <div class="text-uppercase fw-bold text-dark mt-1" style="font-size: 0.68rem; letter-spacing: 0.8px;">
                    <i class="fas fa-camera me-1"></i> Escanear para lista y custodia
                </div>
            </div>

            <!-- Resumen de Herramientas Incluidas en la Caja -->
            <div class="tools-box">
                <div class="d-flex align-items-center justify-content-between fw-bold text-dark border-bottom pb-1 mb-1" style="font-size: 0.72rem;">
                    <span><i class="fas fa-list-check me-1"></i> Contenido de la Caja:</span>
                    <span><%= herramientas.length %> ítems</span>
                </div>
                <ul class="list-unstyled mb-0" style="line-height: 1.35;">
                    <% if (herramientas.length === 0) { %>
                        <li class="text-muted fst-italic">Sin herramientas asignadas</li>
                    <% } %>
                    <% herramientas.forEach((h, i) => { %>
                    <li class="text-truncate">
                        <strong><%= i + 1 %>.</strong> <%= h.nombre %>
                        <% if (h.marca) { %><span class="text-muted">(<%= h.marca %>)</span><% } %>
                        <% if (h.numero_serie) { %><span class="font-monospace text-dark fw-semibold">• SN: <%= h.numero_serie %></span><% } %>
                    </li>
                    <% }) %>
                </ul>
            </div>

            <!-- Pie de Etiqueta con Enlace -->
            <div class="text-center mt-2 pt-1">
                <div class="font-monospace text-muted small" style="font-size: 0.65rem;">
                    <%= scanUrl %>
                </div>
            </div>
        </div>

        <!-- Instrucciones (No se imprimen) -->
        <div class="no-print text-center text-muted small mt-2" style="max-width: 460px; margin: 0 auto;">
            <i class="fas fa-info-circle me-1 text-primary"></i> 
            <strong>Tip:</strong> Puedes imprimir esta etiqueta en papel adhesivo o impresora térmica y pegarla en la tapa exterior o interior de la caja de herramientas. Al escanear el QR con cualquier teléfono se abrirá el manifiesto con el checklist de verificación.
        </div>
    </div>

</body>
</html>