{% 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 %}
        {% if (idproyectosp == null) %}
            <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 %}
{%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;
        }
        .modal-content{
            border-radius: 6px;
        }
        .modal-header{
            background-color: #337ab7;
            color: white;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            min-height: 16.43px;
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }
    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.doubleScroll.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script>
        var idcategoria = '';
        var idsubcategoria = '';
        $(function(){

            $('#addProducto').click(function(){
                var owner = $('#ownerPlan').val();
                var marca = $('#marcaPlan').val();
                var serie = $('#seriePlan').val();
                var estado = $('#estadoPlan').val();

                estado = estado.trim();

                if(owner==''){
                    $('#ownerPlan').focus();
                    alert('Debe completar el campo OWNER');
                    return false;
                }
                if(marca==''){
                    $('#marcaPlan').focus();
                    alert('Debe completar el campo MARCA');
                    return false;
                }
                if(serie==''){
                    $('#seriePlan').focus();
                    alert('Debe completar el campo SERIE');
                    return false;
                }
                if(estado==''){
                    $('#estadoPlan').focus();
                    alert('Debe completar el campo ESTADO');
                    return false;
                }

                $.confirm({
                    title: 'Agregar Planta!',
                    icon: 'fa fa-spinner fa-spin',
                    content:'Esta creando la siguiente Planta:<br>' +
                    '<p><b>OWNER</b>: ' + owner + '<br>' +
                    '<b>MARCA</b>: ' + marca + '<br>' +
                    '<b>SERIE</b>: ' + serie + '<br>' +
                    '<b>ESTADO</b>: ' + estado + '<br>' +
                    '</p>' +
                    '<center>¿Desea continuar?</center>',
                    confirmButton: 'Continuar',
                    cancelButton: 'Cancelar',
                    animation: 'top',
                    closeAnimation: 'scale',
                    theme: 'bootstrap',
                    confirm: function(){
                        $("#cargar").css('display', '');
                        $.ajax({
                            url: '{{ path('crearPlanta', {'idproyectos':idproyectos}) }}',
                            type: 'POST',
                            data: {
                                $owner: owner,
                                $marca: marca,
                                $serie: serie,
                                $estado: estado,
                            }
                        }).done(function(res){
                            $('#subcategoria').change();
                            /*var obj = jQuery.parseJSON(res);
                             var productos = obj.productos;

                             $('#productos').val('');
                             $('#productos').change();
                             $('#productos').empty();
                             $('#productos').append('<option></option>');
                             for(i=0; i<productos.length; i++){
                             $('#productos').append('<option value="' + productos[i]['id'] + '">' + productos[i]['producto'] + '</option>');
                             }

                             $('#addProducto').unbind('click');
                             $('#divProductos').empty();
                             $('#mProductos').modal('hide');*/
                        });
                        swal(
                                'Bien !',
                                'Se creo la planta con exito',
                                'success'
                        )
                        $('#mProductos').modal('hide');
                    },
                    cancel: function(){
                    }
                });
            });

            $(document).on("click", ".downloadTemplate", function () {
              var data = {};
              data['idproyectos'] =  ""+{{idproyectos}};

              var ruta = `{{path('Download_Productos')}}?idproyectos=${data['idproyectos']}`

              $('#downloadTemplate').attr("href",ruta);
              //alert(ruta);
            });

            $(".modal").modal({
                backdrop: 'static',
                keyboard: false,
                show: false
            });

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

            $(".js-example-basic-single").select2({
                placeholder: "Elegir...",
                allowClear: true
            });

            $('#categorias').change(function(){
                $('#subcategoria').val('');
                $('#subcategoria').change();
                $('#subcategoria').empty();

                $('#productos').val('');
                $('#productos').change();
                $('#productos').empty();

                $('#informacionProducto').empty();

                //var idmodule =  "" + {{idmodule}};

                if($('#categorias').val()) {
                    $.post('{{ path('mostrarTipoCuadrillas', {'idproyectos':idproyectos, 'idmodule':idmodule}) }}', {'categoria': $('#categorias').val()})
                            .done(function(data){
                                var obj = jQuery.parseJSON(data);
                                var cuadrillas = obj.cuadrillas;

                                $('#subcategoria').append('<option></option>');
                                for(i=0; i<cuadrillas.length; i++){
                                    $('#subcategoria').append('<option value="' + cuadrillas[i]['cuadrilla'] + '">' + cuadrillas[i]['cuadrilla'] + '</option>');
                                }
                            });
                }
            });
            /*$('#subcategoria').change(function(){
                if($('#categorias').val() && $('#subcategoria').val()){
                    $("#cargar").css('display', '');

                    $('#informacionProducto').empty();
                    $('#informacionProducto').load('{#{ path('userAppe', {'idproyectos':idproyectos, 'idmodule':idmodule}) }#}',
                            {
                                '$categoria': $('#categorias').val(),
                                '$subcategoria': $('#subcategoria').val(),
                                '$tipo': ''
                            });
                }
            });*/


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

            $('#btnProducos').click(function(e){
                $('#ownerPlan').val('');
                $('#ownerPlan').change();
                $('#ownerPlan').empty();

                $('#marcaPlan').val('');
                $('#marcaPlan').change();
                $('#marcaPlan').empty();

                $('#seriePlan').val('');
                $('#seriePlan').change();
                $('#seriePlan').empty();

                $('#estadoPlan').val('');
                $('#estadoPlan').change();
                $('#estadoPlan').empty();


                e.preventDefault();
            });

          ////////////////////////Alert CodigoProductoExiste /////////////////////
            $("#codigoProducto").change(function(){
                var produc = $('#codigoProducto').val();
                //var codi = $("#produc").val();
                $.ajax({
                    type:"GET",
                    async:true,
                    url:"{{path('CodigoProductoExiste',{'idproyectos':idproyectos})}}?produc="+produc
                }).done(function (msj){
                    if (msj == 'existe'){
                        swal({title: "", text: "Ya existe un producto con este código, ingrese un código diferente", type: "warning"});
                        $("#codigoProducto").val('');
                    }
                });

            });
          ////////////////////////////////////////////////////////////////////////

        });

        $( document ).ready(function() {

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

                $('#informacionProducto').empty();
                $('#informacionProducto').load('{{ path('userAppe', {'idproyectos':idproyectos, 'idmodule':idmodule}) }}',
                        {
                            '$categoria': $('#categorias').val(),
                            '$subcategoria': $('#subcategoria').val(),
                            '$tipo': ''
                        });
        });

    </script>

    <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12 main">
        <div class="col-lg-12 col-xs-12" style="min-height: 300px">
            <form id="frmProductos" class="col-md-12">
                <div class="row">
                    <!--<fieldset class="col-md-12"><legend>Buscar Usuarios</legend>
                      <div class="col-lg-3" id="parametros" >
                          <button class="btn btn-primary col-lg-5 generar" id="generar">SEARCH</button>
                          </fieldset>
                          <br />
                      </div>-->

                        <!-- <div class="row">
                            <div class="col-md-2"><label>ASP:</label></div>
                            <div class="col-md-4">
                                <div class="col-md-10">
                                    <select id="categorias" class="js-example-basic-single">
                                        <option></option>
                                        {% for asps in asp %}
                                            <option value="{{ asps.asp }}">{{ asps.asp }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2"><label>Tipo de Cuadrilla:</label></div>
                            <div class="col-md-4">
                                <div class="col-md-10">
                                    <select id="subcategoria" class="js-example-basic-single">
                                        <option></option>
                                    </select>
                                </div>
                            </div>

                    </fieldset>
                </div>-->
                <!--<div class="row">
                  <div class="col-lg-offset-9"  style="margin-top: 1%">
                      <div class="btn-group pull-right">
                          <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                          <ul class="dropdown-menu" role="menu">
                            <li><a class="downloadTemplate" href="{{ path("Download_Productos")}}" id="downloadTemplate"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                          </ul>
                      </div>
                  </div>
                </div>-->
                <div class="row">
                    <fieldset class="col-md-12"><legend>Información Usuarios</legend>
                        <div id="informacionProducto" class="col-md-12" style="float: none;"></div>
                    </fieldset>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="mProductos" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><B>GESTIONAR PLANTAS</B></h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-12" style="float: none;">
                        <div class="row">
                            <div class="col-md-2"><label>OWNER:</label></div>
                            <!--<div class="col-md-8"><input type="number" min="0" step="any" class="form-control" id="codigoProducto" placeholder="Codigo Producto" /></div>-->
                            <div class="col-md-8"><input type="text" class="form-control" id="ownerPlan" placeholder="OWNER PLANTA" /></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>MARCA:</label></div>
                            <!--<div class="col-md-8"><input type="number" min="0" step="any" class="form-control" id="codigoProducto" placeholder="Codigo Producto" /></div>-->
                            <div class="col-md-8"><input type="text" class="form-control" id="marcaPlan" placeholder="MARCA PLANTA" /></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>SERIE:</label></div>
                            <!--<div class="col-md-8"><input type="number" min="0" step="any" class="form-control" id="codigoProducto" placeholder="Codigo Producto" /></div>-->
                            <div class="col-md-8"><input type="text" class="form-control" id="seriePlan" placeholder="SERIE PLANTA" /></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>ESTADO:</label></div>
                            <div class="col-md-8"><input type="text" class="form-control" id="estadoPlan" placeholder="ESTADO PLANTA" /></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <a id="addProducto" class="btn btn-success btn-sm">
                                    <span>{{'inbox.add' | trans}}</span>
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12" id="divProductos"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}