{% 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: 0;
            }


        }

        .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   main">

        <script>
            $(function () {
                $('.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('bandejaPrincipalNew',{'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('bandejaPrincipalNew',{'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>
        <!-- Carlos -->

    {% if idproyectos != 207 %}
        <div class="col-xs-12 col-md-8 col-lg-8   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>
    {% endif %}
    <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 active ">
                            <input  type="radio" checked="true"  id="0" name="opc"> {{'inbox.mysites' | trans}}
                        </label>
                        <label class="btn btn-default  hidden-xs">
                            <input type="radio" id="1" name="opc" > {{'inbox.mydpto' | trans}}
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" id="2" name="opc" > {{'inbox.all' | trans}}
                        </label>
                    </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: 0;
                }

                #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="{{'inbox.dialogVerTicket' | trans}}" class=""> <!-- Carlos -->
            <div id="verElTicket"></div>
        </div>
        <div class="container-fluid" >

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

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