{% extends "base.html.twig"%}

 {% block menuTop %}
    <div class="col-lg-6 col-xs-12" >
        <div class="container" id="menuTop">

            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}

        </div>


    </div>
{%endblock %}
{% block dashboard %}
    <script>
        $(function(){
            
        $('.datetimepicker1').datetimepicker();
        $(".crearNotificacion").click(function(){
            $(".jqte-test").jqte().val();
            $(".jqte-test").jqte()
        });
        var tabla =0;        
                    $("#seleccionarTabla").click(function(){
                        $(".seleccionarTabla").show();
                        $(".crearTabla").hide();
                        tabla = 1;
                        $(".crearTabla input, .crearTabla textarea").val('');
                        $(".crearTabla input, .crearTabla textarea").text('');
                    });
                    $("#crearTabla").click(function(){
                        $(".crearTabla").show();
                        $(".seleccionarTabla").hide();
                        tabla = 1;
                        $(".seleccionarTabla input, .crearTabla textarea").val('');
                        $(".seleccionarTabla input, .crearTabla textarea").text('');
                        
                    });
                    $("#seleccionarTabla2").click(function(){
                        $(".seleccionarTabla2").show();
                        $(".crearTabla2").hide();
                        tabla = 2;
                        $(".crearTabla2 input, .crearTabla2 textarea").val('');
                        $(".crearTabla2 input, .crearTabla2 textarea").text('');
                    });
                    $("#crearTabla2").click(function(){
                        $(".crearTabla2").show();
                        tabla =2;
                        $(".seleccionarTabla2").hide();
                        $(".seleccionarTabla2 input, .crearTabla2 textarea").val('');
                        $(".seleccionarTabla2 input, .crearTabla2 textarea").text('');
                        
                    });
                    $("#seleccionarTabla3").click(function(){
                        $(".seleccionarTabla3").show();
                        $(".crearTabla3").hide();
                        tabla = 3;
                        $(".crearTabla3 input, .crearTabla3 textarea").val('');
                        $(".crearTabla3 input, .crearTabla3 textarea").text('');
                    });
                    $("#crearTabla3").click(function(){
                        tabla = 3;
                        $(".crearTabla3").show();
                        $(".seleccionarTabla3").hide();
                        $(".seleccionarTabla3 input, .crearTabla3 textarea").val('');
                        $(".seleccionarTabla3 input, .crearTabla3 textarea").text('');
                        
                    });
                    $("#seleccionarTabla4").click(function(){
                        tabla = 4;
                        $(".seleccionarTabla4").show();
                        $(".crearTabla4").hide();
                        $(".crearTabla4 input, .crearTabla4 textarea").val('');
                        $(".crearTabla4 input, .crearTabla4 textarea").text('');
                    });
                    $("#crearTabla4").click(function(){
                        tabla = 4;
                        $(".crearTabla4").show();
                        $(".seleccionarTabla4").hide();
                        $(".seleccionarTabla4 input, .crearTabla4 textarea").val('');
                        $(".seleccionarTabla4 input, .crearTabla4 textarea").text('');
                        
                    });
            $("#seleccionarTabla5").click(function(){
                tabla = 5;
                $(".seleccionarTabla5").show();
                $(".crearTabla5").hide();
                $(".crearTabla5 input, .crearTabla5 textarea").val('');
                $(".crearTabla5 input, .crearTabla5 textarea").text('');
            });
            $("#crearTabla5").click(function(){
                tabla = 5;
                $(".crearTabla5").show();
                $(".seleccionarTabla5").hide();
                $(".seleccionarTabla5 input, .crearTabla5 textarea").val('');
                $(".seleccionarTabla5 input, .crearTabla5 textarea").text('');

            });
                    
        $("#seleccionaReporte").click(function(){
            valor = $("#reporte").val();
            texto = $("#reporte option[value='"+valor+"']").text();
            $("#nomReporte"+tabla).val(texto);
            $("#idTabla"+tabla).val(valor);
        $('#seleccioneReporte').modal('hide');
        });
        $("#agregarDestinatarios").load("{{path('agregarDestinatarios',{'idproyectos':idproyectos,'idnotificacion':idnotificacion})}}");
        
        });
        function showReporte(idtabla,tipo){
            if(tipo==1){
            idReporte = $("#idTabla"+idtabla).val();
                        $('#showReporte').load('{{path('showReporte2',{'idproyectos':idproyectos})}}',
                        {$idReporte:idReporte ,$tipo:tipo
                        },function(){
                            $('#showReport').modal('show');
                            
                        });
                    }else{
                        query =$("#tabla"+idtabla).val().replace(/\r?\n/g, " ");
                        titulo =$("#nomTabla"+idtabla).val()
                        $('#showReporte').load('{{path('showReporte2',{'idproyectos':idproyectos})}}',
                        {$tipo:tipo, $query: query, $titulo : titulo
                        },function(){
                            $('#showReport').modal('show');
                            
                        });
                    };
        }
                    
                    function validaFrom(){
                    var campo = new Object();
                    if($("#notificacion").val()!=""){
                        campo.notificacion = $("#notificacion").val();
                    }else{
                        alert("debe ingresar nombre de la notificacion");
                        return false;
                    }
                    if($(".jqte-test").jqte().val()!=""){
                        campo.body = $(".jqte-test").jqte().val();
                    }else{
                        alert("debe ingresar el  Body");
                        return false;
                    }
                    if($("#fechaIni").val()!=""){
                        campo.fechaIni = $("#fechaIni").val();
                    }else{
                        alert("debe ingresar fecha Inicio");
                        return false;
                    }
                        campo.fechaFin = $("#fechaFin").val();
                        campo.periocidad = $("#periocidad").val();
                    if($("#cantidad").val()!=""){
                        campo.cantidad = $("#cantidad").val();
                    }else{
                        alert("debe ingresar la cantidad");
                        return false;
                    }
                        campo.idTabla1 = $("#idTabla1").val();
                        campo.idTabla2 = $("#idTabla2").val();
                        campo.idTabla3 = $("#idTabla3").val();
                        campo.idTabla4 = $("#idTabla4").val();
                        campo.idTabla5 = $("#idTabla5").val();

                        campo.nomTabla1 = $("#nomTabla1").val();
                        campo.nomTabla2 = $("#nomTabla2").val();
                        campo.nomTabla3 = $("#nomTabla3").val();
                        campo.nomTabla4 = $("#nomTabla4").val();
                        campo.nomTabla5 = $("#nomTabla5").val();

                        campo.tabla1 = $("#tabla1").val();
                        campo.tabla2 = $("#tabla2").val();
                        campo.tabla3 = $("#tabla3").val();
                        campo.tabla4 = $("#tabla4").val();
                        campo.tabla5 = $("#tabla5").val();
                        $.ajax({
                    type: "POST",
                    async: true,
                    url: "{{path('crearNotificacion',{'idproyectos':idproyectos, 'idmodule':idmodule})}}",
                    data: {$campo: campo, $idnotificacion : {{idnotificacion}}}
                }).done(function (msj) {
                        alert('Se creo la notificación con exito');


                        location.href = "{{path('editNotificacion',{'idproyectos':idproyectos,'idmodule':idmodule, 'idNotificacion':'nuevo'})}}?notificacion=" + msj;
                        $('#cargar').css('display', 'none');
                    
                });
                return false;
                
                    }
                    function agregarDestinatario(){
                        iduser = $("#iduser").val();
                        tipo = $("#tipoSend").val();
                        $.ajax({
                    type: "POST",
                    async: true,
                    url: "{{path('notificacionUser',{'idproyectos':idproyectos, 'idnotificacion':idnotificacion})}}",
                    data: {$iduser: iduser, $tipo:tipo , $opc:'new'}
                }).done(function (msj){
                    $("#agregarDestinatarios").load("{{path('agregarDestinatarios',{'idproyectos':idproyectos,'idnotificacion':idnotificacion})}}");
                    
                });
                    }
                    function editar(iduser,opc){
                        tipo = $("#tipoSendEdit").val();
                        $.ajax({
                    type: "POST",
                    async: true,
                    url: "{{path('notificacionUser',{'idproyectos':idproyectos, 'idnotificacion':idnotificacion})}}",
                    data: {$iduser: iduser,  $tipo:tipo ,$opc:opc}
                }).done(function (msj){
                    $("#agregarDestinatarios").load("{{path('agregarDestinatarios',{'idproyectos':idproyectos,'idnotificacion':idnotificacion})}}");
                    
                });
                    }
    </script>
<div class="col-lg-12 col-xs-12  center-block" >
    <form action="#" onsubmit="return validaFrom()" method="POST" >
    <div class="container col-lg-8 col-xs-12 col-lg-offset-2" >
        <div class="panel panel-info" >
            <div class="panel-heading">Nueva Notificacion</div>
            <div class="panel-body">
                    <button type="submit" class="btn btn-info center-block crearNotificacion">Editar Notificacion</button>     
                <div class="row" >
                            <div class="form-group">
                                <label for="notificacion" class="col-lg-4 control-label">Notificacion</label>
                                    <input class="form-control" type="text" id="notificacion" name="notificacion" value="{{notificacion.0.notificacion}}">
                            </div>
                </div>
                <div class="row" >
                                <label for="body" class="col-lg-4 control-label">Body</label>
                </div>
                <div class="row" >                
                    <textarea name="textarea" class="jqte-test">{{notificacion.0.body|raw}}</textarea>
                </div>
                <div class="row" >
                    <div class=" col-lg-6">
                            <div class="form-group">
                                <label for="fechaIni" class="col-lg-4 control-label ">{{'monitor.etiqueta.fechaI' | trans}}</label>
                                
                        <div class='input-group date datetimepicker1' >
                            <input id="fechaIni" type='text' class="form-control" data-date-format="YYYY-MM-DD HH:mm" value="{{notificacion.0.fechaIni}}"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div></div>
                        </div>
                    <div class=" col-lg-6">
                            <div class="form-group">
                                <label for="fechaFin" class="col-lg-4 control-label">{{'monitor.etiqueta.fechaF' | trans}}</label>
                                
                        <div class='input-group date datetimepicker1' >
                            <input id="fechaFin" type='text' class="form-control" data-date-format="YYYY-MM-DD HH:mm"  value="{{notificacion.0.fechaFin}}"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                            </div>
                            </div>
                        </div>
                <div class="row" >
                    <div class=" col-lg-6">
                            <div class="form-group">
                                <label for="cantidad" class="col-lg-4 control-label">{{'Cantidad' | trans}}</label>
                                    <input class="form-control" type="text" id="cantidad" name="cantidad"  value="{{notificacion.0.tiempo}}">
                            </div>
                        </div>
                    <div class=" col-lg-6">
                            <div class="form-group">
                                <label for="periocidad" class="col-lg-4 control-label">Periocidad</label>
                                    <select class="form-control" id="periocidad">
                                        {% for periocidad in periocidades %}
                                            <option value="{{periocidad.idperiocidad}}" {% if  notificacion.0.idperiocidad == periocidad.idperiocidad%} selected="true"{% endif %}>{{periocidad.periocidad}}</option>
                                            {% endfor %}
                                    </select>
                            </div>
                        </div>
                </div>
                </div>
                <div class="row" >
                                <label for="tabla1" class="col-lg-4 control-label">Tabla 1</label>
                </div>
                <div class="row" >
                    <div style=" margin-left: 5%;">
                    <button class="btn btn-info" type="button" id="seleccionarTabla" data-toggle="modal"  data-target="#seleccioneReporte">Selecionar</button>
                    <button class="btn btn-info" type="button" id="crearTabla">Crear</button>
                    </div>
                    <div  {%if notificacion.0.idTabla1 == false %}style=" display: none;"{% endif %} class="seleccionarTabla row">
                <div class="input-group" >
                        <input type="text"  class="form-control "disabled placeholder="Nombre" id="nomReporte1" aria-describedby="showReporte1"  value="{{notificacion.0.nomTabla1}}" >
                    <span class="input-group-addon glyphicon glyphicon-eye-open" id="showReporte1" onclick="showReporte(1,1)" class="showReporte1" title="Vista Previa"></span>
                    </div>
                        <input type="hidden" id="idTabla1" value="{{notificacion.0.idTabla1}}">
                    </div>
                    <div  style=" display: none;" class="crearTabla">
                        <input type="text"  class="form-control" placeholder="Nombre" id="nomTabla1"  >
                    </div>
                <div class="input-group crearTabla" style=" display: none;" >
                    <textarea type="text" class="form-control" placeholder="Tabla 1" aria-describedby="basic-addon1" id="tabla1"></textarea>
                        <span class="input-group-addon glyphicon glyphicon-eye-open" id="basic-addon1"  onclick="showReporte(1,2)" title="Vista Previa"></span>
                  </div>
                    
                </div>
                <div class="row" >
                                <label for="tabla2" class="col-lg-4 control-label">Tabla 2</label>
                </div>
                <div class="row" >
                    <div style=" margin-left: 5%;">
                    <button class="btn btn-info"  type="button" id="seleccionarTabla2"  data-toggle="modal" data-target="#seleccioneReporte">Selecionar</button>
                    <button class="btn btn-info" type="button" id="crearTabla2">Crear</button>
                    </div>
                    <div {%if notificacion.0.idTabla2 == false %} style=" display: none;"{% endif %} class="seleccionarTabla2">
                <div class="input-group" >
                        <input type="text"  class="form-control "disabled placeholder="Nombre" id="nomReporte2"  value="{{notificacion.0.nomTabla2}}" >
                    <span class="input-group-addon glyphicon glyphicon-eye-open" id="showReporte2" onclick="showReporte(2,1)" class="showReporte1" title="Vista Previa"></span>
                    </div>
                        <input type="hidden" id="idTabla2" value="{{notificacion.0.idTabla2}}">
                    </div>
                    <div  style=" display: none;" class="crearTabla2">
                        <input type="text"  class="form-control" placeholder="Nombre"id="nomTabla2"  >
                    </div>
                <div class="input-group crearTabla2" style=" display: none;" >
                    <textarea type="text" class="form-control" placeholder="Tabla 2" aria-describedby="basic-addon2"  id="tabla2"></textarea>
                        <span class="input-group-addon glyphicon glyphicon-eye-open" id="basic-addon2"  onclick="showReporte(2,2)" title="Vista Previa"></span>
                  </div>


                    <div class="row" >
                        <label for="tabla5" class="col-lg-4 control-label">Tabla 3</label>
                    </div>
                    <div class="row" >
                        <div style=" margin-left: 5%;">
                            <button class="btn btn-info"  type="button" id="seleccionarTabla5"  data-toggle="modal" data-target="#seleccioneReporte">Selecionar</button>
                            <button class="btn btn-info" type="button" id="crearTabla5">Crear</button>
                        </div>
                        <div {%if notificacion.0.idTabla3 == false %} style=" display: none;"{% endif %} class="seleccionarTabla5">
                            <div class="input-group" >
                                <input type="text"  class="form-control "disabled placeholder="Nombre" id="nomReporte5"  value="{{notificacion.0.nomTabla5}}" >
                                <span class="input-group-addon glyphicon glyphicon-eye-open" id="showReporte5" onclick="showReporte(5,1)" class="showReporte1" title="Vista Previa"></span>
                            </div>
                            <input type="hidden" id="idTabla5" value="{{notificacion.0.idTabla3}}">
                        </div>
                        <div  style=" display: none;" class="crearTabla5">
                            <input type="text"  class="form-control" placeholder="Nombre"id="nomTabla5"  >
                        </div>
                        <div class="input-group crearTabla5" style=" display: none;" >
                            <textarea type="text" class="form-control" placeholder="Tabla 5" aria-describedby="basic-addon5"  id="tabla5"></textarea>
                            <span class="input-group-addon glyphicon glyphicon-eye-open" id="basic-addon5"  onclick="showReporte(5,2)" title="Vista Previa"></span>
                        </div>


                </div>
                <div class="row" >
                                <label for="adjuntoTabla1" class="col-lg-4 control-label">Adjunto Tabla 1</label>
                </div>
                <div class="row" >
                    <div style=" margin-left: 5%;">
                    <button class="btn btn-info"  type="button" id="seleccionarTabla3"  data-toggle="modal" data-target="#seleccioneReporte">Selecionar</button>
                    <button class="btn btn-info"  type="button" id="crearTabla3">Crear</button>
                    </div>
                    <div  {%if notificacion.0.idTablaAdjunto1 == false %} style=" display: none;"{% endif %} class="seleccionarTabla3">
                <div class="input-group" >
                        <input type="text"  class="form-control "disabled placeholder="Nombre" id="nomReporte3"  value="{{notificacion.0.nomTabla3}}"  >
                    <span class="input-group-addon glyphicon glyphicon-eye-open" id="showReporte3" onclick="showReporte(3,1)" class="showReporte1" title="Vista Previa"></span>
                    </div>
                        <input type="hidden" id="idTabla3" value="{{notificacion.0.idTablaAdjunto1}}">
                    </div>
                    <div  style=" display: none;" class="crearTabla3">
                        <input type="text"  class="form-control" placeholder="Nombre" id="nomTabla3"  >
                    </div>
                <div class="input-group crearTabla3" style=" display: none;" >
                    <textarea type="text" class="form-control" placeholder="Adjunto Tabla 1" aria-describedby="basic-addon3" id="tabla3"></textarea>
                        <span class="input-group-addon glyphicon glyphicon-eye-open" id="basic-addon3"  onclick="showReporte(3,2)" title="Vista Previa"></span>
                  </div>
                    
                </div>
                <div class="row" >
                                <label for="adjuntoTabla12" class="col-lg-4 control-label">Adjunto Tabla 2</label>
                </div>
                <div class="row" >
                    <div style=" margin-left: 5%;">
                    <button class="btn btn-info"  type="button" id="seleccionarTabla4"  data-toggle="modal" data-target="#seleccioneReporte">Selecionar</button>
                    <button class="btn btn-info" type="button" id="crearTabla4">Crear</button>
                    </div>
                    <div   {%if notificacion.0.idTablaAdjunto2 == false %} style=" display: none;"{% endif %} class="seleccionarTabla4">
                <div class="input-group" >
                        <input type="text"  class="form-control " disabled placeholder="Nombre" id="nomReporte4"  value="{{notificacion.0.nomTabla4}}" >
                    <span class="input-group-addon glyphicon glyphicon-eye-open" id="showReporte4" onclick="showReporte(4,1)" class="showReporte1" title="Vista Previa"></span>
                    </div>
                        <input type="hidden" id="idTabla4" value="{{notificacion.0.idTablaAdjunto2}}">
                    </div>
                    <div  style=" display: none;" class="crearTabla4">
                        <input type="text"  class="form-control" placeholder="Nombre" id="nomTabla4"  >
                    </div>
                <div class="input-group crearTabla4" style=" display: none; " >
                    <textarea type="text" class="form-control" placeholder="Adjunto Tabla 2" aria-describedby="basic-addon4" id="tabla4"></textarea>
                        <span class="input-group-addon glyphicon glyphicon-eye-open" id="basic-addon4" onclick="showReporte(4,2)" title="Vista Previa"></span>
                  </div>
                    
                </div>
                <div id="agregarDestinatarios" class="row  col-lg-10" style="margin-left: 50px;"></div>                  
                    <button type="submit" class="btn btn-info center-block">Editar Notificacion</button>                  
               
            </div>
        </div>
    </form>
    </div>
<script>
	$('.jqte-test').jqte();
	
	// settings of status
	var jqteStatus = true;
	$(".status").click(function()
	{
		jqteStatus = jqteStatus ? false : true;
		$('.jqte-test').jqte({"status" : jqteStatus})
	});
        
</script>
<!-- Button trigger modal -->
<div class="modal fade" role="dialog" id="seleccioneReporte">
  <div class="modal-dialog" 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="gridSystemModalLabel">Seleccione Reporte</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4 col-lg-3">Seleccione Reporte</div>
            <div class="col-md-8 col-lg-9">
                    <select  class="form-control" id="reporte">
                        {% for reporte in reportes %}
                        <option value="{{reporte.idreporte}}">{{reporte.reporte}}</option>
                        {% endfor %}
                    </select> 
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
        <button type="button" class="btn btn-primary" id="seleccionaReporte">Seleccionar</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="showReport" class="modal fade"  role="dialog">
  <div class="modal-dialog" 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="gridSystemModalLabel">Vista Previa Reporte</h4>
      </div>
      <div class="modal-body" id="showReporte" style=" height: 500px; overflow-y: scroll;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

{% endblock %}