{% 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 %}
    <script>
        $(function(){

            $("#fileTask2, #fileTask3").fileinput({
                uploadAsync: false,
                showUpload: false,
                minFileCount: 1,
                maxFileCount: 1,
                overwriteInitial: true,
                uploadExtraData: function() {
                    return {
                        idproceso: $("#idproceso").val()
                    };
                },
                showPreview: false,
                previewFileExtSettings: {
                    'doc': function (ext) {
                        return ext.match(/(doc|docx)$/i);
                    },
                    'xls': function (ext) {
                        return ext.match(/(xls|xlsx)$/i);
                    },
                    'ppt': function (ext) {
                        return ext.match(/(ppt|pptx)$/i);
                    }
                }
            });
            $('#dialogVerComentario, #dialogComentario, #dialogAsigTicket, #dialogVerTicket, #dialogVisita').dialog({
                autoOpen: false,
                modal: true,
                width: 650,
                height: 320
            });

            $("#reqSitio").change(function () {
                if($(this).val()=="SI") {
                    $(".trSitio").css("display","");
                }else {
                    $(".trSitio").css("display","none");

                }
            });

            $(".technnicianSite").click(function(){
                idticket = $(this).attr('idticket');
                $("#btnSaveFTSite").attr('idticket', idticket);
                $('#modalVisitSite').modal();

            })

            $("#btnSaveFTSite").click(function () {
                $("#formTehnicianGoSite").ajaxSubmit({
                    beforeSubmit: function (formData, jqForm, options) {


                        nameTechnician = $("#nameTechnician").val();
                        lastNameTechnician = $("#lastNameTechnician").val();
                        idTechnician = $("#idTechnician").val();
                        phone = $("#phoneTechnician").val();
                        obsTechnician = $("#obsTechnician").val();
                        idticket = $("#btnSaveFTSite").attr('idticket');

                        var idticketField = {
                            name: '$idticket',
                            required: true,
                            type: "text",
                            value: $("#btnSaveFTSite").attr('idticket')
                        };
                        formData.push(idticketField);

                        var nameTechnicianField = {
                            name: '$name',
                            required: true,
                            type: "text",
                            value: nameTechnician
                        };
                        formData.push(nameTechnicianField);

                        var lastNameTechnicianField = {
                            name: '$lastname',
                            required: true,
                            type: "text",
                            value: lastNameTechnician
                        };
                        formData.push(lastNameTechnicianField);

                        var idTechnicianField = {
                            name: '$idTechnician',
                            required: true,
                            type: "text",
                            value: idTechnician
                        };
                        formData.push(idTechnicianField);

                        var phoneField = {
                            name: '$phone',
                            required: true,
                            type: "text",
                            value: phone
                        };
                        formData.push(phoneField);

                        var obsTechnicianField = {
                            name: '$obs',
                            required: true,
                            type: "text",
                            value: obsTechnician
                        };
                        formData.push(obsTechnicianField);


                    },
                    error: function (error) {

                        $(".loading").hide();
                        swal(error.statusText, "Please Contact The Administrator Sever", "error");
                    },
                    success: function (msj, statusText, xhr, $form) {
                        location.reload();

                    }
                });/*
                $.ajax({
                    type:'POST',
                    url: '{{ path('technicianGoSite',{'idproyectos': idproyectos}) }}',
                    data:{ $name : nameTechnician, $lastname : lastNameTechnician, $idTechnician: idTechnician, $phone: phone, $obs: obsTechnician, $idticket: idticket }
                }).done(function (msj) {
                    //location.reload();
                })*/
            })


            $('.visitaSitio').click(function () {
                idticket = $(this).attr('idticket');
                $('#dialogVisita').dialog({
                    autoOpen: true,
                    modal: true,
                    buttons: {
                        Guardar: function () {
                            $('#cargar').css('display', '');
                            comentario = $('#documentacion').val();
                            $.ajax({
                                type: "POST",
                                async: true,
                                url: "{{path('visitoSitio',{'idproyectos':idproyectos})}}",
                                data: {$comentario: comentario, $idticket: idticket, $opc:$("#reqSitio").val()}
                            }).done(function (msj) {
                                $('#cargar').css('display', 'none');
                                $('#documentacion').val('');
                                $('#documentacion').text('');
                                location.reload();
                            });
                        },
                        Cancelar: function () {
                            $('#cargar').css('display', '');
                            $(this).dialog('close');

                        },
                    }
                });
            });
            $(".rechazarTT").click(function () {
                idticket = $(this).attr('id');
                $("#alertModal").modal('show');
                $("#rechazarTT").attr('idticket', idticket);

            });
            $("#rechazarTT").click(function () {
                idticket = $(this).attr('idticket');
                comentario  = $("#comentarioRechazo").val();
                if (comentario == '') {
                    alert("Debe ingresar el comentario del rechazo");
                    return false;
                }
                $.ajax({
                    type: "POST",
                    url: "{{ path('rechazarTT',{'idproyectos':idproyectos}) }}",
                    data:{ $idticket : idticket, $comentario:comentario}

                }).done(function (msj) {
                    location.reload();
                });


            });


            $('.agregarComentario').click(function () {
                idticket = $(this).attr('id');
                $('#dialogComentario').dialog({
                    autoOpen: true,
                    modal: true,
                    buttons: {
                        Guardar: function () {
                            $('#cargar').css('display', '');
                            comentario = $('#textComentNew').val();
                            $.ajax({
                                type: "POST",
                                async: true,
                                url: "{{path('addComentarioTicket',{'idproyectos':idproyectos})}}",
                                data: {$comentario: comentario, $idticket: idticket}
                            }).done(function (msj) {
                                $('#cargar').css('display', 'none');
                                $('#textComentNew').val('');
                                $('#textComentNew').text('');
                                $('#dialogComentario').dialog('close');
                            });
                        },
                        Cancelar: function () {
                            $('#textComentNew').val('');
                            $('#textComentNew').text('');
                            $(this).dialog('close');
                        },
                    }
                });
            });
            /*$('.tickets .openverTicket').click(function () {
                idticket = $(this).parent().attr('idticket');
                $('#cargar').css('display', '');
                $('#verElTicket').load("{{path('verTicket',{'idproyectos':idproyectos})}}", {$idticket: idticket});

            });*/


            $(".table1").tablesorter({
                theme: 'blue',
                // sort on the first column and second column in ascending order
                sortList: [[0, 1]]
            });
        })
    </script>
    <style>
        .tickets:hover{
            cursor: pointer;

        }
    </style>

    <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12">
        <table class="table table-bordered table-hover table-striped tablesorter table1" id="tablaTickets" >

            <thead>
            <tr  class=" text-center font-white background-ericsson" style="height: 40px;">
                <th>Ticket</th>
                <th>Creado Por</th>
                <th>Sitio</th>
                <th>{{'monitor.etiqueta.region' | trans}}</th>
                <th>Departamento</th>
                <th>{{'ticketDetail.status' | trans | capitalize}}</th>
                <th>Dofroms</th>
                <th>Direccion</th>
                <td>Accion</td>
            </tr>

            </thead>
            <tbody>
            {% for ticket in tickets%}
                <tr class="tickets" idticket="{{ticket.idticket}}">
                    <td class="openverTicket">{{ ticket.ticket }}</td>
                    <td class="openverTicket">{{ ticket.creadoPor }}</td>
                    <td class="openverTicket">{{ ticket.sitio }}</td>
                    <td class="openverTicket">{{ ticket.region }}</td>
                    <td class="openverTicket">{{ ticket.dpto }}</td>
                    <td class="openverTicket">{{ ticket.estado }}</td>
                    <td>
                        {% if  ticket.doforms == true %}

                        <a class="btn btn-default" href="{{path('descargarArchivo', {'idproyectos':idproyectos, 'idticket':ticket.idticket, 'idinforme':9 })}}">
                            <span class=" glyphicon glyphicon-download"></span><span> DoForms</span>
                        </a>
                        {% else %}
                        {% endif %}
                    </td>
                    <td class="openverTicket">{{ ticket.direccion }}</td>
                    <td class="col-xs-4 text-center">

                        <div class="dropdown">
                            <button href="#" id="drop2" role="button"   class="btn btn-default dropdown-toggle" data-toggle="dropdown">Accion <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
                                    <li role="presentation">
                                        <a class="agregarComentario" id="{{ticket.idticket}}" role="menuitem" tabindex="-1" href="#">{{'inbox.addcomment' | trans}}</a>
                                    </li>
                                <li role="presentation">
                                    <a class="rechazarTT" id="{{ticket.idticket}}" role="menuitem" tabindex="-1" href="#">Rechazar Ticket</a>
                                </li>
                                {# if ticket.idestados == 100 #}
                                <!---li role="presentation">
                                    <a class="btn visitaSitio" idticket="{{ticket.idticket}}" role="menuitem" tabindex="-1"href="#">
                                        <i class="glyphicon glyphicon-tasks">
                                            <span class="hidden-xs">VISITA A SITIO </span>
                                        </i>
                                    </a>
                                </li-->
                                {# endif #}
                                {% if ticket.idestados == 131 or ticket.idestados == 133 or ticket.idestados == 66  %}
                                <li role="presentation">
                                    <a class="btn"  id="verTicket" role="menuitem" tabindex="-1"  href="{{path("ticketAct", {'idproyectos':idproyectos, 'idticket':ticket.idticket, 'idinforme':0, 'accion':0})}}">
                                        <i class="glyphicon glyphicon-tasks">
                                        <span class="hidden-xs">COTIZAR </span>
                                        </i>
                                    </a>
                                </li>
                                {% endif %}
                                {% if ticket.idestados == 139   %}
                                <li role="presentation">
                                    <a class="btn technnicianSite"  idticket="{{ticket.idticket}}" role="menuitem" tabindex="-1"  href="#">
                                        <i class="glyphicon glyphicon-tasks">
                                            <span class="hidden-xs">TECNICO A SITIO </span>
                                        </i>
                                    </a>
                                </li>
                                {% endif %}






                            </ul>
                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>





    </div>

    <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="dialogVisita" title="Visita a sitio">
        <table class="ui-widget negrillas"  style="margin: auto; width: 95%;">
            <tr>
                <td>Requiere visita a sitio:</td>
            </tr>
            <tr>
                <td>
                    <select id="reqSitio">
                        <option>{{'SI' | trans}}</option>
                        <option>NO</option>
                    </select>
                </td>
            </tr>
            <tr class="trSitio">
                <td>Documente las persona que van a ingresar</td>
            </tr>
            <tr class="trSitio">
                <td>
                    <textarea id="documentacion"></textarea>
                </td>
            </tr>
        </table>
    </div>


    <div id="dialogVerTicket" title="Detalle del Ticket">
        <div id="verElTicket"></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">{{'dialog.alerta' | trans}}</h4>
                </div>
                <div class="modal-body">
                    <h1 class="title">Esta Seguro de rechazar el ticket</h1>
                    <div>
                        <label>Comentario Rechazo:</label>
                        <textarea class="form-control" id="comentarioRechazo"></textarea>
                    </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-danger" id="rechazarTT" idticket="">Rechazar</button>
                </div>
            </div>
        </div>
    </div>



    <div class="modal modal-wide fade" id="modalVisitSite" tabindex="-1" role="dialog" aria-labelledby="modalVisitSite" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header  btn-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">DATOS DEL TECNICO</h4>
                </div>
                <div class="modal-body">
                    <form action="{{ path('technicianGoSite',{'idproyectos': idproyectos}) }}" method="post" enctype="multipart/form-data" id="formTehnicianGoSite">
                    <div class="row">
                        <div class="col-lg-12">
                            <label>Nombre</label>
                            <input type="text" id="nameTechnician" class="form-control" required>
                        </div>
                        <div class="col-lg-12">
                            <label>Apellidos </label>
                            <input type="text" id="lastNameTechnician" class="form-control" required>
                        </div>
                        <div class="col-lg-12">
                            <label>Cedula</label>
                            <input type="text" id="idTechnician" class="form-control" required>
                        </div>
                        <div class="col-lg-12">
                            <label>Telefono</label>
                            <input type="text" id="phoneTechnician" class="form-control" required>
                        </div>
                        <div class="col-lg-12">
                            <label>File</label>
                            <input  name="fileTask2" id="fileTask2" type="file" class="file" required
                                    data-show-upload="false" data-show-caption="true" data-msg-placeholder="Select {files} for upload...">
                        </div>

                        <div class="col-lg-12">
                            <label>Observacion</label>
                            <textarea class="form-control" id="obsTechnician"></textarea>
                        </div>
                    </div>
                    </form>

                </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-info" id="btnSaveFTSite" data-dismiss="modal">GUARDAR</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}