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

        </div>
    </div>
{%endblock %}        


{%block dashboard %}
<br><br><br>
   
<style>
    .main2{
        margin-top:50px ;
    }
    .dataTables_length select {
        width: 60px;
    }
    .dataTables_length label {
        font-weight: normal;
    }
    table.dataTable thead th{
        border-bottom: 1px solid #3071a9 !important;
    }
    table.dataTable tfoot th{
        border-top: 1px solid #3071a9 !important;
    }
    .dataTables_scroll{
        border: 1px solid #3071a9 !important;
    }
    #table_list tfoot input{
         width: 100% !important;
    }
    #table_list tfoot {
        display: table-header-group !important;
    }
</style>
<link id="base-style-responsive" href="{{asset('css/jquery.dataTables.min.css')}}" rel="stylesheet">
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script>
    $(document).ready(function (){  
        $('.cargando').hide(); 
        $('.desactivar_masivo').hide();
        $(".inactivar").click(function(){ 
            if($(this).is(":checked")){    
                $('.desactivar_masivo').show(); 
            }else{
                $('.desactivar_masivo').hide();
                $(".inactivar").each(function(){ 
                    if($(this).is(":checked")){    
                        $('.desactivar_masivo').show(); 
                    }
                });
            }
        });
        $("#mp").change(function(e) { 
            $("#descripcion").val('');
            var valores = {
                valor_filtro : $(this).val(),                
            };
            $('#table_list tbody').find("tr").remove();
            $("#table_list-container").hide(); 
            $(".list option").remove();   
            $(".activar_nueva_forma").hide(); 
            $(".desactivar_nueva_forma").hide(); 
            $(".nueva_forma").hide();          
            if ($(this).val()!=''){
                $.getJSON("{{path('listPorMp')}}", valores, function (data){
                    if (Array.isArray(data.data)){
                        $(".list").append('<option value="">Seleccione...</option>');
                        for (var i = 0; i < data.data.length; i++){
                            $(".list").append('<option value="'+data.data[i]['id']+'">'+data.data[i]['descripcion']+'</option>');
                        }
                    }
                });
            }            
        }); 
        $("#table_list-container").hide(); 
        $(".nueva_forma").hide();
        $(".activar_nueva_forma").hide();
        $(".desactivar_nueva_forma").hide();
        $("#idforma").change(function(){
            $('.cargando').show();
            $('#table_list tbody').find("tr").remove();            
            $("#table_list-container").hide();
            $(".nueva_forma").hide(); 
            $(".activar_nueva_forma").hide(); 
            $(".desactivar_nueva_forma").hide();
            $("#descripcion").val('');
            if ($(this).val()!=""){
                $.ajax({
                    type: "POST",
                    url: "{{path('detalleFormas',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                    data: {
                        idforma: $(this).val(),
                    },
                    success: function(data){
                        $('.cargando').hide();
                        if (data){        
                            $("#table_list-container").show();
                            $("#table_list-container").html(data);
                            $(".nueva_forma").hide();
                            $(".activar_nueva_forma").show();
                            $(".desactivar_nueva_forma").hide(); 
                        }else{
                           swal("Error!", "No hay información", "error"); 
                        }                       
                    }
                });
            }
        });        
        $(".activar_nueva_forma").click(function(){
            $("#descripcion").val('');
            $(".nueva_forma").show();
            $(".activar_nueva_forma").hide();
            $(".desactivar_nueva_forma").show();
        });
        $(".desactivar_nueva_forma").click(function(){
            $("#descripcion").val('');
            $(".nueva_forma").hide();
            $(".desactivar_nueva_forma").hide();
            $(".activar_nueva_forma").show();
        });
        $(".procesar_nueva_forma").click(function(){
            if ($("#descripcion").val()!="" && $("#idforma").val()!=""){
                $.ajax({
                    type: "POST",
                    url: "{{path('listNewForma',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                    data: {
                        idforma: $("#idforma").val(),
                        descripcion: $("#descripcion").val(),
                    },
                    success: function(data1){
                        if (data1==1){ 
                            swal("Información!", "Opción almacenada correctamente!", "success"); 
                            $(".nueva_forma").hide();
                            $(".desactivar_nueva_forma").hide();
                            $(".activar_nueva_forma").show();
                            $("#descripcion").val(''); 
                            $('#table_list tbody').find("tr").remove();
                            if ($("#idforma").val()!=""){
                                $.ajax({
                                    type: "POST",
                                    url: "{{path('detalleFormas',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                                    data: {
                                        idforma: $("#idforma").val(),
                                    },
                                    success: function(data){
                                        if (data){                            
                                            $("#table_list-container").show();
                                            $("#table_list-container").html(data);   
                                        }                       
                                    }
                                });
                            }
                        }else if (data1==2){
                           swal("Error!", "No se pudo registrar la nueva opción, ya se encuentra registrada", "error"); 
                        } 
                        else if (data1==3){
                           swal("Error!", "No se pudo registrar la nueva opción", "error"); 
                        }                       
                    }
                });
            }else{
                swal("Error!", "Debe indicar la Opción a registrar", "error"); 
            }
        });

    });
    function desactivar(valor){
        var idforma = valor;
        $.ajax({
            type: "POST",
            url: "{{path('desactivarForma',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
            data: {
                idforma: idforma
            },
            success: function(data){
                if (data=='Ok'){
                    swal("Información!", "Las Forma fue inactivada correctamente!", "success");
                    //window.location.href = "{{ path('indexFormas',{'idproyectos':idproyectos,'idmodule':idmodule}) }}";
                    if ($("#idforma").val()!=""){
                        $.ajax({
                            type: "POST",
                            url: "{{path('detalleFormas',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                            data: {
                                idforma: $("#idforma").val(),
                            },
                            success: function(data){
                                if (data){                            
                                    $("#table_list-container").show();
                                    $("#table_list-container").html(data);   
                                }                       
                            }
                        });
                    }
                }else{
                    swal("Error!", "Ocurrio un error al inactivar la forma", "error");
                }
            }
        });
    }
</script>
<div class="container" style="margin-top:0px">
        <div class="row">
        <div class="col-md-12 text-right">
            <a href="{{ asset('Plantillas/Plantilla_Formas_Masivo.xlsx')}}" target="_blank"><img src="{{ asset('images/excel.png')}}">Descargar Template Carga Masiva</a>
        </div>
    </div>
    <h1 class="">Listado de Columnas</h1>

    <div class="row">
        <div class="form-group col-md-6">
            <label for="MP">MP</label>
            <select class="form-control" required="required" id="mp" name="mp">
                <option value="">Seleccione...</option>
                {% for mp in mps%}                   
                    <option value="{{mp.mp}}">{{mp.mp}}</option>
                {% endfor %}                
            </select>
        </div>
        <div class="form-group col-md-6">
            <label for="idforma">Campo</label>
            <select class="form-control list" required="required" id="idforma" name="idforma">
                <option value="">Seleccione...</option>
            </select>            
        </div>
    </div>
    <div class="row cargando text-center">
        <img src="{{ asset('images/spiral.gif') }}">
    </div>
    <div class="row text-right">
        <div class="col-md-12">
            <button type="button" class="btn btn-info col-md-offset-6 activar_nueva_forma"><i class="fa fa-angle-down"></i> Crear Nueva Opción</button>
            <button type="button" class="btn btn-success col-md-offset-6 desactivar_nueva_forma"><i class="fa fa-angle-up"></i> Ocultar Nueva Opción</button>
        </div>
    </div>
    <div class="container-fluid center-block nueva_forma">
        <div class="col-xs-8 col-md-8 col-md-offset-2 table-bordered">  
            <div class="row">
                <div class="form-group col-md-12">
                    <label for="descripcion">Opción</label>
                    <input type="text" name="descripcion" id="descripcion" class="form-control text-uppercase" placeholder="Descripción Opción" required="required">
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-12">
                      <button type="button" class="btn btn-success col-md-offset-6 procesar_nueva_forma">Guardar</button>
                </div>
            </div>
        </div>
    </div>
    <div id="table_list-container">
       
    </div>

</div>
{%endblock %}