{% 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" >
        <div>

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

        </div>


    </div>
{%endblock %}        

{%block dashboard %}
    <style>
        @media (max-width: 450px) {
            .main2{
                margin-top: 0px;
            }


        }

        .bs-example:after {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 12px;
            font-weight: 700;
            color: #959595;
            text-transform: uppercase;
            letter-spacing: 1px;
            content: "{{ 'ticketDetail.inbox' | trans }}: ";
        }
    </style>

    <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12 " style="width:  100%">

        <script>
            $(function () {
                $("#btnSetOpcion").click(function () {
                    $("#cargar").css('display', '');
                    idbandeja = $("#idbandejaAct").val();
                    //alert($('input[name=opc]:checked').attr('id'));
                    $.ajax({
                        type:'POST',
                        url:'{{ path('setOpcDefaul',{'idproyectos':idproyectos}) }}',
                        data: {$opc:$('input[name=opc]:checked').attr('id'),  $idbandeja:idbandeja}
                    }).done(function (json) {

                        $("#cargar").css('display', 'none');
                    });
                });
                $('.datepicker').datepicker({
                    dateformat: 'YY-mm-dd'
                });
                $('#dialogMensaje, #dialogResolved').dialog({
                    autoOpen: false ,
                    modal: true});
          $('#dialogStatus').dialog({
              autoOpen: false,
              modal: true,
              width: 400,
              height: 200
          });
                $("#addShow").click(function(){
                  $('#camposShow').removeClass('hidden');
                    $(this).addClass('hidden');
                });
                $("#addHidden").click(function(){
                  $('#camposShow').addClass('hidden');
                    $("#addShow").removeClass('hidden');
                });
                $('#cargar').css('display', 'block');


                                  $('#BandejaPrincial').load("{{path('mainInboxMP',{'idproyectos':idproyectos, 'idmodule':idmodule})}}", {
                                        $data: null,$opc: $('input[name=opc]:checked').attr('id')});



                $('.campos label label').click(function(){
                        $.ajax({
                            type: "POST",
                            async: true,
                            url: "{{path('removeFiltro',{'idproyectos':idproyectos})}}",
                            data: {$idfiltro:  $(this).attr('id')}
                        }).done(function (msj) {
                            location.reload();
                        });
                });
                
                $('#addFiltro').click(function(){
                   
                    
                        $.ajax({
                            type: "POST",
                            async: true,
                            url: "{{path('addFiltro',{'idproyectos':idproyectos})}}",
                            data: {$idfiltro:  $('#newFiltros').val()}
                        }).done(function (msj) {
                            location.reload();
                        });
                });
        $("#myForm").submit(function(){
            // My form
            var $form = $(this);

            // If valid
            if($form){
                    idbandeja = $("#idbandejaAct").val();
                $('#cargar').css('display', 'block');
                                  $('#BandejaPrincial').load("{{path('mainInboxMP',{'idproyectos':idproyectos, 'idmodule':idmodule})}}", {
                                        $data: $form.serialize(),$opc: $('input[name=opc]:checked').attr('id'), $idbandeja: idbandeja});
            }
            return false;
        });
        
        
                $('.filtroConsulta').buttonset();
                $('button').button();



                                  $('#dialogVerComentario, #dialogComentario, #dialogAsigTicket, #dialogVerTicket').dialog({
                                      autoOpen: false,
                                      modal: true,
                                      width: 650,
                                      height: 320
                                  });
                                  $('#dialogAsigTicket, #dialogEscarlarTicket').dialog({
                                      autoOpen: false,
                                      modal: true,
                                      width: 400,
                                      height: 200
                                  });
                              });



                              var id = setTimeout("actualiza()", 18000000);
                              function actualiza() {
                                  location.href = '{{path('logout')}}';
                              }
        </script>

  <div class="col-xs-12 col-md-12 col-lg-12   hidden-md "  id="search-ticket" style=" padding: 5px;">
      <div class="col-xs-12 col-md-12 col-lg-12 hidden-md hidden-sm " >
          
            <div class="col-lg-2 col-xs-12 hidden-md">
                <button type="submit" class="btn btn-default" id="addShow">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>{{'inbox.filters' | trans}}
                </button>
            </div>
      </div>
            <div class="row  hidden" id="camposShow">
                <div class="col-lg-4 col-xs-12 hidden-md">
            <select id="newFiltros">
               {% for campo  in campos %}
                   <option value="{{campo.idfiltro}}">
                       {{ campo.alias | trans}}
                   </option>
                {% endfor %}                 
            </select>
                </div>
            <div class="col-lg-3 col-xs-12 hidden-md hidden-sm">
                <button type="submit" class="btn btn-default" id="addFiltro">
                <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span>{{'inbox.add' | trans}}
                </button>
                <button type="submit" class="btn btn-danger" id="addHidden">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ></span> {{'inbox.hide' | trans}}
                </button>
            </div>
          
            </div>
  </div>
        <form id="myForm"  action="#" method="POST" >
  <div class="col-xs-12 col-md-12 col-lg-12  "  id="search-ticket"  style=" padding: 5px;">
               
      <div class="row">
                <div class=" row col-lg-10 nopadding col-xs-10  col-md-10 col-sm-10 col-lg-offset-2 col-xs-offset-1 col-md-offset-2" >

                    <div class="btn-group nopadding" data-toggle="buttons">
                        <label class="btn btn-default {% if opcion == 0 %} active {% endif %}">
                            <input  type="radio"   id="0" {% if opcion == 0 %} checked="true" {% endif %} name="opc"> {{'inbox.mysites' | trans}}
                        </label>
                        <label class="btn btn-default  {% if opcion == 1 %} active {% endif %}">
                            <input type="radio" id="1" name="opc" {% if opcion == 1 %} checked="true" {% endif %}  > {{'inbox.mydpto' | trans}}
                        </label>
                        <label class="btn btn-default {% if opcion == 2 %} active {% endif %} ">
                            <input type="radio" id="2" name="opc"  {% if opcion == 2 %} checked="true" {% endif %} > {{'inbox.all' | trans}}
                        </label>
                        <button class="btn btn-success btn-sm" id="btnSetOpcion">Set Default</button>
                    </div>

                </div>
      </div>
      <div class="row">
            <div class=" col-lg-14 col-xs-14 col-md-14 col-lg-14 ">
            <div class="col-lg-10 col-xs-10 col-md-10 col-lg-10 ">
                                   {% for form_field  in form %}
                <div class="col-lg-2  col-xs-12 hidden-md hidden-sm">
                    <div class=" form-group campos">
                        <label  class="control-label">
                            {{ form_label(form_field) }}
                        </label>
                            {{ form_widget(form_field) }}                        
                    </div>  
                </div>
            {% endfor %} 
            </div>
            <div class="col-lg-2  col-xs-12">
                <button type="submit" class="btn btn-default">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span> {{'inbox.search' | trans}}
                </button>
            </div>
            
            
            </div>
      </div>
  </div>
            <input type="hidden" id="idbandejaAct" value="">
        </form>
                                       


            <br><br>

        <div id="dialogComentario" title="Agregar Comentario">
            <table class="ui-widget negrillas"  style="margin: auto; width: 95%;">
                <tr>
                    <td>{{'ticketDetail.comments.comentario' | trans}}:</td>
                </tr>
                <tr>
                    <td><textarea id="textComentNew" style=" height: 200px; width: 95%; margin: auto;"></textarea></td>
                </tr>
            </table>
        </div>



        <div id="dialogVerComentario" title=" Comentarios">
            <div id="verComentarioTicket"></div>
        </div>
        <div id="dialogStatus" title=" Estados" >
            <div id="verEstados"></div>
        </div>
        <div id="dialogMensaje" title="Alerta"><p></p></div>
        <div id="dialogResolved" title="Alerta"  class="modal">
            <div id="datosCerrarTicket"></div>
            </div>
        <!-- <div id="dialogAsigTicket" title="Asignar Ticket">
            <table class="ui-widget negrillas"  style="margin: auto; width: 95%;">
                <tr>
                    <td>Seleccione Persona</td>
                </tr>
                <tr>
                    <td>
                        <select id="idUserAsignada">
                            {# for usuario in usuarios %}
                                {%if idUser != usuario.idUser%}
                                    <option value="{{usuario.idUser}}" iddepartamento="{{usuario.iddepartamento}}">{{usuario.nombre}}/ Dpto: {{usuario.departamento}}</option>
                                {% endif %}
                            {% endfor#}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Comentario:</td>
                </tr>
                <tr>
                    <td>
                        <textarea id="comentarioAsignacion"></textarea>
                    </td>
                </tr>
            </table>
        </div>
        <div id="dialogEscarlarTicket" title="Escalar Ticket">
            <table class="ui-widget negrillas"  style="margin: auto; width: 95%;">
                <tr>
                    <td>Seleccione Area</td>
                </tr>
                <tr>
                    <td>
                        <select id="iddepartamentoEscala">
                            {# for departamento in departamentos }
                                {%if idDpto != departamento.iddepartamento%}
                                    <option value="{{departamento.iddepartamento}}">{{departamento.departamento}}</option>
                                {% endif %}
                            {% endfor#}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Comentario:</td>
                </tr>
                <tr>
                    <td>
                        <textarea id="comentarioEscalacion"></textarea>
                    </td>
                </tr>
            </table>
        </div>-->

        <style>

            .container-fluid  {
                
                padding: 0 15px;
            }
            @media(max-width: 768px){

                .container-fluid {
                    padding: 0 15px;
                    margin: 0px;
                }

                #tablaTickets {
                    table-layout: fixed;
                    word-wrap: break-word;
                     
                }
            }

            .table-responsive {
                width: 100%;
                margin-bottom: 15px;
             /* overflow-x: auto; */
                overflow-y: visible;
               /*  -webkit-overflow-scrolling: touch;
                -ms-overflow-style: -ms-autohiding-scrollbar;*/
                border: 1px solid #ddd;
            }
        </style>



        <div id="dialogVerTicket" title="Detail of Site" class="hidden-xs">
            <div id="verElTicket"></div>
        </div>

            <div id="BandejaPrincial" class="row-fluid"></div>



    </div>
{% endblock %}