{% extends '::base.html.twig' %}
{% 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 src="{{ asset('js/jquery.form.js') }}"></script>   


    <div role="tabpanel" style="margin: 8%">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Datos Recibos</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Datos Consumo y Pago</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Datos Historicos</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content" >
            <div role="tabpanel" class="tab-pane active" id="home">
                <div class="container" >
                    <div class="panel panel-info" style="margin:2% 10% 0 1%">
                        <div class="panel-heading">Nuevo Recibo Pago</div>
                        <div class="panel-body">
                            <form action='{{path('recibopago_update', {'id':id,'idproyectos':idproyectos,'idmodule':idmodule})}}' class="form-horizontal" name="reciboPagoForm" role="form" method="POST" data-toggle="validator" id="reciboPagoForm">
                                <div class="row">
                                    <div class="col-lg-8"><!-- columna izquierda -->
                                        <fieldset>
                                            <legend>Datos Suministros</legend>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-4 control-label">Suministro</label>

                                                        <div class="col-lg-12 col-xs-9">
                                                            <div class="input-group ">
                                                                <input type="text" id="codigo_sum" class="form-control" placeholder="Codigo" autofocus tabindex="1">
                                                                <span class="input-group-addon">
                                                                    <span id="botonCambio" class="glyphicon glyphicon-search"></span>
                                                                </span>
                                                            </div>        

                                                        </div>                                
                                                    </div>

                                                </div>

                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Sum1</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="codigo2" class="form-control" placeholder="Codigo" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Sum2</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="codigo3" class="form-control" placeholder="Codigo" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Tarifa</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="tarifa" class="form-control" placeholder="Tarifa" readonly="true">
                                                            <input type="hidden" id="tarifa_id" >

                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Servicio</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="servicio" class="form-control" placeholder="Tarifa" readonly="true">
                                                            <input type="hidden" id="tipo_servicio_id" >
                                                            <input type="hidden" id="proyecto_id" >

                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Propietario</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="propietario" class="form-control" placeholder="Propietario Suministro" readonly="true">

                                                        </div>                                
                                                    </div>

                                                </div>

                                                <fieldset></fieldset>
                                                <legend>Local</legend>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Local</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="id_sitio" class="form-control" placeholder="Local" readonly="true" >


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Nombre</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="codigo_sitio" class="form-control" placeholder="Nombre Local" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>

                                                <fieldset></fieldset>
                                                <legend>Distribuidor</legend>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-6 control-label">Distribuidor</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="distribuidor" class="form-control" placeholder="distribuidor" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Ruc</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="ruc" class="form-control" placeholder="ruc" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <fieldset></fieldset>
                                                <legend>Datos Tecnicos</legend>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-8 control-label">Sistema Electrico</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="nombrelocal" class="form-control" placeholder="Local" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Alimentador</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="alimentador" class="form-control" placeholder="Local" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-8 control-label">Tipo Conexion</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="conexion" class="form-control" placeholder="Local" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-8 control-label">Tipo Medidor</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="medidor" class="form-control" placeholder="Local" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-8 control-label">Pot. Contratada</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="potencia_contratada" class="form-control" placeholder="Local" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>
                                                <div class="col-xs-12 col-sm-4 col-lg-4">

                                                    <div class="form-group">
                                                        <label for="" class="col-lg-2 control-label">Fact.Medicion</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            <input type="text" id="factor_medicion" class="form-control" placeholder="Local" readonly="true">


                                                        </div>                                
                                                    </div>

                                                </div>

                                            </div>

                                        </fieldset>
                                    </div>

                                    <div class="col-lg-4"><!-- columna derecha -->
                                        <fieldset>
                                            <legend>Datos Recibos</legend>
                                            <div class="row">
                                                <div class="col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-5 control-label">{{form_label(edit_form.numRecibo)}}</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            {{form_widget(edit_form.numRecibo)}}
                                                        </div>


                                                    </div>

                                                </div>
                                                <div class="col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-6 control-label">{{form_label(edit_form.grupoSuministro)}}</label>

                                                        <div class="col-lg-12 col-xs-9">

                                                            {{form_widget(edit_form.grupoSuministro, {'value' : '1'})}}
                                                        </div>


                                                    </div>

                                                </div>

                                                <fieldset></fieldset>
                                                <legend>{{'Fecha' | trans}}</legend>
                                                <div class="col-xs-12 col-sm-8 col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-3 control-label">{{form_label(edit_form.emision)}}</label>

                                                        <div class="col-lg-6 col-xs-9">

                                                            <div class="input-group date datepicker" >
                                                                {{form_widget(edit_form.emision)}}

                                                                <span class="input-group-addon">
                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                </span>
                                                            </div>
                                                        </div>



                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-8 col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-3 control-label">{{form_label(edit_form.recepcion)}}</label>

                                                        <div class="col-lg-6 col-xs-9">

                                                            <div class="input-group date datepicker" >
                                                                {{form_widget(edit_form.recepcion)}}

                                                                <span class="input-group-addon">
                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                </span>
                                                            </div>
                                                        </div>



                                                    </div>
                                                </div>     
                                                <div class="col-xs-12 col-sm-8 col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-3 control-label">{{form_label(edit_form.pago)}}</label>

                                                        <div class="col-lg-6 col-xs-9">

                                                            <div class="input-group date datepicker" >
                                                                {{form_widget(edit_form.pago)}}

                                                                <span class="input-group-addon">
                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                </span>
                                                            </div>
                                                        </div>



                                                    </div>
                                                </div>       
                                                <div class="col-xs-12 col-sm-8 col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-3 control-label">{{form_label(edit_form.vencimiento)}}</label>

                                                        <div class="col-lg-6 col-xs-9">

                                                            <div class="input-group date datepicker" >
                                                                {{form_widget(edit_form.vencimiento)}}

                                                                <span class="input-group-addon">
                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                </span>
                                                            </div>
                                                        </div>



                                                    </div>
                                                </div>      

                                                <div class="col-xs-12 col-sm-8 col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-3 control-label">{{form_label(edit_form.lecturaActual)}}</label>

                                                        <div class="col-lg-6 col-xs-9">

                                                            <div class="input-group date datepicker" >
                                                                {{form_widget(edit_form.lecturaActual)}}

                                                                <span class="input-group-addon">
                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                </span>
                                                            </div>
                                                        </div>



                                                    </div>
                                                </div>  
                                                <div class="col-xs-12 col-sm-8 col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-3 control-label">{{form_label(edit_form.lecturaAnterior)}}</label>

                                                        <div class="col-lg-6 col-xs-9">

                                                            <div class="input-group date datepicker" >
                                                                {{form_widget(edit_form.lecturaAnterior)}}

                                                                <span class="input-group-addon">
                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                </span>
                                                            </div>
                                                        </div>



                                                    </div>
                                                </div> 
                                                <fieldset></fieldset>
                                                <legend>Periodo</legend>
                                                <div class="col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-4 control-label">{{form_label(edit_form.consumo)}}</label>

                                                        <div class="col-lg-8 col-xs-9">

                                                            {{form_widget(edit_form.consumo)}}
                                                        </div>


                                                    </div>

                                                </div>       
                                                <div class="col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-4 control-label">{{form_label(edit_form.facturacion)}}</label>

                                                        <div class="col-lg-8 col-xs-9">

                                                            {{form_widget(edit_form.facturacion)}}
                                                        </div>


                                                    </div>

                                                </div>
                                                <div class="col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-4 control-label">{{form_label(edit_form.reporte)}}</label>

                                                        <div class="col-lg-8 col-xs-9">

                                                            {{form_widget(edit_form.reporte)}}
                                                        </div>


                                                    </div>

                                                </div>  
                                                <fieldset></fieldset>
                                                <legend></legend>
                                                <div class="col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-4 control-label">{{form_label(edit_form.numeroSap)}}</label>

                                                        <div class="col-lg-8 col-xs-9">
                                                            {{form_widget(edit_form.numeroSap)}}

                                                            </select>

                                                        </div>


                                                    </div>

                                                </div>  
                                                <div class="col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-4 control-label">{{form_label(edit_form.documentoSap)}}</label>

                                                        <div class="col-lg-8 col-xs-9">
                                                            {{form_widget(edit_form.documentoSap)}}
                                                        </div>


                                                    </div>

                                                </div>  

                                                <div class="col-lg-12">

                                                    <div class="form-group">

                                                        <label for="" class="col-lg-5 control-label">{{form_label(edit_form.estado)}}</label>

                                                        <div class="col-lg-7 col-xs-9">

                                                            {{form_widget(edit_form.estado)}}
                                                        </div>


                                                    </div>

                                                </div> 



                                                {{form_widget(edit_form.suministro)}}


                                            </div>

                                        </fieldset>
                                    </div><!-- columna derecha fin -->



                                    <div class="row">
                                        <div class="col-sm-offset-2 col-sm-8 text-center">
                                            <div class="btn btn-group">

                                                <button  type="button" id="next" class="btn btn-info center-block">{{'Siguiente' | trans}}</button>

                                                <a  type="button" class="btn btn-danger center-block" href="{{path('recibopago',{'idproyectos':idproyectos, 'idmodule':idmodule})}}">{{'ticketDetail.status.cancel' | trans}}</a>                       
                                            </div>
                                        </div>
                                    </div>
                                    {{ form_row(edit_form._token) }} {{ form_errors(edit_form._token) }}


                                </div><!-- fin row-->
                            </form>
                        </div>
                    </div>

                </div>
            </div> <!-- end tabs home -->
            <div role="tabpanel" class="tab-pane" id="profile"></div>
            <div role="tabpanel" class="tab-pane" id="messages"></div>

        </div>

    </div>

</div>

<script src="{{ asset('js/sane_enter_key.js') }}"></script>
<script>
    $(window).on('ready page:load', function () {
        mbsd_sane_enter_key();
    });

    $(document).ready(function () {


        $.ajax({
            url: "{{path('suministro_getById')}}",
            dataType: "json",
            beforeSend: function () {


                $("#cargar").show();
            },
            data: {
                parameter: $("#suministro_suministrobundle_recibopago_suministro").val()
            },
            success: function (data) {

                $.each(data[0], function (key, value) {
                    console.log("#" + key);
                    $("#" + key).val(value);
                });
                $.ajax({
                    url: "{{path('recibopagodetalle_edit',{'id': id,'proyecto':idproyectos})}}",
                    data: {
                        tipo_servicio: $("#tipo_servicio_id").val(),
                        tarifa: $("#tarifa_id").val(),
                        propietario: $("#propietario_suministro_id").val()
                    },
                    error: function (request, status, error) {
                        alert(request.responseText);
                    },
                    success: function (data) {
                        $("#profile").empty();
                        $("#profile").append(data);

                        $("#cargar").hide();
                        console.log("id" + $("#suministro_suministrobundle_recibopagodetalle_reciboPago").val());
                    }
                });
            }
        });



        function validator(form, event, eventElement) {


            this.form = document.getElementById(form);
            this.event = event;
            this.color = '#801515';
            this.eventElement = document.getElementById(eventElement);

            this.getForm = function ()
            {
                return this.form;
            };

            this.isRequired = function (element) {

                return element.required === true;
            };

            this.validate = function () {

                for (var i = 0; i < this.form.length; i++) {

                    //!this.isRequired(this.form[i]) ? alert("campo requerido" + this.form[i].name) : null;
                    // console.log(this.form[i]);
                }

            };
        }
        ;


        var x = new validator("reciboPagoForm", "click", "next");
        x.validate();/*
         $('body').on('keydown', 'input, select, textarea', function (e) {
         var self = $(this)
         , form = self.parents('form:eq(0)')
         , focusable
         , next
         ;
         if (e.keyCode == 13) {
         focusable = form.find('input,a,select,button,textarea').filter(':visible');
         next = focusable.eq(focusable.index(this) + 1);
         if (next.length) {
         next.focus();
         } else {
         form.submit();
         }
         return false;
         }
         });*/
        var recibo = true;
        $("#suministro_suministrobundle_recibopago_numRecibo").focusout(function () {

            $.ajax({
                url: "{{path('recibopago_exist')}}",
                beforeSend: function () {



                },
                data: {
                    codigo: $("#suministro_suministrobundle_recibopago_numRecibo").val(),
                },
                success: function (data) {
                    recibo = true;
                    if (data == 1) {

                        recibo = false;
                        swal("El numero de Recibo " + $("#suministro_suministrobundle_recibopago_numRecibo").val() + " ya Existe");
                        $("#suministro_suministrobundle_recibopago_numRecibo").val();
                    }
                }
            });
        });
        $("#next").click(function () {

            $('.nav-tabs > .active').next('li').find('a').trigger('click');
        });
        /* $('#submit').click(function(){
         $('.nav-tabs > .active').next('li').removeClass("disabled disabledTab");
         $('.nav-tabs > .active').next('li').find('a').trigger('click');
         });*/
        var dataDate = $('.datepicker').attr('data-date');
        var dataVal = $('.datepicker input').val();
        console.log(dataDate === 'current');
        dataDate === 'current' && dataVal === '' ? $('.datepicker input').val('{{'now'|date('Y-m-d')}}') : null;
        $('.datepicker').datetimepicker({
        });
        //  var projects = [{"value": "2010", "label": "ALAMEDA DE ATE URD - E1-00001"}, {"value": "2304", "label": "ALAMOS EBC - E1-00416"}, {"value": "2537", "label": "ALATA EBC - E1-00689"}, {"value": "3504", "label": "ALAMEDA EBC - E1-05747"}, {"value": "7460", "label": "ALAMEDA DE ATE-A-115 DSLAM - E1-06184"}, {"value": "7461", "label": "ALAMEDA DE ATE-A-109 DSLAM - E1-06185"}, {"value": "7580", "label": "ALAMEDA DE ATE-A-118 DSLAM - E1-06358"}, {"value": "7581", "label": "ALAMEDA DE ATE-A-101 DSLAM - E1-06359"}];




        /*   $("#codigo_sum").autocomplete({
         minLength: 3,
         source: function (request, response) {
         
         $.ajax({
         
         dataType: "json",
         beforeSend: function () {
         
         $("#botonCambio").addClass('glyphicon glyphicon-refresh glyphicon-spin');
         },
         data: {
         parameter: request.term
         },
         success: function (data) {
         
         response(data);
         $("#botonCambio").removeAttr('class');
         $("#botonCambio").addClass('glyphicon glyphicon-search');
         }
         });
         }
         ,
         focus: function (event, ui) {
         $("#idsitio").val(ui.item.label);
         return false;
         },
         select: function (event, ui) {
         console.log(ui.item);
         $.each(ui.item, function (key, value) {
         
         $("#" + key).val(value);
         });
         return false;
         }
         })
         .autocomplete("instance")._renderItem = function (ul, item) {
         return $("<li>")
         .append("<a>" + item.codigo_sum + "<br>" + item.tarifa + "</a>")
         .appendTo(ul);
         };
         //    var data = [{"value": "2010", "label": "ALAMEDA DE ATE URD - E1-00001"}, {"value": "2304", "label": "ALAMOS EBC - E1-00416"}, {"value": "2537", "label": "ALATA EBC - E1-00689"}, {"value": "3504", "label": "ALAMEDA EBC - E1-05747"}, {"value": "7460", "label": "ALAMEDA DE ATE-A-115 DSLAM - E1-06184"}, {"value": "7461", "label": "ALAMEDA DE ATE-A-109 DSLAM - E1-06185"}, {"value": "7580", "label": "ALAMEDA DE ATE-A-118 DSLAM - E1-06358"}, {"value": "7581", "label": "ALAMEDA DE ATE-A-101 DSLAM - E1-06359"}];
         
         // var data = [];
         /*  $("#idsitio").autocomplete({
         source: data,
         minLength: 3,
         select: function (event, ui) {
         log(ui.item ?
         "Selected: " + ui.item.label :
         "Nothing selected, input was " + this.value);
         }
         });
         
         */
        $('a[data-toggle="tab"]').on('click', function () {

            if ($(this).parent('li').hasClass('disabled')) {
                return false;
            }
            ;
        });
    });

    $('.ajaxChange').change(function () {

        var opc = {
            "url": $(this).attr('role-path'),
            "element": $(this).attr('element'),
            "data": $(this).val(),
            "key": $(this).attr("id")
        };

        //console.log(opc.key);
        var json = {};
        json[opc.key] = opc.data;

        // console.log(json.idimputable);
        $.ajax({
            url: opc.url,
            data: json,
            beforeSend: function () {

                $("#" + opc.element).after('<img class="loading" width="16" src="{{asset('loadings/spin.GIF')}}" />');
            }


        }).done(function (data) {

            $("#" + opc.element).find('option:not("option[value=""]")').remove();
            $(".loading").hide();
            $.each(data, function (index, value) {

                $.each(value, (function (key, valor) {




                    $("#" + opc.element).append('<option value=' + valor.value + '>' + valor.nombre + '</option>');

                }));



            });


        });
    });




</script>
{% endblock %}