{% extends '::base.html.twig' %}
{% block menuTop %}

{%endblock %}


{% block dashboard -%}

    <style>
        
        #menuTop {
            margin-top: 20px;
        }
        /* pager wrapper, div */
        .pager {
            padding: 5px;
        }
        /* pager wrapper, in thead/tfoot */
        td.pager {
            background-color: #e6eeee;
        }
        /* pager navigation arrows */
        .pager img {
            vertical-align: middle;
            margin-right: 2px;
        }
        /* pager output text */
        .pager .pagedisplay {
            font-size: 11px;
            padding: 0 5px 0 5px;
            width: 50px;
            text-align: center;
        }

        /*** loading ajax indeterminate progress indicator ***/


        /*** css used when "updateArrows" option is true ***/
        /* the pager itself gets a disabled class when the number of rows is less than the size */
        .pager.disabled {
            display: none;
        }
        /* hide or fade out pager arrows when the first or last row is visible */
        .pager img.disabled {
            /* visibility: hidden */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }
        .tablesorter-header-inner{
            height: 30px;
        }

        .create{
            padding: 0;
        }
    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script>

        $(function () {

            var costo = 0;

            $(".repuesto").live('change',function(){

                var repuesto = $(this);

                $.getJSON('{{ path('proyectorepuesto_getItem',{'idproyectos':idproyectos}) }}',{'repuesto':repuesto.val()},function(data){

                    console.log(data.precio);

                    repuesto.closest('.row').find(".medida").val(data.medida);
                    repuesto.closest('.row').find(".precio").val(data.costo);
                    repuesto.closest('.row').find(".descripcion").val(data.descripcion);
                    costo = data.costo;

                })

            })

            $(".cantidad").live('blur',function(){

                var precio = parseFloat(costo);
                var cantidad = parseFloat($(this).val());

               $(this).closest('.row').find(".precio").val(precio*cantidad,2);

            });

            $(".get").live('click',function(){

                var url = $(this).closest('a').attr('href');
                $.get( url, function() {

                }).done(function() {
                            swal({title: "The item was Deleted", text: "", type: "success"},
                                    function () {

                                        location.reload();

                                    });
                        })
                        .fail(function() {
                            alert( "error" );
                        })


                return false;
            });
            $(".trash").live('click',function(){
                //console.log('entro');

                $(this).parent().parent().remove();
            });

            $('.ajaxForm').live('submit',function() {
                // inside event callbacks 'this' is the DOM element so we first
                // wrap it in a jQuery object and then invoke ajaxSubmit
                $(this).ajaxSubmit({


                    success: function(){

                        swal({title: "The information was saved", text: "", type: "success"},
                                function () {

                                    $(".parent,.child").modal('hide');

                                    location.reload();

                                });
                    }

                });

                // !!! Important !!!
                // always return false to prevent standard browser submit and page navigation
                return false;
            });

            $(".clone").live('click',function(){
                var clone  = $("#" + $(this).attr('element')).clone();
                clone.closest('.row').find(".precio").val(0);
                clone.closest('.row').find(".cantidad").val(1);
                clone.removeAttr('id').attr('class','row quitar').append(
                        '<label>&nbsp;</label><div class="col-lg-2"><a href="#" class="btn btn-danger fa fa-trash trash"></a></div>').appendTo("#"+$(this).attr('target') );
                return false;
            });

            var pagerOptions = {
                // target the pager markup - see the HTML block below
                container: $(".pager"),
                // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                // table row set to a height to compensate; default is false
                fixedHeight: false,
                // remove rows from the table to speed up the sort of large tables.
                // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                removeRows: true,
                // go to page selector - select dropdown that sets the current page
                cssGoto: '.gotoPage'
            };
            // initial sort set using sortList option
            $(".table1").tablesorter({
                theme: 'blue',
                // sort on the first column and second column in ascending order
                sortList: [],
                widgets: ["zebra", "filter"],
                widgetOptions: {
                    // extra css class applied to the table row containing the filters & the inputs within that row
                    filter_cssFilter: '',
                    // If there are child rows in the table (rows with class name from "cssChildRow" option)
                    // and this option is true and a match is found anywhere in the child row, then it will make that row
                    // visible; default is false
                    filter_childRows: false,
                    // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                    // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                    filter_hideFilters: false,
                    // Set this option to false to make the searches case sensitive
                    filter_ignoreCase: true,
                    // jQuery selector string of an element used to reset the filters
                    filter_reset: '.reset',
                    // Use the $.tablesorter.storage utility to save the most recent filters
                    filter_saveFilters: true
                }
            }).tablesorterPager(pagerOptions);
            // initial sort set using data-sortlist attribute (see HTML below)


            $(".parent,.child").live('click',function(){


                var modal = $(this).hasClass('parent') ? 'parent':'child';

                    $("#"+ modal).modal();

            });

        });

    </script>
    <div class="container">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading text-center">{{'Informacion General' | trans}}</div>
                <div class="panel-body">

                    <div class="row">


                        <table class="table">
                            <tr>
                                <th>OT</th>
                                <td>{{ entity.OT }}</td>

                            </tr>
                            <tr>
                                <th>{{'monitor.etiqueta.region' | trans | upper}}</th>
                                <td>{{ entity.REGION }}</td>
                            </tr>
                            <tr>
                                <th>{{'ticketDetail.site' | trans | upper}}</th>
                                <td>{{ entity.SITIO }}</td>
                            </tr>
                            <tr>
                                <th>{{'ticketDetail.status' | trans | upper}}</th>
                                <td>{{ entity.estado }}</td>
                            </tr>
                            <tr>
                                <th>ASP</th>
                                <td>{{ entity.ASP }}</td>
                            </tr>
                            <tr>
                                <th>ESPECIALIDAD</th>
                                <td>{{ entity.ESPECIALIDAD }}</td>
                            </tr>
                            <tr>
                                <th>TIPO DE TRABAJO</th>
                                <td>{{ entity.TIPO_TRABAJO }}</td>
                            </tr>
                            <tr>
                                <th>DESCRIPCION</th>
                                <td>{{ entity.cometarios }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="row text-center">
                        <a class="parent btn btn-danger">Cotizar</a>
                        <a class="child btn btn-warning">Entregables</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading text-center">Item Cotizados</div>
                <div class="panel-body">

                    <div class="row">

                            <a href="{{ path('cotizacion_descargarCotizacion',{'idproyectos':idproyectos,'idticket':idticket}) }}" {{   cotizados|length > 0?'':'disabled'}} class="pull-right btn btn-primary">Descargar</a>


                        <table class="table table-bordered">
                            <thead>
                                <th>ITEM</th>
                                <th>DESCRIPCION</th>
                                <th>{{'Cantidad' | trans | upper}}</th>
                                <th>UNIDAD</th>
                                <th>P.U</th>
                                <th>PRECIO TOTAL</th>
                                <th></th>
                            </thead>
                            {% set total = 0 %}
                            {% for cotizado in cotizados%}
                            <tr>

                                {% set total =  cotizado.precio + total%}
                                <td>{{ cotizado.ITEM }}</td>
                                <td>{{ cotizado.descripcion }}</td>
                                <td>{{ cotizado.cantidad }}</td>
                                <td>{{ cotizado.medida }}</td>
                                <td>$ {{ cotizado.pu |  number_format(2, '.', ',') }}</td>
                                <td>$ {{ cotizado.precio |number_format(2, '.', ',')}}</td>
                                <td>
                                    <a  href="{{ path('ticketrepuesto_delete') }}?id={{ cotizado.id }}">
                                        <span class="glyphicon glyphicon glyphicon glyphicon-remove get" aria-hidden="true" style="color:#da4f49;margin-left:45%"></span>
                                    </a>
                                </td>
                            </tr>

                            {% endfor %}
                            <tr>
                                <td colspan="5">TOTAL</td>
                                <td colspan="2">$ {{ total |number_format(2, '.', ',')}}</td>
                            </tr>
                        </table>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading text-center">Entregables</div>
                <div class="panel-body">

                    <div class="row">




                        <table class="table table-bordered">
                            <thead>
                            <th>{{'user.name' | trans}}</th>
                            <th>Archivo</th>
                            <th></th>

                            </thead>

                            {% for ticketInforme in ticketInformes%}
                                <tr>
                                    <td>{{ ticketInforme.nombre }}</td>
                                    <td>
                                        <a class="btn btn-default"  href="{{path('cotizacion_descargarArchivo')}}?path={{uploadRootDir ~ ticketInforme.nombre }}">
                                            <li class=" glyphicon glyphicon-download"></li><span>  {{ticketInforme.nombre}}</span>
                                        </a>
                                    </td>
                                    <td>
                                        <a  href="{{ path("cotizacion_deleteFile",{'idproyectos':idproyectos,'idticket':idticket,'idinforme':ticketInforme.idInforme}) }}">
                                            <span class="glyphicon glyphicon glyphicon glyphicon-remove get" aria-hidden="true" style="color:#da4f49;margin-left:45%"></span>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                    <div class="row text-center">
                        <h1 class="panel-heading text-center">OBSERVACIONES</h1>
                            <textarea id="obser"></textarea>
                        <button class="btn btn-default" id="observaciones">Guardar Observaciones</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row text-center">
            <form class="ajaxForm" method="GET" action="{{ path('cotizacion_guardar',{'idproyectos':idproyectos,'idticket':idticket}) }}">
                <button type="submit" class="btn btn-success" {{   cotizados|length > 0?'':'disabled'}}>{{'ticketDetail.save' | trans}}</button>
            </form>

        </div>


    <div class="modal fade" id="parent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form method="GET" action="{{ path('ticketrepuesto_createCotizacion',{'idproyectos':idproyectos,'idticket':idticket}) }}" class="ajaxForm">

                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel">Windows Modal</h2>
                </div>
                <div class="modal-body">



                    <div class="row">
                        <button class="btn btn-success pull-right clone" element="primeraFila" target="cotizacionContainer">+</button>
                    </div>
                    <div id="cotizacionContainer">

                        <div class="row" id="primeraFila" >
                            <div class="col-lg-2">
                                <label>ITEM</label>
                                <select required class="form-control repuesto" name="repuesto[]">
                                    <option></option>
                                        {% for repuesto in repuestos %}
                                       <option value="{{ repuesto.id }}"> {{ repuesto.descripcion }}</option>
                                        {% endfor %}
                                </select>
                            </div>
                            <div class="col-lg-3">
                                <label>DESCRIPCION</label>
                                <textarea class="form-control descripcion"></textarea>
                            </div><div class="col-lg-1">
                                <label>UNIDAD</label>
                                <input type="text" class="form-control medida" readonly name="medida[]">
                            </div>
                            <div class="col-lg-1">
                                <label>{{'Cantidad' | trans | upper}}</label>
                                <input type="text" class="form-control numeric cantidad"  name="cantidad[]">
                            </div>
                            <div class="col-lg-2">
                                <label>PRECIO</label>
                                <input type="text" class="form-control precio" readonly name="precio[]" value="0">
                            </div>
                        </div><!-- fila 1 -->

                    </div>
                </div>
                <div class="modal-footer">


                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                    <button id="savePlan" type="submit" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>


                </div>
                </form>
            </div>
        </div>
    </div>

        <div class="modal fade" id="child" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <form method="POST" action="{{ path('cotizacion_uploadFile',{'idproyectos':idproyectos, 'idticket':idticket}) }}" class="ajaxForm">

                        <div class="modal-header  bg-primary">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h2 class="modal-title text-center" id="myModalLabel">Windows Modal</h2>
                        </div>
                        <div class="modal-body">

                            <div id="container">

                                {% for informe in informes%}
                                    {% set disabled  = '' %}
                                    {%  if informe.idinforme in informesCreated %}
                                        {% set disabled  = 'disabled' %}

                                    {% endif %}
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <label></label>
                                            <select  class="form-control" name="tipo[]" readonly>
                                                <option>{{ informe.informe }}</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <label>Archivo</label>

                                            <input type="file" class="" name="file[]"  {{ disabled }}>
                                        </div>
                                        <input type="hidden" name="idinforme[]" value="{{ informe.idinforme }}" {{ disabled }}>
                                    </div><!-- fila 1 -->
                                {% endfor %}



                            </div>
                        </div>
                        <div class="modal-footer">


                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                            <button id="savePlan" type="submit" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>


                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
    {% endblock %}