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

{% block title %}Detalle Factura{% endblock %}

{% block contenido %}
<main>
    <div class="container-fluid p-0">
        <div class="row justify-content-center mt-4 ">
            <div class="col-10 text-left" style="font-size: 24px">
                <i class="fas fa-list-ul text-danger"></i><span class="text-danger"> Detalle Factura</span>
            </div>
        </div>
        <div class="row justify-content-center mt-3">
            <div class="col-10">
                <div id="grid"></div>
                <div class="mt-3 mb-3 text-left">
                    <a href="{{ path('default_erp_facturas_index',{'fecDesde':fecDesde, 'fecHasta':fecHasta}) }}" >
                        <button type="button" class="btn btn-warning">
                            <i class="fas fa-undo-alt"></i> Volver
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>
    <!-- Modal -->
    <div class="modal fade" id="procesando" tabindex="-1" role="dialog" aria-labelledby="procesando" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body p-5">
                    <button class="btn btn-warning w-100 text-danger" type="button" disabled style="opacity: 1; color: red !important; font-size: 16px">
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        Procesando...
                    </button>
                </div>

            </div>
        </div>
    </div>
    <script>
        var detalle = {{ detalle|json_encode|raw }};
        console.log(detalle);
        $(document).ready(function () {
            var source =
                {
                    localdata: detalle,
                    datafields:
                        [
                            { name: 'id', type: 'string' },
                            { name: 'facId', map: 'facturas>id', type: 'string' },
                            { name: 'itemId', type: 'string' },
                            { name: 'description', type: 'string' },
                            { name: 'description2', type: 'string' },
                            { name: 'quantity', type: 'string' },
                            { name: 'unitPrice', type: 'string' },
                            { name: 'regEstado', type: 'string' },
                        ],
                    datatype: "array",
                    pagesize: 25,
                };

            var opciones = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var result = '<div class="row h-100 w-100 m-0 align-items-center"><div class="col-12 text-center">';
                if(rowdata.regEstado == 'REGISTRADA'){
                    result += '<a href="{{ path('distribucion_add_facturas',{'regId':'docId1', 'fecDesde': fecDesde, 'fecHasta': fecHasta}) }}" onclick="$(\'#procesando\').modal(\'show\');"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-2x fa-search-plus text-success"></i></button></a>';
                }else{
                    result += '<a href="{{ path('distribucion_remove_facturas',{'facId': 'docId2', 'regId':'docId1','fecDesde': fecDesde, 'fecHasta': fecHasta}) }}" onclick="$(\'#procesando\').modal(\'show\');"<button type="button" class="btn btn-white btn-sm"><i class="fas fa-2x fa-undo text-danger"></i></button></a>';
                }
                if(rowdata.regEstado == 'PARCIAL'){
                    result += '<a href="{{ path('distribucion_add_facturas',{'regId':'docId3', 'fecDesde': fecDesde, 'fecHasta': fecHasta}) }}" onclick="$(\'#procesando\').modal(\'show\');"><button type="button" class="btn btn-white btn-sm"><i class="fas fa-2x fa-search-plus text-success"></i></button></a>';
                }else{
//                    result += '<a href="{{ path('distribucion_remove_facturas',{'facId': 'docId2', 'regId':'docId1','fecDesde': fecDesde, 'fecHasta': fecHasta}) }}" onclick="$(\'#procesando\').modal(\'show\');"<button type="button" class="btn btn-white btn-sm"><i class="fas fa-2x fa-undo text-danger"></i></button></a>';
                }
                result += '</div>';
                result = result.replace('docId1', rowdata.id)
                result = result.replace('docId3', rowdata.id)
                return result.replace('docId2', rowdata.facId);
            }

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    pageable: true,
                    autoheight: true,
                    rowsheight: 40,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'multiplecellsextended',
                    columns: [
                        { text: '{% trans %}ItemId{% endtrans %}', columntype: 'checkedlist', filtertype: 'checkedlist', datafield: 'itemId', width: '10%', hidden: true },
                        { text: '{% trans %}Nombre Producto{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'description', width: '15%' },
                        { text: '{% trans %}Descripción Producto{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'description2', width: '20%' },
                        { text: '{% trans %}Cantidad{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'quantity', width: '15%' },
                        { text: '{% trans %}Precio{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'unitPrice', width: '10%' },
                        { text: '{% trans %}Estado{% endtrans %}', columntype: 'checkedlist', filtertype: 'checkedlist', datafield: 'regEstado', width: '25%' },
                        { text: '{% trans %}Opciones{% endtrans %}', filterable:false, datafield: 'OPC', width: '15%', cellsrenderer: opciones, cellsalign: 'center', align: 'center' }
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();
        });
    </script>
{% endblock %}