{% extends "base.html.twig"%}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
{% endblock %}
{% block titulo %} - <a href="{{path('projectInitial',{ 'idproyectos':idproyectos})}}">{{proyectos.proyecto}}</a> - <a href="{{path(modulo.path,{ 'idproyectos':idproyectos,'idmodule':idmodule})}}">{{modulo.modulo}}</a>{% endblock %}
{% block menuTop %}
    <div class="col-lg-12 col-xs-12" >
        {% if (idproyectos< 1000) %}
            <div class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
            </div>
        {% else %}
            <div class="col-lg-12 col-xs-12" >
                {{ render(controller("PortalBundle:Default:topModuleMx",{'idproyectos':idproyectosp,'idmodule':idmodule, 'idproyecto':idproyectos})) }}
            </div>
        {% endif %}
    </div>
{%endblock %}

{%block dashboard %}

    <style>
        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}
        .isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}
        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }
        .modal.modal-wide .modal-dialog {
            width: 90%;
        }
        .modal-wide .modal-body {
            overflow-y: auto;
        }


        .js-example-basic-single{
            width: 100%;
        }
        .js-example-basic-single .select2-arrow {
            background: white !important;
            background-image: none !important;
            border-left: none !important;
            margin-top: 5px !important;
        }
        .js-example-basic-single .select2-choice{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
        .js-example-basic-single .select2-choice:focus{
            border-color:#66afe9;
            outline:0;
            -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }

        input {
            -webkit-appearance: textfield;
            background-color: white;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 0px;
            border-width: 1px;
            border-style: solid;
            border-color: black !important;
            border-image: initial;
        }

    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        var table;

        function showEditPO(obj){
            $('#txtId').val($(obj).data('id'));
            $('#txtPOOld').val($(obj).data('po'));
            $('#txtFechaMovimiento').val($(obj).data('fecha_movimiento'));
            $('#txtUsuario').val($(obj).data('usuario'));
            $('#txtTipoUbicacion').val($(obj).data('tipo_ubicacion'));
            $('#txtUbicacion').val($(obj).data('ubicacion'));
            $('#txtCodigo').val($(obj).data('codigo'));
            $('#txtProducto').val($(obj).data('producto'));
            $('#txtSerie').val($(obj).data('serie'));
            $('#txtTipoProducto').val($(obj).data('tipo_producto'));
            $('#txtCantidad').val($(obj).data('cantidad'));
            $('#txtPO').val($(obj).data('po'));
            $('#txtGROld').val($(obj).data('gr'));
            $('#txtGR').val($(obj).data('gr'));

            $("#modalEditPO").modal('show');
        }

        $(document).on("click",'#btnUpdatePO',function(){
            var valor_anterior = $('#txtPOOld').val();
            var valor_anteriorGR = $('#txtGROld').val();
            var po = $.trim($('#txtPO').val());
            var gr = $.trim($('#txtGR').val());
            var postData = {
                idMovimientoDetalle: $('#txtId').val(),
                PO: po, GR: gr,
                idproyectos : {{ idproyectos }}
            };

            console.log(postData);
            if (valor_anterior == po && valor_anteriorGR == gr ){
                $.confirm({
                    icon: 'glyphicon glyphicon-warning-sign',
                    title: 'Advertencia',
                    content: 'No se han detectado cambios!!!',
                    confirmButton: false,
                    cancelButton: 'Cerrar'
                });
                return false;
            }
            if (po == "" && gr == ""){
                $.confirm({
                    icon: 'glyphicon glyphicon-warning-sign',
                    title: 'Advertencia',
                    content: 'Introduzca un valor válido!!!',
                    confirmButton: false,
                    cancelButton: 'Cerrar'
                });
                return false;
            }

            $.confirm({
                icon: 'glyphicon glyphicon-question-sign',
                //title: 'Actualizar PO',
                title: 'Actualizar Información',
                content: '¿Desea grabar los cambios?',
                confirmButton: 'Si',
                cancelButton: 'No',
                confirmButtonClass: 'btn-primary',
                cancelButtonClass: 'btn-default',
                confirm: function () {
                    $.isLoading({text: "Loading" });
                    $.ajax({
                        type: 'POST',
                        url: "{{ path('updateInventoryPO') }}",
                        data: postData,
                        dataType: 'json',
                        success: function (response) {
                            switch (response.status){
                                case 'success':
                                    table.ajax.reload( null, false );
                                    $.isLoading("hide");
                                    $("#modalEditPO").modal('hide');
                                    $.confirm({
                                        icon: 'glyphicon glyphicon-info-sign',
                                        title: 'Información',
                                        content: 'Cambios efectuados satisfactoriamente!!!',
                                        confirmButton: false,
                                        cancelButton: 'Cerrar'
                                    });
                                    break;
                                case 'error':
                                    table.ajax.reload( null, false );
                                    $.isLoading("hide");
                                    swal("Oops!!!", "Errores encontrados", "error");
                                    $("#modalEditPO").modal('hide');
                                    break;
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            table.ajax.reload( null, false );
                            $.isLoading("hide");
                            swal("Oops!!!", "Errores encontrados");
                            $("#modalEditPO").modal('hide');
                        }
                    });
                },
                cancel: function () {
                    //$.isLoading("hide");
                }
            });
        });

        $(document).ready(function(){
            {%if idproyectos == 36 or idproyectos == 37 or  idproyectos == 31
                or idproyectos == 32 or idproyectos == 35 or idproyectos == 30
                or idproyectos == 38 or idproyectos == 39 or idproyectos == 57%} // Proyectos Maple/Maya CA

                var columna = [
                    { "data": "id_movimiento_detalle", visible:false },
                    { "data": "fecha_movimiento" },
                    { "data": "usuario" },
                    { "data": "observacion" },
                    { "data": "tipo_ubicacion" },
                    { "data": "ubicacion" },
                    { "data": "codigo" },
                    { "data": "producto" },
                    { "data": "tipo_producto" },
                    { "data": "serie" },
                    { "data": "cantidad" },
                    { "data": "po"},
                    { "data": "gr",
                        render: function ( data, type, row ) {
                            if (type==='display'){
                                if (row['num_appenate_cierre']!='_'){
                                    return  '<a data-id="' + row['id_movimiento_detalle'] + '"' +
                                            ' data-po = "' + row['po']  + '"' +
                                            ' data-gr = "' + row['gr']  + '"' +
                                            ' data-fecha_movimiento = "' + row['fecha_movimiento']  + '"' +
                                            ' data-usuario = "' + row['usuario']  + '"' +
                                            ' data-tipo_ubicacion = "' + row['tipo_ubicacion']  + '"' +
                                            ' data-ubicacion = "' + row['ubicacion']  + '"' +
                                            ' data-codigo = "' + row['codigo']  + '"' +
                                            ' data-producto = "' + row['producto']  + '"' +
                                            ' data-serie = "' + row['serie']  + '"' +
                                            ' data-tipo_producto = "' + row['tipo_producto']  + '"' +
                                            ' data-cantidad = "' + row['cantidad']  + '"' +
                                            ' href="javascript://" onClick="showEditPO(this);">' + data + '&nbsp;' +
                                            '<span title="Editar PO y GR para este Movimiento." ' +
                                            'style="padding-left: 5px;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>';
                                }else{
                                    return data;
                                }
                            }
                            return data;
                        }
                    }
                ];
                var columna2 = [1,2,3,4,5,6,7,8,9,10,11,12 ];
            {%elseif idproyectos >=1000%} //Proyectos MX
                var columna = [
                    { "data": "id_movimiento_detalle", visible:false },
                    { "data": "fecha_movimiento" },
                    { "data": "usuario" },
                    { "data": "observacion" },
                    { "data": "tipo_ubicacion" },
                    { "data": "ubicacion" },
                    { "data": "codigo" },
                    { "data": "producto" },
                    { "data": "tipo_producto" },
                    { "data": "serie" },
                    { "data": "cantidad" },
                    { "data": "po"},
                    { "data": "gr"}
                ];
                var columna2 = [1,2,3,4,5,6,7,8,9,10,11,12 ];
            {%endif%}

            $('#example thead tr').clone(true).appendTo( '#example thead' );
            $('#example thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

                $( 'input', this ).on( 'keyup change', function () {
                    if ( table.column(i).search() !== this.value ) {
                        table
                                .column(i)
                                .search( this.value )
                                .draw();
                    }
                } );
            } );

            table = $('#example').DataTable( {
                dom: 'Bfrtip',
                scrollY: '60vh',
                scrollX: true,
                scrollCollapse: true,
                orderCellsTop: true,
                "ajax": {
                    "url": "{{ path('showReportInvPO',{'idproyectos':idproyectos}) }}",
                    "type": "POST",
                    data:  function( d ) {
                        d.idproveedor= $('#idproveedor').val();
                    }
                },
                "deferRender": true,
                "processing": true,
                "language": {
                    "processing": "<div class='table-loading'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                columns: columna,
                columnDefs: [
                    { targets: [10], className: 'dt-body-right' },
                    { targets: [11], className: 'dt-body-right dt-nowrap' }],
                lengthMenu: [
                    [  25, 50, -1 ],
                    [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                ],
                buttons: [
                    {
                        extend:'excel',
                        text: 'Excel',
                        exportOptions: {
                            columns: columna2
                        },
                        title: 'reporte_inventario_po'
                    }
                ]
            } );

        });
    </script>

    <br>
    <div class="row">
        <div id="datatable" class="col-sm-12" style="overflow-x: scroll">
            <table id="example" class="display nowrap" width="100%">
                <thead>
                {%if idproyectos == 36 or idproyectos == 37 or idproyectos == 31
                or idproyectos == 32 or idproyectos == 35 or idproyectos == 30
                or idproyectos == 38 or idproyectos == 39 or idproyectos == 57%}
                    <tr>
                        <th>ID</th>
                        <th>FECHA</th>
                        <th>USUARIO</th>
                        <th>OBSERVACIÓN</th>
                        <th>TIPO UBICACIÓN</th>
                        <th>UBICACIÓN</th>
                        <th>CÓDIGO</th>
                        <th>PRODUCTO</th>
                        <th>TIPO PRODUCTO</th>
                        <th>SERIE</th>
                        <th>CANTIDAD</th>
                        <th>PO</th>
                        <th>GR</th>
                    </tr>
                {%else%}
                    <tr>
                        <th>ID</th>
                        <th>FECHA</th>
                        <th>USUARIO</th>
                        <th>OBSERVACIÓN</th>
                        <th>TIPO UBICACIÓN</th>
                        <th>UBICACIÓN</th>
                        <th>CÓDIGO</th>
                        <th>PRODUCTO</th>
                        <th>TIPO PRODUCTO</th>
                        <th>SERIE</th>
                        <th>CANTIDAD</th>
                        <th>PO</th>
                        <th>GR</th>
                    </tr>
                {%endif%}
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="modalEditPO" tabindex="-1" role="dialog" aria-labelledby="modalEditPO">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2 class="modal-title text-center" id="ModalTitleEditPO">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Actualización de PO y GR
                    </h2>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="txtId">
                    <input type="hidden" id="txtPOOld">
                    <input type="hidden" id="txtGROld">
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="form-group">
                                <label id="lblFechaMovimiento" for="txtFechaMovimiento">Fecha Mov.:</label>
                                <input type="text" class="form-control" id="txtFechaMovimiento" value="" maxlength="100" disabled>
                            </div>
                        </div>
                        <div class="col-xs-9">
                            <div class="form-group">
                                <label id="lblUsuario" for="txtUsuario">Usuario:</label>
                                <input type="text" class="form-control" id="txtUsuario" value="" maxlength="100" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="form-group">
                                <label id="lblTipoUbicacion" for="txtTipoUbicacion">Tipo Ubicación:</label>
                                <input type="text" class="form-control" id="txtTipoUbicacion" value=""  disabled>
                            </div>
                        </div>
                        <div class="col-xs-9">
                            <div class="form-group">
                                <label id="lblUbicacion" for="txtUbicacion">Ubicación:</label>
                                <input type="text" class="form-control" id="txtUbicacion" value="" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="form-group">
                                <label id="lblCodigo" for="txtCodigo">Código:</label>
                                <input type="text" class="form-control" id="txtCodigo" value="" maxlength="100" disabled>
                            </div>
                        </div>
                        <div class="col-xs-9">
                            <div class="form-group">
                                <label id="lblProducto" for="txtProducto">Producto:</label>
                                <input type="text" class="form-control" id="txtProducto" value="" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="form-group">
                                <label id="lblSerie" for="txtSerie">Serie:</label>
                                <input type="text" class="form-control" id="txtSerie" value="" maxlength="100" disabled>
                            </div>
                        </div>
                        <div class="col-xs-7">
                            <div class="form-group">
                                <label id="lblTipoProducto" for="txtTipoProducto">Tipo Producto:</label>
                                <input type="text" class="form-control" id="txtTipoProducto" value="" disabled>
                            </div>
                        </div>

                        <div class="col-xs-2">
                            <div class="form-group">
                                <label id="lblCantidad" for="txtCantidad">Cantidad:</label>
                                <input type="text" class="form-control text-right" id="txtCantidad" value="" maxlength="100" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label id="lblPO">PO: </label>
                                <input type="text" class="form-control" id="txtPO" value="" maxlength="20">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label id="lblGR">GR: </label>
                                <input type="text" class="form-control" id="txtGR" value="" maxlength="20">
                            </div>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button id="btnUpdatePO" type="button" class="btn btn-default">
                        <i class="fa fa-lg fa-save text-success"></i>
                    </button>
                    <button id="closemodal" type="button" class="btn btn-default" data-dismiss="modal">
                        <i class="fa fa-lg fa-times text-danger"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}

    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <!--script src="{{ asset('js/jquery-1.12.4.js') }}"></script-->
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
{% endblock %}