{% 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" >
        {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
    </div>
{%endblock %}

{%block dashboard %}

    <style>


        .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)
        }
    </style>


<script>
    var idproductoAdd = new Array();
    function deleteRow(id, nombre){
        $('#idequipo').append($('<option>', {
            value: id,
            text: nombre
        }));

        var i = idproductoAdd.indexOf("" + id + "");
        idproductoAdd.splice(i, 1);

        $("#idequipo").change();
        $("#row"+id).remove();
        //alert(userAddId);
    };
    $(function () {
        $(".js-example-basic-single").select2();
        var sitios = "", usuarios = "", almacen = "";
        {% for sitio in sitios %}
        sitios += '<option value="{{ sitio.idsitio }}" >{{ sitio.sitio }}</option>';

        {% endfor %}
        {% for user in usuarios %}
        usuarios += '<option value="{{ user.iduser }}" >{{ user.nombre }}</option>';

        {% endfor %}
        {% for almacen in almacenes %}
         almacen += '<option value="{{ almacen.id }}" >{{ almacen.ubicacion }}</option>';
        {% endfor %}



        $("#agregarEquipo").click(function () {

            idequipo = $("#idequipo").val();
            idproductoAdd.push("" + idequipo + "");
            selectedItem = $("#idequipo option[value='"+idequipo+"']");
            //alert(selectedItem.attr('tipo'))
            tipo = selectedItem.attr('tipo');
            categoria = selectedItem.attr('categoria');
            subcategoria = selectedItem.attr('subcategoria');
            almacen = selectedItem.attr('almacen');
            serie = selectedItem.attr('serie');
            nomUser = "'"+selectedItem.text()+"'";
            
            if(idproductoAdd.length == 1){
                $('#tbodyAdd').append('<tr id="row'+idequipo+'"><td>'+selectedItem.text()+'</td><td>'+tipo+'</td><td>'+categoria+'</td><td>'+subcategoria+'</td><td id="cantidadItem'+idequipo+'">1</td><td><button class="btn btn-danger"  onclick="deleteRow('+idequipo+', '+nomUser+')"><i class="fa fa-eraser" aria-hidden="true"></i></button></td></tr>');

            }else{
                $('#tbodyAdd tr:last').after('<tr id="row'+idequipo+'"><td>'+selectedItem.text()+'</td><td>'+tipo+'</td><td>'+categoria+'</td><td>'+subcategoria+'</td><td id="cantidadItem'+idequipo+'">1</td><td><button class="btn btn-danger"  onclick="deleteRow('+idequipo+', '+nomUser+')"><i class="fa fa-eraser" aria-hidden="true"></i></button></td></tr>');

            }

            $("#idequipo option[value='"+idequipo+"']").remove();
            $("#idequipo").val('');
            $("#idequipo").change();

        });



        $("#idequipo").change(function () {
            selectedItem = $("#idequipo option[value='"+$(this).val()+"']");
            tipo = selectedItem.attr('tipo');
            categoria = selectedItem.attr('categoria');
            subcategoria = selectedItem.attr('subcategoria');
            almacen = selectedItem.attr('almacen');
            serie = selectedItem.attr('serie');
            $("#showSERIAL").text(serie);
            $("#showCATEGORIA").text(categoria);
            $("#showSUBCATEGORIA").text(subcategoria);
            $("#showALMACEN").text(almacen);

        });
        $("#idtipoUbicacion").change(function () {
            idtipoUbicacion = $(this).val();
            if (idtipoUbicacion == 1) {
                $("#selectUbicacion").empty();
                $("#selectUbicacion").append(sitios);
                $("#selectUbicacion").change();

            }
            if (idtipoUbicacion == 2) {
                $("#selectUbicacion").empty();
                $("#selectUbicacion").append(usuarios);
                $("#selectUbicacion").change();

            }
            if (idtipoUbicacion == 3) {
                $("#selectUbicacion").empty();
                $("#selectUbicacion").append(almacen);
                $("#selectUbicacion").change();

            }

        })


        $("#selectUbicacion").change(function () {
            idubicacion = $(this).val();
            idtipoUbicacion = $("#idtipoUbicacion").val();;
            $("#selectUbicacion option[value='"+idubicacion+"'], #selectUbicacion option[value='"+idubicacion+"']").attr('selected',true);

            $.ajax({
                type: 'POST',
                url: '{{ path('findProductsinAnyWhere',{'idproyectos':idproyectos}) }}',
                data: {$idubicacion: idubicacion, $idtipoUbicacion: idtipoUbicacion}

            }).done(function (json) {
                var obj = jQuery.parseJSON(json);
                equipos = obj.equipos;
                consumibles = obj.consumibles;
                option = '<option value=""></option>'
                for (i=0;i< equipos.length; i++) {
                    option += '<option value="'+equipos[i].id+'" serie="'+equipos[i].serie+'" almacen="'+equipos[i].almacen+'" tipo="'+equipos[i].tipo+'" categoria="'+equipos[i].categoria+'" subcategoria="'+equipos[i].subcategoria+'">'+equipos[i].serie+'-'+equipos[i].detalle+'</option>'

                }

                $("#idequipo").empty();
                $("#idequipo").append(option);
                $("#idequipo").change();



            });
        });

        $('.date').datetimepicker({});


    })

</script>
    <br>


<div class="col-lg-12">
    <div class="col-lg-offset-2 col-lg-8 table-bordered" style="padding: 40px">
        <form id="formEquimentExist" enctype="multipart/form-data" method="POST" action="#">
        <div class="row">
            <div>
                <label>Tipo</label>
                <select class="form-control" required>
                    <option></option>
                    <option>ROBO/HURTO</option>
                    <option>NO REPARABLE</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div>
                <label>Fecha</label>
                <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>
                <label>Archivo</label>
                <input class="form-control" type="file" required>
            </div>
        </div>
        <div class="row">
            <label>Descripcion</label>
            <textarea class="form-control" required></textarea>
        </div>
        <div class="row">
            <label>Ubicacion</label>
            <select class="form-control" id="idtipoUbicacion" required>
                <option></option>
                <option value="3">ALMACENES</option>
                <option value="2">TECNICOS</option>
                <option value="1">SITIO</option>
            </select>
        </div>
            <div class="row">
                <div>
                    <label>Seleccione</label>
                    <select class="js-example-basic-single" id="selectUbicacion" required>
                        <option></option>
                    </select>
                </div>
            </div>


        <div class="row">
            <div>
                <label>Equipo</label>
                <div class="input-group">
                <select id="idequipo" class="js-example-basic-single">
                    </select>
                            <span class="input-group-btn">
                             <button class="btn btn-primary execute" type="button" id="agregarEquipo">Agregar</button>
                            </span>
                </div>
            </div>
        </div>

            <div class="row">
                <div class="col-lg-12">
                    <table class="table tablesorter table-bordered">
                        <thead>
                        <th>ITEM</th>
                        <th>TIPO</th>
                        <th>{{'site.category' | trans}}</th>
                        <th>SUB-{{'site.category' | trans}}</th>
                        <th>CANTIDAD</th>
                        <th></th>
                        </thead>
                        <tbody id="tbodyAdd">
                        <tr></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <center>
                <button class=" btn btn-info">Continuar</button>
            </center>
        </form>
    </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 %}