{% 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-6 col-xs-12" >
        <div class="container" id="menuTop">

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

        </div>


    </div>
{%endblock %}        


{%block dashboard %}

    <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12   main">
        <style>
            .js-example-basic-single{
                width: 100%;
            }
            .js-example-basic-single .select2-arrow {
                background: white !important;
                background-image: none !important;
                border-left: none !important;
                margin-top: 5px !important;
            }
            .js-example-basic-single .select2-choice{
                display: block;
                width: 100%;
                height: 34px;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            }
            .js-example-basic-single .select2-choice:focus{
                border-color:#66afe9;
                outline:0;
                -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
            }
        </style>
        <script>
            function secondsToTime(secs)
            {
                secs = Math.round(secs);
                var hours = Math.floor(secs / (60 * 60));

                var divisor_for_minutes = secs % (60 * 60);
                var minutes = Math.floor(divisor_for_minutes / 60);

                var divisor_for_seconds = divisor_for_minutes % 60;
                var seconds = Math.ceil(divisor_for_seconds);

                var obj = {
                    "h": hours,
                    "m": minutes,
                    "s": seconds
                };
                if(hours < 10){
                    hours = "0"+hours;
                }
                if(minutes < 10){
                    minutes = "0"+minutes;
                }
                if(seconds < 10){
                    seconds = "0"+seconds;
                }
                tiempo = hours+":"+minutes+":"+seconds;
                return tiempo;
            }
            $(function () {
                $(".js-example-basic-single").select2({
                    placeholder: "Elegir...",
                    allowClear: true
                });
                $('#dialogVerComentario, #dialogComentario, #dialogAsigTicket, #dialogVerTicket').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 650,
                    height: 320
                });
                $('#dialogAsigTicket, #dialogEscarlarTicket').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 400,
                    height: 200
                })
                $('#dialogMensaje').dialog({
                    autoOpen: false ,
                    modal: true});
          $('#dialogStatus').dialog({
              autoOpen: false,
              modal: true,
              width: 400,
              height: 200
          });
                $("#aprobarTicketsBtn").click(function () {
                    $('#cargar').css('display', '');
                    idtickets = $(this).attr('ticketes');
                    ids = idtickets.split("|");
                    var overtimeDaytime = "";
                    var overtimeNighttime = "";
                    var overtimeHolidayDaytime = "";
                    var overtimeHolidayNighttime = "";
                    var overtimecharge = "";
                    var comments = "";
                    for (i = 0; i < (ids.length - 1); i++) {

                        overtimeDaytime += $("#" + ids[i] + "overtimeDaytime").val() + "|";
                        overtimeNighttime += $("#" + ids[i] + "overtimeNighttime").val() + "|";
                        overtimeHolidayDaytime += $("#" + ids[i] + "overtimeHolidayDaytime").val() + "|";
                        overtimeHolidayNighttime += $("#" + ids[i] + "overtimeHolidayNighttime").val() + "|";
                        overtimecharge += $("#" + ids[i] + "overtimecharge").val() + "|";
                        comments += $("#" + ids[i] + "comments").val() + "|";
                    }
                    //alert(overtimeDaytime);

                    $.ajax({
                        type: "POST",
                        url: "{{ path('cambiarEstadoMasivo',{'idproyectos':idproyectos}) }}",
                        data: {
                            $idtickets: idtickets, $idestados: 51, $idproceso: 14, $overtimeDaytime: overtimeDaytime,
                            $overtimeNighttime: overtimeNighttime, $overtimeHolidayDaytime: overtimeHolidayDaytime,
                            $overtimeHolidayNighttime: overtimeHolidayNighttime,
                            $overtimecharge: overtimecharge, $comments: comments

                        }
                    }).done(function (msj) {
                        $('#showTTBitacora').load("{{path('showTTBitacora',{'idproyectos':idproyectos, 'idmodule':idmodule})}}", {
                            $month: $('#month').val(), $userOpen:$('#userOpen').val(), $years: $("#years").val()});
                    });

                });

                $("#rechazarTicketsBtn").click(function () {
                    $('#cargar').css('display', '');
                    idtickets = $(this).attr('ticketes');
                    ids = idtickets.split("|");
                    var overtimeDaytime = "";
                    var overtimeNighttime = "";
                    var overtimeHolidayDaytime = "";
                    var overtimeHolidayNighttime = "";
                    var overtimecharge = "";
                    var comments = "";
                    for (i = 0; i < (ids.length - 1); i++) {

                        overtimeDaytime += $("#" + ids[i] + "overtimeDaytime").val() + "|";
                        overtimeNighttime += $("#" + ids[i] + "overtimeNighttime").val() + "|";
                        overtimeHolidayDaytime += $("#" + ids[i] + "overtimeHolidayDaytime").val() + "|";
                        overtimeHolidayNighttime += $("#" + ids[i] + "overtimeHolidayNighttime").val() + "|";
                        overtimecharge += $("#" + ids[i] + "overtimecharge").val() + "|";
                        comments += $("#" + ids[i] + "comments").val() + "|";
                    }
                    $.ajax({
                        type: "POST",
                        url: "{{ path('cambiarEstadoMasivo',{'idproyectos':idproyectos}) }}",
                        data: {
                            $idtickets: idtickets, $idestados: 50, $idproceso: 14, $overtimeDaytime: overtimeDaytime,
                            $overtimeNighttime: overtimeNighttime, $overtimeHolidayDaytime: overtimeHolidayDaytime,
                            $overtimeHolidayNighttime: overtimeHolidayNighttime,
                            $overtimecharge: overtimecharge, $comments: comments
                        }
                    }).done(function (msj) {
                        $('#showTTBitacora').load("{{path('showTTBitacora',{'idproyectos':idproyectos, 'idmodule':idmodule})}}", {
                            $month: $('#month').val(), $userOpen:$('#userOpen').val(), $years: $("#years").val()});
                    });
                });


                $("#myForm").click(function(){
                    // My form
                    var $form = $(this);

                    // If valid
                   //alert("envio");
                    if($('#userOpen').val()==""){
                        $("#dialogMensaje p").text("Debe seleccionar la Persona");

                        $('#dialogMensaje').dialog({
                            autoOpen: true ,
                            modal: true,
                            buttons:{
                                Cerrar: function () {
                                    $(this).dialog('close');
                                }
                            }})
                        $("#dialogMensaje").dialog('show');
                        return false;


                    }
                        //idbandeja = $("#idbandejaAct").val();
                        $('#cargar').css('display', 'block');
                        $('#showTTBitacora').load("{{path('showTTBitacora',{'idproyectos':idproyectos, 'idmodule':idmodule})}}", {
                            $month: $('#month').val(), $userOpen:$('#userOpen').val(), $years: $("#years").val()});
                    return true;
                });

          /*
                $("#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('BandejaMasiva',{'idproyectos':idproyectos, 'idmodule':idmodule})}}", {
                                        $idestado: $('#idestado').val(), $idproceso:$('#idproceso').val(),$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();
                        });
                });


        
        
                $('.filtroConsulta').buttonset();
                $('button').button();


                                 // $('#cargar').css('display', 'block');

                               /*   $('#BandejaPrincial').load("{{path('BandejaPrincial',{'idproyectos':idproyectos, 'idmodule':idmodule})}}", {$ticket: $('#ticketConsul').val(),
                                      $ttRef: $('#ttRefConsul').val(), $opc: $('input[name=opc]:checked').attr('id'),
                                      $idSitio: $('#idSitio').val(),
                                      $idTecnico: $('#idTecnico').val(), $idEstado: $('#idEstadoConsul').val()});*/
              /*                    $('#buscarTickets').click(function () {

                                     // $('#cargar').css('display', '');
                                    /*  $('#BandejaPrincial').load("{{path('BandejaPrincial',{'idproyectos':idproyectos, 'idmodule':idmodule})}}", {$ticket: $('#ticketConsul').val(),
                                          $ttRef: $('#ttRefConsul').val(), $opc: $('input[name=opc]:checked').attr('id'),
                                          $idSitio: $('#idSitio').val(),
                                          $idTecnico: $('#idTecnico').val(), $idEstado: $('#idEstadoConsul').val()});*/
               /*                   });

                                  ;*/
                              });




        </script>
  <div class="col-xs-12 col-md-12 col-lg-12  "  id="search-ticket"  style=" padding: 5px;">
               

      <div class="row hidden-xs ">
          <div class="col-lg-2 hidden-xs col-md-4 col-sm-4 col-lg-offset-2">
              Seleccione Año
          </div>
          <div class="col-lg-2 hidden-xs col-md-4 col-sm-4">
              Seleccione Mes
          </div>
          <div class="col-lg-2 hidden-xs col-md-4 col-sm-4">
              Seleccione Persona
          </div>
          
      </div>
      <div class="row hidden-xs ">
          <div class="col-lg-2  hidden-xs  col-md-4 col-sm-4 col-lg-offset-2">
              <select class="form-control" id="years" name="years">
                  <option></option>
                  <option {% if ("now" | date("Y") -1 )==("now" | date("Y") )%}selected="selected"{%endif%}  value="{{"now" | date("Y") - 1}}">{{"now" | date("Y") - 1}}</option>
                  <option {% if ("now" | date("Y") )==("now" | date("Y") )%}selected="selected"{%endif%} value="{{"now" | date("Y")}}">{{"now" | date("Y")}}</option>
              </select>
          </div>
          <div class="col-lg-2  hidden-xs  col-md-4 col-sm-4">
              <select class="form-control" id="month" name="month">
                  <option></option>
                  {% set a = 1 %}
                  {% for mes in meses %}
                      <option value="{{ a }}" {% if "now"|date("m")== a %}selected{% endif %}>{{ mes.mes }}</option>
                      {%  set a = a + 1 %}
                  {% endfor %}
              </select>
          </div>
          <div class="col-lg-2  hidden-xs  col-md-4 col-sm-4">
              <select class="js-example-basic-single" id="userOpen" name="user">
                  <option></option>
                  {% for usuario in usuarios %}
                      <option value="{{ usuario.iduser }}">{{ usuario.nombre }}</option>
                  {% endfor %}
              </select>
          </div>


          <div class="col-lg-2  hidden-xs  col-md-4 col-sm-4">
                  <button type="button" class="btn btn-default" id="myForm">
                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
                  </button>
          </div>

      </div>
  </div>
            <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="textComent" 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">
            <div id="datosCerrarTicket"></div>
            </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="Detalle del Ticket">
            <div id="verElTicket"></div>
        </div>
        <div class="container-fluid" >

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

        </div>


    </div>


    <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <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="exampleModalLabel">ALERTA: Horas extras</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-hover table-striped tablesorter table1">
                        <thead>
                        <th>Horas  Extras a Aprobar</th>
                        <th>Extra Diurna</th>
                        <th>Extra Nocturna</th>
                        <th>Extra Diurna Festivo</th>
                        <th>Extra Nocturna Festivo</th>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Horas Aprobando</td>
                            <td id="extrasDiurna"></td>
                            <td id="extrasNocturna"></td>
                            <td id="extrasDiurnaFestivo"></td>
                            <td id="extrasNocturnaFestivo"></td>
                        </tr>
                        <tr style="font-weight: bold; color: darkred">
                            <td style="font-weight: bold; color: darkred">Horas Totales Aprobadas en el Mes</td>
                            <td style="font-weight: bold; color: darkred" id="extrasDiurnaTotal"></td>
                            <td style="font-weight: bold; color: darkred" id="extrasNocturnaTotal"></td>
                            <td style="font-weight: bold; color: darkred" id="extrasDiurnaFestivoTotal"></td>
                            <td style="font-weight: bold; color: darkred" id="extrasNocturnaFestivoTotal"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal" ticketes="" id="aprobarTicketsBtn">Aprobar</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="alertModalRechazo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <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="exampleModalLabel">ALERTA: Horas extras</h4>
                </div>
                <div class="modal-body">

                    <table class="table table-bordered table-hover table-striped tablesorter table1">
                        <thead>
                            <th>Horas  Extras a Aprobar</th>
                            <th>Extra Diurna</th>
                            <th>Extra Nocturna</th>
                            <th>Extra Diurna Festivo</th>
                            <th>Extra Nocturna Festivo</th>
                        </thead>
                            <tbody>
                                <tr>
                                    <td>Horas Rechazando</td>
                                    <td id="extrasDiurnaRezachando"></td>
                                    <td id="extrasNocturnaRezachando"></td>
                                    <td id="extrasDiurnaFestivoRezachando"></td>
                                    <td id="extrasNocturnaFestivoRezachando"></td>
                                </tr>
                            </tbody>
                        </table>
                    <h1>¿Esta Seguro de rechazar los tickets ?</h1>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" ticketes="" id="rechazarTicketsBtn">Rechazhar</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}