{% extends 'base.html.twig' %}

{% block searchform_container %}{% endblock %}

{% block body %}

<style>

@media screen {

    body {
        background: #f5f5f5;
    }

    .barra-herramientas {
        padding: 15px;
        margin-bottom: 20px;
        background: #ffffff;
        border-bottom: 1px solid #ddd;
    }

}

@media print {

    @page {
        margin: 5mm;
    }

    body {
        background: #ffffff;
        margin: 0;
        padding: 0;
    }

    .barra-herramientas {
        display: none !important;
    }

    .no-imprimir {
        display: none !important;
    }

    .etiqueta {
        page-break-inside: avoid;
    }

}

.barra-herramientas {

    text-align: right;

}

.contenedor-etiquetas {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

}

.etiqueta {

    width: 260px;

    min-height: 125px;

    margin: 8px;

    padding: 8px;

    border: 1px solid #000;

    background: #fff;

    text-align: center;

    box-sizing: border-box;

}

.etiqueta-nombre {

    font-size: 13px;

    font-weight: bold;

    margin-bottom: 3px;

}

.etiqueta-barcode {

    width: 100%;

    height: 55px;

}

.etiqueta-codigo {

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1px;

    margin-top: 2px;

}

.etiqueta-precio {

    font-size: 16px;

    font-weight: bold;

    margin-top: 3px;

}

.etiqueta-descripcion {

    font-size: 10px;

    margin-top: 3px;

    max-height: 28px;

    overflow: hidden;

}


 /* Ocultar footer de FACTECU */
    #ft {
        display: none !important;
    }
    
    /* Ocultar "Conectados" solamente al imprimir */
    li:has(#usuarios-online) {
        display: none !important;
    }

</style>


<div class="barra-herramientas">

    <a
        href="{{ path('inventario_codigos_barras') }}"
        class="btn btn-default"
    >

        <span class="glyphicon glyphicon-arrow-left"></span>

        VOLVER A SELECCIÓN

    </a>


    <button
        type="button"
        class="btn btn-primary"
        onclick="window.print();"
    >

        <span class="glyphicon glyphicon-print"></span>

        IMPRIMIR

    </button>

</div>


<div class="container-fluid">

    <div class="contenedor-etiquetas">

        {% for producto in productos %}

            <div class="etiqueta">

                <div class="etiqueta-nombre">

                    {{ producto.nombre }}

                </div>


                <svg
                    class="etiqueta-barcode"
                    data-code="{{ producto.codigo|e('html_attr') }}"
                ></svg>


                <div class="etiqueta-codigo">

                    {{ producto.codigo }}

                </div>


                <div class="etiqueta-precio">

                    $ {{ producto.precio|number_format(
                        2,
                        '.',
                        ','
                    ) }}

                </div>


                {% if producto.descripcion %}

                    <div class="etiqueta-descripcion">

                        {{ producto.descripcion }}

                    </div>

                {% endif %}

            </div>

        {% endfor %}

    </div>

</div>


{#
   JsBarcode:
   Code 128 permite códigos numéricos y alfanuméricos.
#}

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>


<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {

        var barcodes =
            document.querySelectorAll(
                '.etiqueta-barcode'
            );

        barcodes.forEach(function (barcode) {

            var codigo =
                barcode.getAttribute('data-code');

            if (!codigo) {
                return;
            }

            JsBarcode(
                barcode,
                codigo,
                {
                    format: 'CODE128',

                    displayValue: false,

                    lineColor: '#000000',

                    background: '#ffffff',

                    width: 2,

                    height: 55,

                    margin: 0
                }
            );

        });

    }
);

</script>



{% endblock %}