{% extends "base.html.twig" %}
{% trans_default_domain 'core' %}

{% block actionheader %}
{% endblock %}

{% block searchform_container %}
{% endblock %}

{% block body %}

<div class="clearfix" style="margin-bottom:20px;">

    <div class="pull-left">

        <h3 style="margin-top:10px;">

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

            IMPRIMIR CÓDIGOS DE BARRAS

        </h3>

    </div>

    <div class="pull-right" style="margin-top:10px;">

        <a
            href="{{ path('product_index') }}"
            class="btn btn-default"
            style="
                font-size:14px;
                font-weight:bold;
                padding:9px 16px;
                border-radius:5px;
                border:1px solid #999;
                box-shadow:0 2px 4px rgba(0,0,0,0.20);
            "
        >

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

            VOLVER A LISTA

        </a>

    </div>

</div>


<div class="alert alert-info">

    <span class="glyphicon glyphicon-info-sign"></span>

    Seleccione los productos que desea imprimir e indique la cantidad de etiquetas.

    El código de barras utilizará el código de producto.

</div>


<form
    method="post"
    action="{{ path('inventario_generar_codigos_barras') }}"
    id="form-codigos-barras"
>

    <input
        type="hidden"
        name="_token"
        value="{{ csrf_token('inventario_codigos_barras') }}"
    >


    <div class="clearfix" style="margin-bottom:15px;">

        <button
            type="button"
            id="seleccionar-todos"
            class="btn btn-success"
            style="
                font-weight:bold;
                margin-right:8px;
            "
        >

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

            SELECCIONAR TODOS

        </button>


        <button
            type="button"
            id="deseleccionar-todos"
            class="btn btn-warning"
            style="
                font-weight:bold;
            "
        >

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

            DESELECCIONAR TODOS

        </button>

    </div>


    <div class="table-responsive">

        <table class="table table-bordered table-striped table-hover">

            <thead>

                <tr>

                    <th style="width:70px; text-align:center;">
                        SELECCIONAR
                    </th>

                    <th style="width:150px;">
                        CÓDIGO
                    </th>

                    <th>
                        PRODUCTO
                    </th>

                    <th style="width:130px; text-align:right;">
                        PRECIO
                    </th>

                    <th style="width:150px; text-align:center;">
                        CANTIDAD
                    </th>

                </tr>

            </thead>

            <tbody>

                {% for item in productos %}

                    {% set producto = item.product %}

                    <tr>

                        <td style="text-align:center; vertical-align:middle;">

                            <input
                                type="checkbox"
                                class="producto-check"
                                name="productos[{{ producto.id }}][seleccionado]"
                                value="1"
                                data-id="{{ producto.id }}"
                                style="
                                    width:20px;
                                    height:20px;
                                    cursor:pointer;
                                "
                            >

                        </td>


                        <td style="vertical-align:middle;">

                            <strong>
                                {{ producto.reference }}
                            </strong>

                        </td>


                        <td style="vertical-align:middle;">

                            {{ producto.description }}

                        </td>


                        <td style="text-align:right; vertical-align:middle;">

                            {{ producto.price }}

                        </td>


                        <td style="text-align:center; vertical-align:middle;">

                            <input
                                type="number"
                                name="productos[{{ producto.id }}][cantidad]"
                                class="form-control cantidad-producto"
                                data-id="{{ producto.id }}"
                                value="1"
                                min="1"
                                disabled
                                style="
                                    text-align:center;
                                    font-weight:bold;
                                "
                            >

                        </td>

                    </tr>

                {% else %}

                    <tr>

                        <td
                            colspan="5"
                            class="text-center"
                            style="padding:30px;"
                        >

                            <span class="glyphicon glyphicon-info-sign"></span>

                            No existen productos con inventario registrado.

                        </td>

                    </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>


    <div
        class="text-right"
        style="
            margin-top:20px;
            padding-top:15px;
            border-top:1px solid #ddd;
        "
    >

        <button
            type="submit"
            class="btn btn-primary btn-lg"
            id="btn-generar"
            style="
                font-weight:bold;
                padding-left:25px;
                padding-right:25px;
            "
        >

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

            GENERAR CÓDIGOS DE BARRAS

        </button>

    </div>

</form>


<script>

$(function () {

    /*
     * Activar/desactivar cantidad
     */
    $('.producto-check').on('change', function () {

        var id = $(this).data('id');

        var cantidad = $('.cantidad-producto[data-id="' + id + '"]');

        if ($(this).is(':checked')) {

            cantidad.prop('disabled', false);

            cantidad.focus();

        } else {

            cantidad.prop('disabled', true);

        }

    });


    /*
     * Seleccionar todos
     */
    $('#seleccionar-todos').on('click', function () {

        $('.producto-check').each(function () {

            $(this).prop('checked', true);

            var id = $(this).data('id');

            $('.cantidad-producto[data-id="' + id + '"]')
                .prop('disabled', false);

        });

    });


    /*
     * Deseleccionar todos
     */
    $('#deseleccionar-todos').on('click', function () {

        $('.producto-check').each(function () {

            $(this).prop('checked', false);

            var id = $(this).data('id');

            $('.cantidad-producto[data-id="' + id + '"]')
                .prop('disabled', true);

        });

    });


    /*
     * Validar que al menos exista un producto seleccionado
     */
    $('#form-codigos-barras').on('submit', function (e) {

        var seleccionados = $('.producto-check:checked').length;

        if (seleccionados === 0) {

            e.preventDefault();

            alert('Debe seleccionar al menos un producto.');

            return false;
        }

    });

});

</script>

{% endblock %}