<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $barcode }}</title>
    <style>
        body {
            text-align: center;
            margin-top: 50px;
            font-family: Arial, sans-serif;
        }

        .main-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .logo-phone {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .logo-phone img {
            max-height: 80px;
        }

        .phones {
            text-align: center;
            font-size: 14px;
        }

        .barcode-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .barcode-container img {
            max-width: 300px;
            height: auto;
            margin-bottom: 10px;
        }

        .barcode-text {
            font-size: 12px;
            font-weight: bold;
            margin-top: 2px;
            letter-spacing: 5px;
        }

        @media print {
            body {
                margin: 0;
                padding: 0;
                font-size: 12px;
            }

            .main-container {
                flex-wrap: nowrap;
                gap: 9px;
            }

            .logo-phone img {
                max-height: 60px;
            }

            .phones {
                font-size: 12px;
            }

            .barcode-text {
                font-size: 14px;
                letter-spacing: 5px;
            }
        }
    </style>
    <script>
        window.onload = function() {
            var barcodeName = "{{ $barcode }}";
            var barcodeImage = document.querySelector("img[src^='data:image']").src;

            var link = document.createElement('a');
            link.href = barcodeImage;
            link.download = barcodeName + ".png";
            link.click();

            window.print();


            // Volver después de 2 segundos
            setTimeout(function() {
                window.history.back();
            }, 2000);
        }
    </script>
</head>

<body>

    <div class="main-container">
        <!-- Lado izquierdo: Logo y teléfonos -->
        <div class="logo-phone">
            <img src="{{ asset('logo_etiqueta/logo1.png') }}" alt="Logo "
                style=" width: 100px; height=auto; margin:8px">
            <div class="phones">
                <div style="font-size: 11px">+57 317 466 1380</div>
            </div>
        </div>

        <!-- Lado derecho: Código de barras -->
        <div class="barcode-container">
            <div style="margin: 10px">{{ $nombreProducto ?? '' }}</div>
            <img src="data:image/png;base64,{{ $barcodeImage }}" alt="Código de Barras">
            <p class="barcode-text">{{ $barcode }}</p>
        </div>
    </div>

</body>

</html>
