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

{%block dashboard %}
    <style>
        @media (max-width: 767px) {
            .xs-m-t-0, .main {
                margin-top: 100px;
            }
        }
        #frmProductos fieldset{
            padding: 15px;
            border-radius: 5px;
            border: 1px solid #D3D3D3;
        }
        #frmProductos legend{
            border-bottom: 0 !important;
            width: auto !important;
        }
        .row{
            padding-top: 5px;
        }
        .nav-tabs>li.active>a{
            color: #555;
            cursor: default;
            background-color: #fff;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
        }
        .nav-tabs>li.active>a:hover{
            color: #555;
            cursor: default;
            background-color: #fff;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
        }
        .nav-tabs>li.active>a:focus{
            color: #555;
            cursor: default;
            background-color: #fff;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
        }
        .dropdown-menu a{
            cursor: pointer;
        }
    </style>
    <script>
        $(function(){

            var table = $('#example').DataTable( {
                dom: 'Bfrtip',
                "ajax": {
                    "url": "{{ path('showMovPend',{'idproyectos':idproyectos,'idmodule':idmodule}) }}",
                    "type": "POST",
                    data:  function( d ) {
                        d.idproveedor= $('#idproveedor').val();
                    }
                },
                columns: [
                    { "data": "id" },
                    { "data": "tipoM" },
                    { "data": "estado" },
                    { "data": "nombreEntrega" },
                    { "data": "nombreRecibe" },
                    { "data": "fecha_movimiento" },
                    { "data": null}
                ],
                columnDefs: [
                    { orderable: false, targets: [ 1 ] ,
                        "targets": -1,
                        "data": "idorden",
                        "defaultContent": "<button class='btn btn-info'><i class='fa fa-search' aria-hidden='true'></i></button>"
                    }
                ],
                lengthMenu: [
                    [  25, 50, -1 ],
                    [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                ],
                buttons: [
                    'pageLength','copy', 'csv', 'excel', 'pdf', 'print'
                ]
            } );

            $('#example tbody').on( 'click', 'button', function () {
                $("#cargar").css('display','');
                var data = table.row( $(this).parents('tr') ).data();
                $.ajax({
                    type:'POST',
                    url:'{{ path('showSalidasAlmacenDeta',{'idproyectos':idproyectos,'idmodule':idmodule})}}',
                    data:{$idmovimiento:data.id}
                }).done(function (json) {
                    var obj = jQuery.parseJSON(json);
                    console.log(obj);
                    idmovimiento = obj.movimiento;
                    detalleMovimientos = obj.detalleMovimiento;
                    datosMovimiento = obj.estadoMovimiento;
                    $("#fechaMovimiento").val(datosMovimiento[0].fecha_movimiento);
                    $("#tecnicoAsignado").val(datosMovimiento[0].id_recibe);
                    $("#idmovimiento").val(idmovimiento);
                    $("#tecnicoAsignado").change();
                    $("#observacionesMov").val(datosMovimiento[0].observacion);

                    if(datosMovimiento[0].idestados == 176 ){

                        $("#btnCheckingExit, #btnDeleteExit, #saveOutTechnician, #agregarEquipo, #equipos, #consumibles").css('display', 'none');
                        $("#fechaMovimiento").attr('readonly',true);
                        $("#tecnicoAsignado").attr('readonly',true);
                        $("#tecnicoAsignado").change();
                        $("#observacionesMov").attr('readonly',true);
                        $("#idequipo").attr('readonly',true);

                    }else{

                        $("#btnCheckingExit, #btnDeleteExit, #saveOutTechnician, #agregarEquipo, #equipos, #consumibles").css('display', '');
                        $("#fechaMovimiento").attr('readonly',false);
                        $("#tecnicoAsignado").attr('readonly',false);
                        $("#tecnicoAsignado").change();
                        $("#observacionesMov").attr('readonly',false);
                        $("#idequipo").attr('readonly',false);
                    }

                    console.log(obj);
                    idproductoAdd = new Array();
                    $('#tbodyAdd').empty();
                    tr = "";
                    for(i=0;i< detalleMovimientos.length; i++){
                        nomUser = "'"+detalleMovimientos[i].descripcion+"'";

                        idproductoAdd.push("" + detalleMovimientos[i].idproducto + "");
                        tr += '<tr id="row'+detalleMovimientos[i].idproducto+'"><td>'+detalleMovimientos[i].codigo+'</td><td>'+detalleMovimientos[i].descripcion+'</td><td>'+detalleMovimientos[i].serie+'</td><td>'+detalleMovimientos[i].tipo+'</td><td>'+detalleMovimientos[i].categoria+'</td><td>'+detalleMovimientos[i].subcategoria+'</td><td  id="cantidadItem'+detalleMovimientos[i].idproducto+'">'+detalleMovimientos[i].cantidad+'</td><td>'+detalleMovimientos[i].tipoubicacion+'</td><td>'+detalleMovimientos[i].ubicacion+'</td></tr>';



                    }
                    $('#tbodyAdd').append(tr);
                    $("#cargar").css('display','done');
                    $("#modalTecnico").modal();
                    $("#btnCheckingExit, #btnDeleteExit").attr('idmovimiento', idmovimiento );

                })
                //location.href = "{{path('showSalidasAlmacenDeta',{'idproyectos':idproyectos,'idmodule':idmodule, 'idmovimiento':'nuevo'})}}?idmovimiento=" + data.id;

            });


            $("#btnDeleteExit").click(function () {
                idmovimiento = $(this).attr('idmovimiento');
                swal({
                    title: 'Eliminar Salida',
                    text: "No podra revertir una vez confirmado",
                    type: 'error',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'SI, Borrar!'
                }).then(function () {
                    $("#cargar").css('display','');
                    $.ajax({
                        type: 'POST',
                        url: '{{ path('deleteExit',{'idproyectos':idproyectos}) }}',
                        data:{ $idmovimiento:idmovimiento }
                    }).done(function (json) {

                        $("#cargar").css('display','none');

                        $("#modalTecnico").modal('hide');
                        swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                        )

                        table.ajax.reload(function ( json ) {
                            $("#cargar").css('display','none');
                        });
                    });
                })

            });

            $("#btnCheckingExit").click(function () {
                idmovimiento = $(this).attr('idmovimiento');
                swal({
                    title: 'Confirmar la Salida',
                    text: "No podra revertir una vez confirmado",
                    type: 'success',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Continuar'
                }).then(function () {
                    $("#cargar").css('display','');
                    $.ajax({
                        type: 'POST',
                        url: '{{ path('checkingExit',{'idproyectos':idproyectos}) }}',
                        data:{ $idmovimiento:idmovimiento }
                    }).done(function (json) {

                        $("#cargar").css('display','none');
                        $("#btnCheckingExit, #btnDeleteExit, #saveOutTechnician").css('display', 'none');
                        swal(
                                'Bien !',
                                'Movimiento Cerrado con Exito',
                                'success'
                        )

                        table.ajax.reload(function ( json ) {
                            $("#cargar").css('display','none');
                        });
                    });
                })

            });


        });
    </script>

    <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12 main">
        <h1><center>MOVIMIENTOS PENDIENTES</center></h1>

    </div>

    <table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>NRO MOVIMIENTO</th>
            <th>{{'ticketDetail.email.tipo' | trans | upper}}</th>
            <th>{{'ticketDetail.status' | trans}}</th>
            <th>ENTREGADO POR</th>
            <th>RECIBIDO POR</th>
            <th>{{'Fecha' | trans | upper}}</th>
            <th>{{'ticketDetail.status' | trans}}</th>
            <th></th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>


    <div class="modal modal-wide fade" id="modalTecnico" tabindex="-1" role="dialog" aria-labelledby="modalTecnico" style="width: 80%" >
        <div class="modal-dialog" role="document">

            <div class="modal-content">
                <div class="modal-header  btn-success">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel"> TRANFERENCIA ENTRE BODEGAS</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-1"><label>{{'ticketDetail.comments.fecha' | trans}}:</label></div>

                        <div class="col-lg-4">
                            <div class='input-group date' >
                                <input id="fechaMovimiento" name="fechaMovimiento" type='text'  class="form-control" placeholder="Seleccionar fecha" data-date-format="YYYY-MM-DD" required />
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-1"><label>{{'Observacion' | trans}}:</label></div>

                        <div class="col-lg-12">
                            <input type="hidden" id="idmovimiento">
                            <textarea id="observacionesMov" name="observacionesMov" class="form-control" style="resize: none" ></textarea>
                        </div>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-lg-12">
                            <table class="table tablesorter table-bordered">
                                <thead>
                                <th>Código</th>
                                <th>Descripción</th>
                                <th>Serie</th>
                                <th>{{'ticketDetail.email.tipo' | trans | upper}}</th>
                                <th>{{'site.category' | trans | upper}}</th>
                                <th>SUB-{{'site.category' | trans | upper}}</th>
                                <th>{{'Cantidad' | trans | upper}}</th>
                                <th>TIPO UBICACION</th>
                                <th>UBICACION</th>
                                </thead>
                                <tbody id="tbodyAdd">
                                <tr></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
                    <button class="btn btn-success" id="btnCheckingExit" style="display: none ;">Confirmar Salida</button>
                    <button class="btn btn-danger" id="btnDeleteExit" style="display: none ;">Eliminar Salida</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 %}