@extends('layouts.default')
@section('scripts')
    {{ Jqgrid::scripts() }}

    <script type="text/javascript">
        $(document).ready(function() {
            var id = '{{{ $id }}}';

            $('#jqgrid').jqGrid({
                url: '{{{ url("etiquetas/datagrid") }}}' + '/' + id,
                colModel: {{ Jqgrid::js_colmodel() }},
                gridComplete: function() {
                    $.jgrid.defaults.gridComplete();
                    $('#btn_editar>div.btn').addClass('disabled'); // deshabilita boton editar
                    $('#btn_eliminar>div.btn').addClass('disabled'); // deshabilita boton eliminar
                },
                onSelectRow: function(row_id) {
                    row_data = $("#jqgrid").getRowData(row_id);
                    $('#btn_editar>div.btn').removeClass('disabled'); //habilita boton editar
                    $('#etiquetas_editar_id').val(row_data['Id']); // setear id familia
                    $('#btn_eliminar>div.btn').removeClass('disabled'); //habilita boton eliminar
                    $('#etiquetas_eliminar_id').val(row_data['Id']); // setear id familia
                },
                sortname: 'Id',
            });

            $('#jqgrid').setColProp('Fecha', {searchoptions: {dataInit: dataInit}});
            $('#jqgrid').jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});


            // Botones
            $('#jqgrid').jqGrid('navGrid', '#jqgrid_pager', {add: false, edit: false, del: false, search: false});

            @if(can('familias_agregar'))
            // botón agregar
            $('#jqgrid').jqGrid('navButtonAdd', '#jqgrid_pager', {caption: '', buttonicon: 'fa fa-plus',
                onClickButton: function() {
                    $('#familias_agregar_modal').modal('show');
                },
                position: 'last', title: 'Agregar familia', cursor: 'pointer', id: 'btn_agregar'}
            );

            // form agregar
            $('#familias_agregar_form').ajaxForm({
                resetForm: true,
                success: function(response, statusText, xhr, $form) {
                    clean_form_errors($form);
                    $('#familias_agregar_modal').modal('hide');
                    success_notification(response);
                    //actualizo grid
                    $('#jqgrid').trigger('reloadGrid');
                },
                error: function(response, statusText, xhr, $form) {
                    clean_form_errors($form);
                    show_form_errors(response, $form);
                    error_notification(response);
                }
            });
            @endif

            @if(can('familias_editar'))
            // botón editar
            $('#jqgrid').jqGrid('navButtonAdd', '#jqgrid_pager', {caption: '', buttonicon: 'fa fa-pencil',
                onClickButton: function() {
                    if($('#btn_editar>div.btn').hasClass('disabled')) return false;
                    $('#familias_editar_form').formPopulate('{{ url("familias/obtener") }}');
                    $('#familias_editar_modal').modal('show');
                },
                position: 'last', title: 'Editar familias', cursor: 'pointer', id: 'btn_editar'}
            );

            // form editar
            $('#familias_editar_form').ajaxForm({
                resetForm: true,
                success: function(response, statusText, xhr, $form) {
                    clean_form_errors($form);
                    $('#familias_editar_modal').modal('hide');
                    success_notification(response);
                    //actualizo grid
                    $('#jqgrid').trigger('reloadGrid');
                },
                error: function(response, statusText, xhr, $form) {
                    clean_form_errors($form);
                    show_form_errors(response, $form);
                    error_notification(response);
                }
            });
            @endif

            @if(can('familias_eliminar'))
            // botón eliminar
            $('#jqgrid').jqGrid('navButtonAdd', '#jqgrid_pager', {caption: '', buttonicon: 'fa fa-trash-o',
                onClickButton: function() {
                    if($('#btn_eliminar>div.btn').hasClass('disabled')) return false;
                    $('#familias_eliminar_modal').modal('show');
                },
                position: 'last', title: 'Eliminar familias', cursor: 'pointer', id: 'btn_eliminar'}
            );

            // form eliminar
            $('#familias_eliminar_form').ajaxForm({
                resetForm: true,
                success: function(response, statusText, xhr, $form) {
                    clean_form_errors($form);
                    $('#familias_eliminar_modal').modal('hide');
                    success_notification(response);
                    //actualizo grid
                    $('#jqgrid').trigger('reloadGrid');
                },
                error: function(response, statusText, xhr, $form) {
                    clean_form_errors($form);
                    show_form_errors(response, $form);
                    error_notification(response);
                }
            });
            @endif

            // al cerrar modals, resetear form
            $('#familias_agregar_modal, #familias_editar_modal, #familias_eliminar_modal').on('hidden.bs.modal', function () {
                form = $(this).find('form').trigger('reset');
                clean_form_errors(form);
            });

			$(document).on('click', '#barra-impresora', function() {
                //Actualizamos variable jsonData

                var id_mp          = $('#id_imprimir').val();
				var btype          = 'code128';

//				JsBarcode("#itf", value.toString(), {format: "CODE128", displayValue: false});

                /* Lee etiqueta del lote */
                $.ajax({
                    url: "{{ url('etiquetas/leeLote') }}" + '/' + nreguist + '/' + numguia,
//                    data: {ncodart : nreguist, RUT : RUT, numguia : numguia},
                    type: 'get',
                    success: function ( response ) {
                        $codigoLoteHexa = response;
                        
                        var nreguist       = $('#nreguist2').html();
                        var codigoProducto = $('#codigoProductoPantalla2').html();
                        var nombreProducto = $('#nombreProductoPantalla2').html();
	        			var value          = $('#loteProductoPantalla2').html();
			         	var valueLote      = $codigoLoteHexa;
                        var fecha          = $(this).closest('tr').children()[2].textContent;
                        var vencim         = $(this).closest('tr').children()[3].textContent;

                        const img = document.querySelector('img#itf');
   				        $('#pdf_imprimir').html('');

                        var doc = new jsPDF("l", "mm", [100, 70]);
                        doc.setFontSize(12);
                        doc.addImage(img.src, 'JPEG', 5, 2, 95, 50);
                        doc.text( 5, 54, 'Código: '   + codigoProducto);
                        doc.text( 5, 58, 'Producto: ' + nombreProducto);
                        doc.text( 5, 62, 'Fecha: '    + fecha);
                        doc.text(45, 62, 'Vencim: '   + vencim);
                        doc.text( 5, 66, 'Lote:  '    + $codigoLoteHexa);
                        doc.autoPrint();

                        $('#pdf_imprimir').html('<embed type="application/pdf" src="'+doc.output('datauristring')+'" id="pdfDocument" width="100%" height="100%" />');
                    }
                })
            });

            /* Botón codigo de barras */
            $(document).on('click', 'button[name*="IMPRIMIR"]', function() {

                var numguia        = $(this).closest('tr').children()[1].textContent;
                var fecha          = $(this).closest('tr').children()[2].textContent;
                var vencim         = $(this).closest('tr').children()[3].textContent;
                var RUT            = $(this).closest('tr').children()[5].textContent;
                var nreguist       = $(this).closest('tr').children()[6].textContent;
                var codigo         = $(this).closest('tr').children()[7].textContent;
                var producto       = $(this).closest('tr').children()[8].textContent;
                var lote           = $(this).closest('tr').children()[9].textContent;

                //Actualizamos variable jsonData
				
                var itemString     = $(this).attr("name");
                var id_mp          = itemString.replace("IMPRIMIR_", "");
                var codigoProducto = $.trim(codigo);
                var nombreProducto = producto;
				var value          = lote;
				var valueLote      = nreguist+'/'+value;
				var btype          = 'code128';

				$('#id_imprimir').val(id_mp);

                const img = document.querySelector('img#itf');

                /* Lee etiqueta del lote */
                $.ajax({
                    url: "{{ url('etiquetas/leeLote') }}" + '/' + nreguist + '/' + numguia,
//                    data: {ncodart : nreguist, numguia : numguia},
                    type: 'get',
                    success: function ( response ) {
                        $ID             = response[0];
                        $codigoLoteHexa = response[1];

                        JsBarcode("#itf", $ID.toString(), {format: "CODE128", displayValue: false});

                        $('#nreguist2').html( nreguist);
                        $('#codigoProductoPantalla2').html(codigoProducto);
                        $('#nombreProductoPantalla2').html(nombreProducto);
                        $('#loteProductoPantalla2').html($codigoLoteHexa);


                        var doc = new jsPDF("l", "mm", [100, 70]);
                        doc.setFontSize(12);
                        doc.addImage(img.src, 'JPEG', 5, 2, 95, 50);
                        doc.text( 5, 54, 'Código: '   + codigoProducto);
                        doc.text( 5, 58, 'Producto: ' + nombreProducto);
                        doc.text( 5, 62, 'Fecha: '    + fecha);
                        doc.text(45, 62, 'Vencim: '   + vencim);
                        doc.text( 5, 66, 'Lote:  '    + $codigoLoteHexa);
                        doc.autoPrint();

                        $('#pdf_imprimir').html('<embed type="application/pdf" src="'+doc.output('datauristring')+'" id="pdfDocument" width="100%" height="100%" />');
                        $('#codigo_barras_modal').modal('show');
                    }
                })
		    });
            /* Botón codigo de barras */
            $(document).on('click', 'button[name*="TRAZABILIDAD"]', function() {

                // Toma los valores de la grilla
                var nreguist       = $(this).closest('tr').children()[6].textContent;
                var codigo         = $(this).closest('tr').children()[7].textContent;
                var nombreProducto = $(this).closest('tr').children()[8].textContent;
                var lote           = $(this).closest('tr').children()[9].textContent;

                // Limpia tabla de trazabilidad
                $('#tablaTrazabilidad').html('');

                // Crea nuevo detalle (Producto)
                // Título de Trazabilidad (Producto)
                if (id == 1)
                {
                    titulo = 'Trazabilidad de Materia Prima';
                }
                else
                {
                    titulo = 'Trazabilidad de Producto a Granel';
                }

                htmlMovimientos(nreguist, codigo, nombreProducto, lote, titulo, 0, 0);

                // Lee detalle (Formulas)
                var primero   = 0;
                $.get("{{ url('etiquetas/detalleFormula') }}" + '/' + nreguist + '/' + lote, function(data) {
                    console.log(data[1]);
                    var NROVALE = data[1][0]['NROVALE'];
                    var NROGR   = data[1][0]['NROGR'];
                    
                    $.each(data[0], function(index, value) {
                          var nreguist_MP = value.NCODART;
                          var codigo_MP   = value.CODIGO;
                          var nombre_MP   = value.NOMBRE;
                          var lote_MP     = value.LOT_IDE;

                          // Crea nuevo detalle (Producto)
                          titulo       = '';
                          if (primero == 0)
                          {
                             titulo    = 'Materías primas de fórmula';
                             primero   = 1;
                          }

                          // Crea nuevo detalle (Producto)
                          htmlMovimientos(nreguist_MP, codigo_MP, nombre_MP, lote_MP, titulo, NROVALE, NROGR);
                    });
                }, 'json');

                // Emite pdf
                var pdf = new jsPDF('p', 'pt', 'letter');
                    pdf.addHTML($('#tablaTrazabilidad')[0], function () {
                        pdf.save('Test.pdf');
                });

                // Cierra Modal
                 $('#trazabilidad_editar_modal').modal('show');
            });

            function htmlMovimientos(nreguist, codigo, nombre, lote, titulo, NROVALE, NROGR) {
                // Lote Sin puntos
                var loteCaracter = Date.now();

                // Lee movimientos del producto
                var tabla1 = '<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';
                    tabla1 = tabla1 + '    <div class="jarviswidget jarviswidget-color-darken" id="wid-id-2">';
                    tabla1 = tabla1 + '         <h1><b>'+titulo + '</b></h1>';
                    tabla1 = tabla1 + '         <h2><b>'+codigo + ' / '+nombre + ' / Lote: ' + lote + '</b></h2>';
                    tabla1 = tabla1 + '         <header>';
                    tabla1 = tabla1 + '              <span class="widget-icon"> <i class="fa fa-table"></i> </span>';
                    tabla1 = tabla1 + '         </header>';
                    tabla1 = tabla1 + '         <div class="table-responsive">';
                    tabla1 = tabla1 + '              <div class="row">';
                    tabla1 = tabla1 + '                   <table class="table table-hover">';
                    tabla1 = tabla1 + '                          <thead>';
                    tabla1 = tabla1 + '                                <tr>';
                    tabla1 = tabla1 + '                                    <th>Fecha</th>';
                    tabla1 = tabla1 + '                                    <th>Tipo Docto</th>';
                    tabla1 = tabla1 + '                                    <th>Docto</th>';
                    tabla1 = tabla1 + '                                    <th>RUT</th>';
                    tabla1 = tabla1 + '                                    <th>Proveedor</th>';
                    tabla1 = tabla1 + '                                    <th>Lote</th>';
                    tabla1 = tabla1 + '                                    <th>Precio Unit.</th>';
                    tabla1 = tabla1 + '                                    <th>Entradas</th>';
                    tabla1 = tabla1 + '                                    <th>Salidas</th>';
 //                   tabla1 = tabla1 + '                                    <th>Saldo</th>';
                    tabla1 = tabla1 + '                                </tr>';
                    tabla1 = tabla1 + '                          </thead>';
                    tabla1 = tabla1 + '                          <tbody id="det_oc_content' + loteCaracter + '">';
                /* Fin de detalle */
                var tabla3 =        '                          </tbody>';
                    tabla3 = tabla3 + '                   </table>';
                    tabla3 = tabla3 + '              </div>';
                    tabla3 = tabla3 + '          </div>';
                    tabla3 = tabla3 + '      </div>';
                    tabla3 = tabla3 + '</article>';

                    $('#tablaTrazabilidad').append(tabla1+tabla3);

                    $.get("{{ url('etiquetas/movimientos') }}" + '/' + nreguist + '/' + lote, function(data) {
                    var tsaldo         = 0;

                    /* Inicio de detalle */
                    var tabla2 = '';

                    $.each(data, function(index, value) {
                        var RUT        = value.RUT;
                        var RAZ_SOC    = value.RAZ_SOC;
                        var CODIGO     = value.CODIGO;
                        var NOMBRE     = value.NOMBRE;
                        var LOTE       = value.LOTE;
                        var FECHA      = value.FECHA;
                        var TIPO_DOCTO = value.TIPO_DOCTO;
                        var DOCTO      = value.DOCTO;
                        var PRECIO     = value.PRECIO;
                        var ENTRADAS   = value.ENTRADAS;
                        var SALIDAS    = value.SALIDAS;

                        var imprimir   = 0;
                        if (NROVALE   != 0 && NROGR   != 0)
                        {
                            /* Vales de Salida */
                            if (TIPO_DOCTO == 'VALE DE SALIDA' && DOCTO != NROVALE)
                            {
                                imprimir = 0;
                            }
                            else
                            {
                                imprimir = 1;
                            }
                        }
                        else
                        {
                            imprimir = 1;
                        }

                        /* Imprime por que cumple*/
                        if (imprimir == 1)
                        {
                            var estilo     = 'style="color: red;"';
                            tsaldo         = tsaldo + (ENTRADAS - SALIDAS);
                            if (tsaldo     >0)
                            {
                                var estilo = 'style="color: green;"';
                            }

                            tabla2 = tabla2 + '<tr class="item-det-oc">' +
                            '<td>' + FECHA      + '</td>' +
                            '<td>' + TIPO_DOCTO + '</td>' +
                            '<td>' + DOCTO      + '</td>' +
                            '<td>' + RUT        + '</td>' +
                            '<td>' + RAZ_SOC    + '</td>' +
                            '<td>' + LOTE       + '</td>' +
                            '<td>' + currency(parseFloat(PRECIO).toFixed(2))                  + '</td>' +
                            '<td style="color: green;"><b>' + parseFloat(ENTRADAS).toFixed(3) + '</b></td>' +
                            '<td style="color: red  ;"><b>' + parseFloat(SALIDAS).toFixed(3)  + '</b></td>' +
   //                         '<td '+estilo+'><b>' + parseFloat(tsaldo).toFixed(3)              + '</b></td>' +
                            '</tr>';
                        }

                     });
                     $('#det_oc_content' + loteCaracter ).html(tabla2);
                }, 'json');
            }            
        });

    </script>
    @endsection

    @section('content')
    @include('subviews.jqgrid_widget')
    @if(can('familias_agregar'))
    <!-- Modal Agregar -->
    <!-- Modal -->
    <div class="modal fade" id="familias_agregar_modal" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" tabindex="-1" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">Agregar familia</h4>
                </div>
                <form method="POST" action="{{ url('familias/agregar') }}" class="form-horizontal" id="familias_agregar_form">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class='form-group form-group-sm'>
                                    <label class="control-label col-sm-3 text-align-left" for="roles">Descripción</label>
                                    <div class='col-sm-9'>
                                        {{ Form::text('DESCRIP', NULL, ['class' => 'form-control']) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Agregar</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- Fin Modal Agregar -->
    @endif

    @if(can('familias_editar'))
    <!-- Modal Editar -->
    <!-- Modal -->
    <div class="modal fade" id="familias_editar_modal" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" tabindex="-1" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">Editar familia</h4>
                </div>
                <form method="POST" action="{{ url('familias/editar') }}" class="form-horizontal" id="familias_editar_form">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" name="id" value="" id="etiquetas_editar_id">
                                <div class='form-group form-group-sm'>
                                    <label class="control-label col-sm-3 text-align-left" for="roles">Código</label>
                                    <div class='col-sm-9'>
                                        {{ Form::text('CODIGO', NULL, ['class' => 'form-control',  'readonly' => true]) }}
                                    </div>
                                </div>
                                <div class='form-group form-group-sm'>
                                    <label class="control-label col-sm-3 text-align-left" for="roles">Descripción</label>
                                    <div class='col-sm-9'>
                                        {{ Form::text('DESCRIP', NULL, ['class' => 'form-control']) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Editar</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- Fin Modal Editar -->
    @endif

    @if(can('familias_eliminar'))
    <!-- Modal Eliminar -->
    <!-- Modal -->
    <div class="modal fade warning" id="familias_eliminar_modal" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" tabindex="-1" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">Eliminar familia</h4>
                </div>
                <form method="POST" action="{{ url('familias/eliminar') }}" id="etiquetas_eliminar_form">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" name="id" value="" id="familia_eliminar_id">
                                <div class="form-group col-sm-12">
                                    <h4>¿Está seguro de eliminar esta familia?</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger">Eliminar</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- Fin Modal Eliminar -->
    @endif

        <div class="modal fade warning" id="codigo_barras_modal" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" tabindex="-1" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title">Imprimir Etiqueta</h4>
                    </div>

                    <form method="POST" class="form-horizontal" id="codigo_barra_form">
                        <input type="hidden" id="id_imprimir" name="id">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div id='imprime' class="form-group col-sm-12">
										 <div id='miFoto' style='display:none;'>
                                              <img id='itf'>
										 </div>
										 <div class="row">
                                              <div class="col-md-2" style='display:none;'>
                                                   <div id='nreguist2' style='display:none'></div>
                                              </div>
                                              <div class="col-md-2" style='display:none;'>
                                                   Código:
                                              </div>
                                              <div class="col-md-7" style='display:none;'>
                                                   <div id='codigoProductoPantalla2'></div>
                                              </div>
										 </div>
										 <div class="row">
                                              <div class="col-md-2" style='display:none;'>
                                                   Producto:
                                              </div>
                                              <div class="col-md-7" style='display:none;'>
                                                   <div id='nombreProductoPantalla2'></div>
                                              </div>
										 </div>
										 <div class="row" style='display:none;'>
                                              <div class="col-md-7" style='display:none;'>
                                                   <div id='loteProductoPantalla2'></div>
                                              </div>
										 </div>
                                    </div>
                                    <div id='pdf_imprimir' class="form-group col-sm-12">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-danger" id='barra-impresora'>Imprimir</button>
                        </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>


    <!-- Modal Editar -->
    <!-- Modal -->
    <div class="modal fade" id="trazabilidad_editar_modal" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style='width: 90%;'>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" tabindex="-1" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body">
                     <div class="row">
                          <div class="col-md-12">

                              <!-- widget grid -->
                              <section id="widget-grid">
                                  <!-- row -->
                                  <div class="table" id='tablaTrazabilidad'>
                                       <!-- NEW WIDGET START -->
                                           <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                               <!-- Widget ID (each widget will need unique ID)-->
                                               <div class="jarviswidget jarviswidget-color-darken" id="wid-id-2">
                                                    <header>
                                                        <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                                                        <h2><div id='nombreProducto'></div></h2>
                                                    </header>
                                                    <!-- widget div-->
                                                    <div class="table-responsive">
                                                       <div class="row">
                                                            <table class="table table-hover">
                                                               <thead>
                                                                 <tr>
                                                                     <th>Fecha</th>
                                                                     <th>Tipo Docto</th>
                                                                     <th>Docto</th>
                                                                     <th>RUT</th>
                                                                     <th>Proveedor</th>
                                                                     <th>Lote</th>
                                                                     <th>Precio Unit.</th>
                                                                     <th>Entradas</th>
                                                                     <th>Salidas</th>
                                                                     <th>Saldo</th>
                                                                 </tr>
                                                               </thead>
                                                               <tbody id="det_oc_content">
                                                               <tr>
                                                                    <td colspan="8" class="text-center">Sin detalle</td>
                                                               </tr>
                                                               </tbody>
                                                            </table>
                                                        </div>
                                                       <!-- end widget content -->
                                                    </div>
                                                    <!-- end widget div -->
                                               </div>
                                           <!-- end widget -->
                                           </article>
                                       <!-- WIDGET END -->
                                  </div>
                                  <div id="elemento"></div>
                                  <!-- end row -->
                              </section>
                              <!-- end widget grid -->

                          </div>
                     </div>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-dismiss="modal">Volver</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

@endsection