@extends('layout.master')

@section('title')
    Pagos en Línea
@stop

@section('loader')
    <script>
        var element = $('#wrapperid');
        element.LoadingOverlay("show",{
			//color: "#1ab6ff", //sebas
			color: "#EBFCCD",
			fade  : [2000, 1000],
            size : "50%",
            zIndex : 99999
        });
        setTimeout(function(){
            element.LoadingOverlay("hide", true);
        }, 3000);

    </script>
@stop

@section('region_editable')
    <style>
        /* ::-webkit-scrollbar {
            display: none;
        } */

        .table thead{
            background-color: #61AB65 !important;
        }
        .table thead tr th{
            color: #fff;
            text-align: center;
        }
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover, .tabs-vertical > li.active > a, .tabs-vertical > li.active > a:focus, .tabs-vertical > li.active > a:hover{
            background-color: #61AB65 !important;
            border-left: 2px solid #61AB65 !important;
        }
        .nav-tab-left.navtab-custom li.active a {
            border-left: 2px solid #61AB65 !important;
        }

        .pagination-sm>li>a, .pagination-sm>li>span {
            margin: 0px 8px;
            border: 1.9px solid #61AB65;
            border-radius: 6px;
        }
        .btn-primary {
            background-color: #61AB65 !important;
            border: 1px solid #61AB65 !important;
        }

        .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary {
            background-color: #61AB65 !important;
            border: 1px solid #61AB65 !important;
        }
        .swal2-modal h2 {
            color: #007aa6;
        }
        .swal2-confirm{
            border-left-color: #61AB65 !important;
            border-right-color: #61AB65 !important;
            background-color: #61AB65 !important;
        }

        .swal2-cancel{
            border-left-color: #e6e7e8 !important;
            border-right-color: #e6e7e8 !important;
            background-color: #e6e7e8 !important;
            color: #000 !important;

        }

        .hide{
            display: none;
        }

        fieldset.scheduler-border {
            border: 1px solid #61AB65 !important;
            padding: 0 1.4em 0 1.4em !important;
            margin: 0 0 10px 0 !important;
            border-radius: 9px;
            height: 74px;
        }

        legend.scheduler-border {
            font-size: 1.2em !important;
            font-weight: bold !important;
            text-align: left !important;
            width:auto;
            padding:0 10px;
            border-bottom:none;
            font-weight: bold;
            color: #61AB65;
            font-family: sans-serif;
        }
        .line-div{
            border-width: 2px;
            border-bottom-width: 0px;
            border-bottom-color: #61AB65;
            border-bottom-style: solid;
        }

        .legend2{
            align-items: center;
            display: flex;
            position: absolute;
            top: 0;
            right: 30px;
            background-color: #fff;
        }
        .legend2 input{
            margin: 0 5px 0 0;
        }

        .checkbox-success input[type="checkbox"]:checked + label::before {
            background-color: #61AB65;
            border-color: #61AB65;
        }
        body{
            font-size: 12px;
        }
        .tab-content{
            box-shadow: none;
        }
        .tabs-vertical-env .tab-content{
            background: #ffffff;
            display: table-cell;
            margin-bottom: 30px;
            padding: 13px;
            vertical-align: top;
        }

        .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
            background-color: #61AB65 !important;
        }
        thead th {
            font-size: 13.5px;
            padding-bottom: 4px !important;
            padding-top: 4px !important;
        }
        tbody th, tbody td{
            font-size: 12.5px;
            padding-bottom: 4px !important;
            padding-top: 4px !important;
            vertical-align: middle !important;
        }
        .tabItem {
            height: 100%;
        }
        .tabItem a{
            align-items: center;
            display: flex !important;
            height: 100%;
        }
        legend {
            margin-bottom: 10px !important;
        }
        fieldset button {
            padding-bottom: 3px !important;
            padding-top: 3px !important;
        }
        fieldset select {
            height: 28px !important;
        }
        fieldset .form-control {
            padding-bottom: 3px !important;
            padding-top: 3px !important;
        }
        .customizeBtn {
            font-size: 13px;
            margin-left: 5px;
            margin-top: 11px;
            padding: 5px;
        }
        label {
            margin-bottom: 0 !important;
        }
        @media (max-width: 991.5px){
            .wrapper{
                margin-top: 30px;
            }
            fieldset.scheduler-border {
                height: auto;
            }
        }

    </style>



    <div class="wrapper" style="padding-left: 2%; padding-right: 2%">
        <div class="row">
            <div class="col-lg-12">
                <div class="col-xs-12">
                    @include('alerts.index')
                </div>
            </div>
            <div class="row">
                <div class="col-md-7" style="margin-top: 11px">
                    <div><label>Código de contribuyente: </label> {{ session()->get('Datos')['cod_contribuyente']}}</div>
                    <div><label>Contribuyente: </label> {{ session()->get('Datos')['nomb'] }}</div>
                    <div><label>Dirección Fiscal: </label> {{ session()->get('Datos')['direccion']    }}</div>
                    <div><label>Fecha de consulta:&nbsp;&nbsp;&nbsp;&nbsp;</label>{{ date("d-m-Y")}}</div>
                </div>
                <div class="col-md-5" style="text-align: right">
                    <div class="row">
                        <div class="col-lg-12">
                            <button type="button" class="btn btn-success btn-rounded w-md waves-effect waves-light customizeBtn" onclick="window.open('{{ url('estadocuenta') }}')" style="background-color: #58595b !important; border: 1px solid #58595b !important;">Estado de Cuenta</button>
                            <!--<button type="button" id="action-email" class="btn btn-success btn-rounded w-md waves-effect waves-light customizeBtn" style="background-color: #58595b !important; border: 1px solid #58595b !important;">Enviar por Correo</button>-->
                            <a style="background-color: #58595b !important; border: 1px solid #58595b !important;" href="{{ url('historial') }}" class="btn btn-danger customizeBtn" target="_self"> <i class="fa fa-credit-card"></i> <span>  Historial de pagos</span></a>
                            <a href="{{ url('oauth/logout') }}" class="btn btn-danger customizeBtn"><i class="fa fa-sign-out"></i> <span>Cerrar Sesión</span></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <form method="post" action="{{ url('viewer') }}" onsubmit="changeValue();" style="margin-top: 10px">

                    <div class="col-lg-12">
                        <div class="nav-tab-left navtab-custom" >
                            <ul class="nav nav-tabs" style="margin-bottom: 5px; height: 35px;">
                                <li class="active tabItem">
                                    {{--style="background-color: #61AB65 !important; border-left: 2px solid #61AB65 !important; "--}}
                                    <a href="#v-impuesto"  id="Ireset-impuesto" data-toggle="tab" aria-expanded="true">Impuesto Predial y Arbitrios </a>
                                </li>
                                <li class="tabItem">
                                    <a href="#v-fraccionamiento" id="Freset-fraccionamiento"  data-toggle="tab" aria-expanded="false">Fraccionamiento</a>
                                </li>
                                <li class="tabItem">
                                    <a href="#v-liquidacion" id="Lreset-liquidacion" data-toggle="tab" aria-expanded="false" >Liquidación</a>
                                </li>


                            </ul>

                            {{ csrf_field() }}

                            <input type="hidden" name="fini">
                            <input type="hidden" name="ffin">
                            <input type="hidden" name="fini2">
                            <input type="hidden" name="ffin2">
                            <input type="hidden" name="arraypay">
                            <input type="hidden" name="Tarraypay">
                            <div class="tab-content" style="padding-top: 0px; width: 100%; padding-right: 0px;">
                                <div class="tab-pane active" id="v-impuesto">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="card-box table-responsive">
                                                <div class="col-md-6">
                                                    <fieldset class="scheduler-border">
                                                        <legend class="scheduler-border">
                                                            Seleccione su tributo
                                                        </legend>
                                                        <div class="legend2">
                                                            <input type="checkbox" id="select-all" >Todos
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-5">
                                                                <div class="checkbox checkbox-success checkbox-circle">
                                                                    <input type="checkbox" class="impuestocheck" value="Impuesto Predial"id="radio">
                                                                    <label for="checkbox">
                                                                        Impuesto Predial
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-3">
                                                                <div class="checkbox checkbox-success checkbox-circle">
                                                                    <input type="checkbox" class="impuestocheck" value="Arbitrio Municipal" id="radio">
                                                                    <label for="checkbox">
                                                                        Arbitrios
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-3">
                                                                <div class="checkbox checkbox-success checkbox-circle">
                                                                    <input type="checkbox" class="impuestocheck" value="COSTAS PROCESALES" id="radio">
                                                                    <label for="checkbox">
                                                                        Costas
                                                                    </label>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <div class="col-md-6">
                                                    <fieldset class="scheduler-border">
                                                        <legend class="scheduler-border">
                                                            Seleccione el rango de años
                                                        </legend>

                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                <span class="input-group-btn">
                                                                    <button type="button" class="btn waves-effect waves-light btn-primary">Desde</button>
                                                                </span>
                                                                        <select class="form-control" id="de-anio-select" onclick="">

                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                <span class="input-group-btn">
                                                                    <button type="button" class="btn waves-effect waves-light btn-primary">Hasta</button>
                                                                </span>
                                                                        <select class="form-control" id="hasta-anio-select" onclick="">

                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <table id="datatable-impuesto"  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                                    <thead>
														<tr>
															<th>Tipo de Trámite</th>
															<th>Año</th>
															<th>PPP</th>
															<th>Periodo</th>
															<th>Tributo</th>
															<th>Predio</th>
															<th>Afecto</th>
															<th>Pagado</th>
															<th>Saldo</th>
															<th>Reajuste</th>
															<th>Mora</th>
															<th>Emisión</th>
															<th>Totales</th>
															<th>Situación</th>
															<th>Detalle</th>
															<th style="padding-right: 8px"><input type="checkbox" id="impuesto-all"></th>
														</tr>
                                                    </thead>
                                                    <tbody>
														@if($WSResult != [])
															@foreach($WSResult as $list)
																<tr>
																	<th>{{trim($list->tributario)}}@if(strcmp(str_replace(' ', '', $list->tributario),"ImpuestoPredial") && strcmp(str_replace(' ', '', $list->tributario),"COSTASPROCESALES") ){{" - ".$list->direccion}} @endif</th>
																	<th>{{$list->anyoimp}}</th>
																	<th>{{$list->ctaorigen}}</th>
																	<th>{{$list->anyoimp."-".$list->periodo}}</th>
																	<th>{{trim($list->tributario)}}</th>
																	<th>{{$list->codpredio}}</th>
																	<th>S/.{{$list->afecto}}</th>
																	<th>S/.{{$list->pagado}}</th>
																	<th>S/.{{$list->salord}}</th>
																	<th>S/.{{$list->treajuste}}</th>
																	<th>S/.{{$list->tmora}}</th>
																	<th>S/.{{$list->costoemi}}</th>
																	<th>S/.{{$list->total}}</th>
																	<th>{{$list->situacion}}</th>
																	<th>@if(strcmp(str_replace(' ', '', $list->tributario),"ImpuestoPredial") && strcmp(str_replace(' ', '', $list->tributario),"COSTASPROCESALES"))<button type="button" style="padding: 3px 7px;" class="btn btn-icon waves-effect waves-light btn-primary" id="data-adicional" data-sr="{{ $list->total_sr}}" data-lp="{{ $list->total_lp}}" data-pj="{{ $list->total_pj}}"> <i class="ti-files" id="data-adicional" data-sr="{{ $list->total_sr}}" data-lp="{{ $list->total_lp}}" data-pj="{{ $list->total_pj}}"></i> </button> @endif</th>

																	@if($list->total>0)
																	<th class="text-center" style="position:relative; padding: 16px;"><input type="checkbox" data-id="{{ $list->ctaidentif}}" data-orig="{{$list->ctaorigen}}" data-cbx="{{$list->total}}" class='checkboxGroup' name="payment[]" ></th>
																	@endif
																	@if($list->total==0)
																	<th class="text-center" style="position:relative; padding: 16px;"></th>
																	@endif

																</tr>
															@endforeach
														@endif
                                                    </tbody>
                                                </table>


                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="v-fraccionamiento">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="card-box table-responsive">

                                                <div class="col-md-12">
                                                    <fieldset class="scheduler-border">
                                                        <legend class="scheduler-border">
                                                            Seleccione el rango de años
                                                        </legend>

                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                <span class="input-group-btn">
                                                                    <button type="button" class="btn waves-effect waves-light btn-primary">Desde</button>
                                                                </span>
                                                                        <select class="form-control" id="de-anio-select2" onclick="">

                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                <span class="input-group-btn">
                                                                    <button type="button" class="btn waves-effect waves-light btn-primary">Hasta</button>
                                                                </span>
                                                                        <select class="form-control" id="hasta-anio-select2" onclick="">

                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                </div>

                                                <table id="datatable-fraccionamiento" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                                    <thead>
                                                    <tr>
                                                        <th>Tipo de tramite</th>
                                                        <th>Año</th>
                                                        <th>Convenio</th>
                                                        <th>Año</th>
                                                        <th>Cuota</th>
                                                        <th>Monto</th>
                                                        <th>Interes</th>
                                                        <th>Mora</th>
                                                        <th>Vencimiento</th>
                                                        <th>Estado</th>
                                                        <th>Recibo</th>
                                                        <th>Totales</th>
                                                        <th class="text-center">Pagar</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @if($WSResultF != [])
                                                        @foreach($WSResultF as $list2)
                                                            <tr>
                                                                <th></th>
                                                                <th>{{substr($list2->contrato,7,11)}}</th>
                                                                <th>{{substr($list2->contrato,1,5)}}</th>
                                                                <th>{{substr($list2->contrato,7,11)}}</th>
                                                                <th>{{$list2->cuotaperio}}</th>
                                                                <th>S/.{{$list2->cuotamonto}}</th>
                                                                <th>S/.{{$list2->cuotainter}}</th>
                                                                <th>S/.{{$list2->cuotatim}}</th>
                                                                <th>{{$list2->fechvence}}</th>
                                                                <th>Estado</th>
                                                                <th>Nro Recibo</th>
                                                                <th>S/.{{$list2->cuotatotal}}</th>
                                                                <td class="text-center" style="position:relative; padding: 16px;"><input type="checkbox" data-id="{{$list2->ctaidentif}}" data-cbx="{{$list2->cuotatotal}}" class='checkboxGroup' name="payment[]" ></td>
                                                            </tr>
                                                        @endforeach
                                                    @endif

                                                    </tbody>
                                                </table>


                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="v-liquidacion">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="card-box table-responsive">
											<div class="form-group">


								{{--<fieldset class="scheduler-border">--}}

                                    {{--<legend class="scheduler-border">--}}
                                        {{--Seleccione el rango de años--}}
                                    {{--</legend>--}}

                                    {{--<div class="col-md-12">--}}

                                        {{--<div class="col-md-6">--}}
                                        {{--<div class="col-sm-12">--}}
                                        {{--<div class="input-group">--}}
                                        {{--<span class="input-group-addon bg-primary b-0 text-white">Desde</span>--}}
                                        {{--<input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker">--}}

                                        {{--</div><!-- input-group -->--}}
                                        {{--</div>--}}
                                        {{--</div>--}}
                                        {{--<div class="col-md-6">--}}
                                        {{--<div class="col-sm-123">--}}
                                        {{--<div class="input-group">--}}
                                        {{--<span class="input-group-addon bg-primary b-0 text-white">Hasta</span>--}}
                                        {{--<input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker">--}}

                                        {{--</div><!-- input-group -->--}}
                                        {{--</div>--}}
                                        {{--</div>--}}

                                    {{--</div>--}}

                                {{--</fieldset>--}}




                                                <table id="datatable-liquidaciones" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                                    <thead>
                                                    <tr>
                                                        <th>N° de liquidación</th>
                                                        <th>Fecha de Emisión</th>
                                                        <th>Fecha de Emisión</th>
                                                        <th>Código de Emisión</th>
                                                        <th>Estado</th>
                                                        <th>Fecha de Pago</th>
                                                        <th>Monto</th>
                                                        <th class="text-center">Pagar</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>

                                                    @if($WSResultL != [])
                                                    @foreach($WSResultL as $list3)
                                                        <tr>
                                                            <th>{{$list3->liqnumero}}</th>
                                                            <th>{{$list3->liqfechemi}}</th>
                                                            <th>{{$list3->liqfechemi}}</th>
                                                            <th>{{$list3->liqusercodigo}}</th>
                                                            <th>{{$list3->liqestado}}</th>
                                                            <th>{{$list3->liqfechpag}}</th>
                                                            <th>S/.{{$list3->liqemitido}}</th>
                                                            <td class="text-center" style="position:relative; padding: 16px;"><input type="checkbox" data-id="{{$list3->liqnumero}}" data-cbx="{{$list3->liqemitido}}" class='checkboxGroup' name="payment[]" ></td>
                                                        </tr>
                                                    @endforeach
                                                    @endif
                                                    </tbody>
                                                </table>


                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
							</div>
						</div>
					 </div>
                     <div class="row">
                        <div class="col-xs-12 col-md-offset-8 col-md-4" style="background-color: #f1f2f2;margin-bottom: 10px;padding-bottom: 0px;padding-top: 6px;padding-left: 24px;padding-right: 24px;font-size: 16px;">
                            <p style="display: inline; float: left">Total a pagar:</p>
                            <p id="pago" style="display: inline; float: right; color: #1A984D; font-weight: bold;">   S/. 0.00</p>
                        </div>
                     </div>
                    <div clas="col-lg-12" style="text-align: center;">
                        <button id="btnPay" onclick="showSpinner()" type="submit" class="btn btn-success btn-rounded w-md waves-effect waves-light" style="background-color: #18a054 !important; border: 1px solid #18a054 !important; width: 200px">
                            <span>Pagar</span>
                        </button>
                    </div>
                </form>

            </div>
        </div>




        @endsection

        @section('js')

            <script type="text/javascript">

                $(document).ready(function() {
                    //Fecha y año

                    $("input[type='hidden'][name='Tarraypay']").val('Ireset-impuesto');
                    console.log($("input[type='hidden'][name='Tarraypay']").val());
                    var total = 0.0;
                    var menor = 0.0;
					var gt = 3;
					var c = false;
					var arrCost = [];
                    var fecha = new Date();
                    var anio = fecha.getFullYear();
                    var fini = 1993;
                    var ffin = 2016;

                    var fini2 = 1993;
                    var ffin2 = 2016;

                    $('input[name="fini"]').val(fini);
                    $('input[name="ffin"]').val(ffin);
                    $('input[name="fini2"]').val(fini2);
                    $('input[name="ffin2"]').val(ffin2);

                    //Checkbox-List
                    var arr = [];
                    $(".impuestocheck:checkbox").each(function(e) {
                         if(!$(e).checked){
                            arr.push(this.value);
                            this.checked = true;
                        }
                    });




                    $('#select-all').prop('checked', true);
                    //DatatableImpuesto
                    var table = $('#datatable-impuesto').DataTable({
                        "iDisplayLength": 10,
                        "bLengthChange": false,
                        "responsive": true,
                        "language": {
							"sProcessing": "Procesando...",
                            "sLengthMenu": "Mostrar _MENU_ datos por página",
                            "sZeroRecords": "No hubo resultados",
                            "sInfo": "Mostrando página _PAGE_ de _PAGES_",
                            "sInfoFiltered":"(filtrado de un total de _MAX_ registros)",
							"sInfoPostFix": "",
                            "sSearch": "Buscar: ",
                            "emptyTable": "El contribuyente no posee deudas",
                            "infoEmpty": "No hay informacion",
							"sUrl": "",
							"sInfoThousands": ",",
							"sLoadingRecords": "Cargando...",
                            "oPaginate":{
                                "sFirst": "Primero",
								"sLast": "Último",
								"sNext": "Siguiente",
								"sPrevious": "Anterior"
                            },
							"oAria": {
								"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
								"sSortDescending": ": Activar para ordenar la columna de manera descendente"
							}
                        },
                        "columnDefs": [
                            { "visible": false, "targets": [0,1,2,13], "searchable": true  },
                            { "orderable": false, "targets": -1 },
                            { "responsivePriority": 1, "targets": 0 },
                            { "responsivePriority": 2, "targets": -1 },
                            { "responsivePriority": 3, "targets": 1 },
                            { "responsivePriority": 4, "targets": 11 },
                        ],
                        "order": [[ 1, 'asc' ]],
                        // "drawCallback": function ( settings ) {
                        //     var api = this.api();
                        //     var rows = api.rows( {page:'current'} ).nodes();
                        //     var last = null;

                        //     api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                        //         if ( last !== group ) {
                        //             $(rows).eq( i ).before(
                        //                 '<tr class="group"><td colspan="12"><b>'+group+'</b></td></tr>'
                        //             );
                        //             last = group;
                        //         }
                        //     } );
                        // }
                    });


                    //DatatableFraccionamiento
                    $('#select-all2').prop('checked', true);
                    var tablefrac = $('#datatable-fraccionamiento').DataTable({
                        "iDisplayLength": 10,
                        "bLengthChange": false,
						"responsive": true,
                        "language": {
                            "lengthMenu": "Mostrar _MENU_ datos por página",
                            "zeroRecords": "No hubo resultados",
                            "info": "Mostrando página _PAGE_ de _PAGES_",
                            "infoFiltered": "",
                            "search": "Buscar: ",
                            "emptyTable": "El contribuyente no posee deudas",
                            "infoEmpty": "No hay informacion",
							"sUrl": "",//
							"sInfoThousands": ",",//
							"sLoadingRecords": "Cargando...",//
                            "paginate":{
                                "previous": "Anterior",
                                "next": "Siguiente"
                            }
                        },
                        "columnDefs": [
                            { "visible": false, "targets": [0,1,9,10], "searchable": true  },
                            { "responsivePriority": 1, "targets": 0 },
                            { "responsivePriority": 2, "targets": -1 },
                            { "responsivePriority": 3, "targets": 1 },
                            { "responsivePriority": 4, "targets": 11 },
                        ],
                        "order": [[ 1, 'asc' ],[ 4, 'asc' ]],
                        "drawCallback": function ( settings ) {
                            var api = this.api();
                            var rows = api.rows( {page:'current'} ).nodes();
                            var last=null;

                            api.column(3, {page:'current'} ).data().each( function ( group, i ) {
                                if ( last !== group ) {
                                    $(rows).eq( i ).before(
                                            '<tr class="group"><td colspan="12">'+group+'</td></tr>'
                                    );

                                    last = group;
                                }
                            } );
                        }
                    });


                    $('#select-all3').prop('checked', true);
                    var tableliq = $('#datatable-liquidaciones').DataTable({
                        "iDisplayLength": 10,
                        "bLengthChange": false,
						"responsive": {
                            "details": true
                        },
                        "language": {
                            "lengthMenu": "Mostrar _MENU_ datos por página",
                            "zeroRecords": "No hubo resultados",
                            "info": "Mostrando página _PAGE_ de _PAGES_",
                            "infoFiltered": "",
                            "search": "Buscar: ",
                            "emptyTable": "El contribuyente no posee deudas",
                            "infoEmpty": "No hay informacion",
							"sUrl": "",//
							"sInfoThousands": ",",//
							"sLoadingRecords": "Cargando...",//
                            "paginate":{
                                "previous": "Anterior",
                                "next": "Siguiente"
                            }
                        },
                        "columnDefs": [
                            { "visible": false, "targets": [1,5], "searchable": true  },
                            { "responsivePriority": 1, "targets": 0 },
                            { "responsivePriority": 2, "targets": -1 },
                            { "responsivePriority": 3, "targets": 6 },
                        ],
                        "order": [[ 1, 'asc' ],[ 4, 'asc' ]],
                        "drawCallback": function ( settings ) {
                            var api = this.api();
                            var rows = api.rows( {page:'current'} ).nodes();
                            var last=null;

                            api.column(3, {page:'current'} ).data().each( function ( group, i ) {
                                if ( last !== group ) {
                                    $(rows).eq( i ).before(
                                            '<tr class="group"><td colspan="12">'+group+'</td></tr>'
                                    );

                                    last = group;
                                }
                            } );
                        }
                    });


                    $('#select-all').click(function(event) {
                        if(this.checked) {
							gt = 3; arr = [];
                            // Iterate each checkbox
                            $(".impuestocheck:checkbox").each(function() {
                                this.checked = true;
                                arr.push(this.value);
                                var pattern = ("\\b" + arr.join('\\b|\\b') + '\\b');
                                table.column(4).search( pattern,true,false).draw();
                            });
                        }else{
                            $(".impuestocheck:checkbox").each(function( ) {
                                this.checked = false;
                            });
                            arr=[];
                            table.column(4).search("abcdefghijlkmnopq",true,false).draw();
                        }
                        console.log(arr);
                    });


                    $('#select-all2').click(function(event) {
                        if(this.checked) {
                            // Iterate each checkbox
                            $(".impuestocheck2:checkbox").each(function() {
                                this.checked = true;
                                arr.push(this.value);
                                var pattern = ("\\b" + arr.join('\\b|\\b') + '\\b');
                                tablefrac.column(0).search( pattern,true,false).draw();
                            });
                        }else{
                            $(".impuestocheck2:checkbox").each(function( ) {
                                this.checked = false;
                            });
                            arr=[];
                            tablefrac.column(0).search("abcdefghijlkmnopq",true,false).draw();
                        }
                        console.log(arr);
                    });


				 $('#datepicker').datepicker({
					 firstDay: 1,
					 onSelect: function (date){
						 alert(date)
					 },
				 });


                    $.fn.DataTable.ext.search.push(
                            function( settings, data, dataIndex ) {
                                var min = parseInt( $('#de-anio-select').val(), 10 );
                                var min2 = parseInt( $('#de-anio-select').val(), 10 );
                                fini = min;
                                fini2 = min2;

                                $('input[name="fini"]').val(fini);

                                var max = parseInt( $('#hasta-anio-select').val(), 10 );
                                var max2 = parseInt( $('#hasta-anio-select2').val(), 10 );
                                ffin = max;
                                ffin2 = max2;

                                $('input[name="ffin"]').val(ffin);
                                $('input[name="ffin2"]').val(ffin2);

                                var age = parseFloat( data[1] ) || 0; // use data for the age column
                               // console.log(min+" "+max);

                                if ( ( isNaN( min ) && isNaN( max ) ) ||
                                        ( isNaN( min ) && age <= max ) ||
                                        ( min <= age   && isNaN( max ) ) ||
                                        ( min <= age   && age <= max ) )
                                {
                                    return true;
                                }

                                if ( ( isNaN( min ) && isNaN( max ) ) ||
                                        ( isNaN( min ) && age <= max ) ||
                                        ( min <= age   && isNaN( max ) ) ||
                                        ( min <= age   && age <= max ) )
                                {
                                    return true;
                                }

                                return false;
                            }
                    );


                    function include(arr,obj) {
                        return (arr.indexOf(obj) != -1);
                    }

                    $('.impuestocheck:checkbox').on('click', function() {

						 $('.checkboxGroup',table.rows({search:'applied'}).nodes()).each(function(){

                            var objeto = $(this).data('cbx');
                            var id = $(this).data('id');

                            $(this).prop('checked', false);
                            if(jArray.indexOf(id.toString())!=-1) {

                                total -= parseFloat(objeto);
                                var index = jArray.indexOf(id.toString());
                                jArray.splice(index,1);
                            }

                            total = Math.round(total * 1000) / 1000;
                            $("input[type='hidden'][name='arraypay']").val(jArray);

                        });
                        $('#impuesto-all').prop('checked',false);

                        if(this.checked==true){
							gt++;
                            arr.push(this.value);
                            var pattern = ("\\b" + arr.join('\\b|\\b') + '\\b');
                            table.column(4).search( pattern,true,false).draw();
							if(gt == 3){
                                $('#select-all').prop('checked',true);
                            }
                        }else{
							gt--;
							$('#select-all').prop('checked',false);
                            var i = arr.indexOf(this.value);
                            arr.splice(i,1);
                            var pattern = ("\\b" + arr.join('\\b|\\b') + '\\b');
                            if(arr.length != 0) {
                                table.column(4).search(pattern, true, false).draw();
                            }else{
                                table.column(4).search("abcdefghijklmnopq", true, false)
                                        .draw();
                            }
                        }



                        menor = total;
                        $("#pago").text("   S/. " + total);


                    });

                    $('.impuestocheck2:checkbox').on('click', function() {
                        if(this.checked==true){
                            arr.push(this.value);
                            var pattern = ("\\b" + arr.join('\\b|\\b') + '\\b');
                            tablefrac.column(0).search( pattern,true,false).draw();
                        }else{
                            var i = arr.indexOf(this.value);
                            arr.splice(i,1);
                            console.log(arr);
                            var pattern = ("\\b" + arr.join('\\b|\\b') + '\\b');
                            if(arr.length != 0) {
                                tablefrac.column(0).search(pattern, true, false).draw();
                            }else{
                                tablefrac.column(0).search("abcdefghijklmnopq", true, false)
                                        .draw();
                            }
                        }
                    });


                    $('#de-anio-select, #hasta-anio-select').click( function() {
                        table.draw();
                    } );
                    $('#de-anio-select2, #hasta-anio-select2').click( function() {
                        tablefrac.draw();
                    } );



                    $("#datatable-impuesto_filter").hide();
                    $("#datatable-fraccionamiento_filter").hide();
                    $("#datatable-liquidaciones_filter").hide();


                    //-------------------------------------------
                    var selectimp = $('#de-anio-select');
                    table.column(1).data().unique().sort().each( function ( d, j ) {
                        selectimp.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                    selectimp.append( "<option style='background-color: #cdcdcd' value='' disabled selected>Año</option>" );
                    //-------------------------------------------
                    selectimp = $('#hasta-anio-select');
                    table.column(1).data().unique().sort().each( function ( d, j ) {
                        selectimp.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                    selectimp.append( "<option style='background-color: #cdcdcd' value='' disabled selected>Año</option>" );
                    //-----------------------------------------------------------------

                    var selectimp2 = $('#de-anio-select2');
                    tablefrac.column(1).data().unique().sort().each( function ( d, j ) {
                        selectimp2.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                    selectimp2.append( "<option style='background-color: #cdcdcd' value='' disabled selected>Año</option>" );
                    //-------------------------------------------
                    selectimp2 = $('#hasta-anio-select2');
                    tablefrac.column(1).data().unique().sort().each( function ( d, j ) {
                        selectimp2.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                    selectimp2.append( "<option style='background-color: #cdcdcd' value='' disabled selected>Año</option>" );
                    //-----------------------------------------------------------------



                    function filterme() {
                        var types = $('input:checkbox[name="type"]:checked').map(function() {
                            return '^' + this.value + '\$';
                        }).get().join('|');

                        table.fnFilter(types, 0, true, false, false, false);

                        var frees = $('input:checkbox[name="free"]:checked').map(function() {
                            return this.value;
                        }).get().join('|');
                        table.fnFilter(frees, 2, false, false, false, false);
                    }


                    //-----------------------------------------------------------------
                    //Datatable Responsive
                    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
                        $($.fn.dataTable.tables(true)).DataTable()
                                .columns.adjust()
                                .responsive.recalc();
                    });

                    var jArray = [];




                    $('#datatable-impuesto').on('click','#data-adicional',function (e) {
                        var sr = $(e.target).data('sr');
                        var lp = $(e.target).data('lp');
                        var pj = $(e.target).data('pj');
                        swal({
                            title: 'Detalle del Tributo',
                            text: "<table class='table table-striped table-bordered dt-responsive nowrap'><tbody><tr style='background-color: #61AB65;  width: 5%;'><td style='text-align: inherit; color: #fff;'>Detalle</td><td style='text-align: inherit; color: #fff;'>Monto</td></tr><tr><td style='text-align: inherit;'>serenazgo  </td><td >" +'S/.'+sr+
                            "</td></tr><tr><td  style='text-align: inherit;'>limpieza publica </td><td >" +'S/.'+lp+
                            "</td></tr><tr><td  style='text-align: inherit;'>Parques y Jardines publicos </td><td >" +'S/.'+pj+
                            "</td></tr></tbody></table>",
                            imageUrl: 'assets/images/logoleft.svg',
                            width: 341,
                            height:20,
                            padding:12,
                            margin: -322,
                            imageWidth: 200,
                            imageHeight: 100,
                            animation: true
                        })
                    });



					$('#datatable-liquidaciones').on('click', '.checkboxGroup', function (e) {
                        var val = $(e.target).data('cbx');
                        var id = $(e.target).data('id');
                        var orig = $(e.target).data('orig');

						if($(e.target).is(':checked')){
							if(!c){
							jArray.push(id);
							$("input[type='hidden'][name='arraypay']").val(jArray);


							total += parseFloat(val);
							$(this).prop('checked', true);
							c = true;
							}
							else{
							$(this).prop('checked', false);
							}
						  }
						else{
							c = false;
						var index = jArray.indexOf(id);
						jArray.splice(index, 1);
						$("input[type='hidden'][name='arraypay']").val(jArray);
						total -= parseFloat(val);
						}
						total = Math.round(total * 1000) / 1000;
						//console.log(jArray);
						$("#pago").text("   S/. " + total);
						menor = total;

                    });

					//var myFilteredRows = myDataTableHandle._('tr', {"filter":"applied"});





                    $('#datatable-impuesto,#datatable-fraccionamiento').on('click', '.checkboxGroup', function (e) {
                        var val = $(e.target).data('cbx');
                        var id = $(e.target).data('id');
                        var orig = $(e.target).data('orig');

                        if($(e.target).is(':checked') && orig!=id ){
                            isNaN(arrCost[orig]) ? arrCost[orig]=1 : arrCost[orig]++;
                            console.log(arrCost[orig]);
                            $(e.target).prop('checked', true);

                            if(jArray.indexOf(id)==-1) {
                                jArray.push(id);
                                $("input[type='hidden'][name='arraypay']").val(jArray);
                            }

                            total += parseFloat(val);


                            $('#datatable-impuesto .checkboxGroup').each(function () {
                                if(!$(this).is(':checked')){
                                    var auxid = $(this).data('id');
                                    if(auxid==orig){
                                        console.log("Y");
                                        $(this).prop('checked', true);
                                        if(jArray.indexOf(auxid)==-1) {
                                            jArray.push(auxid);
                                            $("input[type='hidden'][name='arraypay']").val(jArray);
                                        }
                                        total += parseFloat($(this).data('cbx'));
                                    }
                                }
                            });

                        }
                        else if($(e.target).is(':checked') && orig==id){
                            $(e.target).prop('checked', true);
                            if(jArray.indexOf(id)==-1) {
                                jArray.push(id);
                                $("input[type='hidden'][name='arraypay']").val(jArray);
                            }
                            total += parseFloat(val);
                        }
                        else if(!$(e.target).is(':checked') && orig==id){
                            $(e.target).prop('checked', false);
                            if(jArray.indexOf(id)!=-1) {
                                var index = jArray.indexOf(id);
                                jArray.splice(index,1);
                                $("input[type='hidden'][name='arraypay']").val(jArray);
                            }
                            total -= parseFloat(val);
                        }
                        else if(!$(e.target).is(':checked') && orig!=id){
                            $(e.target).prop('checked', false);
                            arrCost[orig]--;

                            if(jArray.indexOf(id)!=-1) {
                                var index = jArray.indexOf(id);
                                jArray.splice(index,1);
                                $("input[type='hidden'][name='arraypay']").val(jArray);
                            }

                            total -= parseFloat(val);
                            console.log(arrCost[orig]);
                            if(arrCost[orig]<=0) {
                                $('#datatable-impuesto .checkboxGroup').each(function () {
                                    if ($(this).is(':checked')) {
                                        var auxid = $(this).data('id');
                                        if (auxid == orig) {
                                            console.log("Y");
                                            $(this).prop('checked', false);
                                            if (jArray.indexOf(id) != -1) {
                                                var index = jArray.indexOf(id);
                                                jArray.splice(index, 1);
                                                $("input[type='hidden'][name='arraypay']").val(jArray);
                                            }
                                            total -= parseFloat($(this).data('cbx'));
                                        }
                                    }
                                });
                            }
                        }

                        total = Math.round(total * 1000) / 1000;
                        console.log(jArray);
						menor = total;
                        $("#pago").text("   S/. " + total);

                    });



                    $('#impuesto-all').on('change',function(){

                         $('.checkboxGroup',table.rows({search:'applied'}).nodes()).each(function(){
                            var objeto = $(this).data('cbx');
                            var id = $(this).data('id');


							if($('#impuesto-all').prop("checked")){

								$(this).prop('checked', true);
                                if(jArray.indexOf(id)==-1) {

									total += parseFloat(objeto);
                                    jArray.push($(this).data('id').toString());
                                }

							}
							else{
								$(this).prop('checked', false);
                                if(jArray.indexOf(id.toString())!=-1) {

									total -= parseFloat(objeto);
                                    var index = jArray.indexOf(id.toString());
                                    jArray.splice(index,1);
                                }
							}
                            total = Math.round(total * 1000) / 1000;
							//console.log(total);
							$("input[type='hidden'][name='arraypay']").val(jArray);
                        });
							menor = total;
                            $("#pago").text("   S/. " + total);
                    });


                    $('#datatable-impuesto tbody,#datatable-fraccionamiento tbody').on( 'click', 'tr.group', function () {
                        var currentOrder = table.order()[0];
                        if ( currentOrder[0] === 0 && currentOrder[0] === 'asc' ) {
                            table.order( [ 0, 'desc' ] ).draw();
                        }
                        else {
                            table.order( [ 0, 'asc' ] ).draw();
                        }
                    } );


                    var rows = table.rows('.extra-data');
                    for(var i=1;i<rows.count()+1;i++){
                        var conca = '#extra-data'+'-'+i;
                        var child = table.row( conca ).child;
                        table.row(conca).child.hide();
                        table.row(conca).child.hide();
                        if ( child.isShown() ) {
                            child.hide();
                        }
                        else {
                            child.show();
                        }

                    }


                    $('#Ireset-impuesto,#Freset-fraccionamiento,#Lreset-liquidacion').click(function () {
						gt = 3; arr = [];
                        arrCost = [];
						table.search('').columns().search('').draw();
						tablefrac.search('').columns().search('').draw();
						tableliq.search('').columns().search('').draw();

                        let tArrayPay = $("input[type='hidden'][name='Tarraypay']");

                        tArrayPay.val(this.id);

						$(".impuestocheck:checkbox").each(function(e) {
                                    arr.push(this.value);
                                    this.checked = true;
                                });
                         $('#select-all').prop('checked',true);
						 $('#impuesto-all').prop('checked',false);

						$(".impuestocheck2:checkbox").each(function(e) {
                                    arr.push(this.value);
                                    this.checked = true;
                                });
                         $('#select-all2').prop('checked',true);


						$('.checkboxGroup',table.rows().nodes()).each(function(){
                           $(this).prop('checked', false);
                        });
						$('.checkboxGroup',tablefrac.rows().nodes()).each(function(){
                           $(this).prop('checked', false);
                        });
						$('.checkboxGroup',tableliq.rows().nodes()).each(function(){
                           $(this).prop('checked', false);
                        });

                        jArray = [];

                        total = (total - menor);
                        console.log({ total });
                        menor = 0.0;
                        $("#pago").text("   S/. " + total);
						c = false;
						console.log({ jArray });
                        console.log(tArrayPay.val());
                    });


                } );




            </script>
            <script>
                $('#action-email').on('click', function() {
                    swal({
                        title: 'Enviar estado de cuenta',
                        text: 'Escribe aquí tu correo',
                        input: 'email',
                        showCancelButton: true,

                        cancelButtonText: "Cerrar",

                        confirmButtonText: 'Enviar',
                        inputPlaceholder: "Nombre@ejemplo.com"

                    }).then(function(email) {

						window.loading_screen = window.pleaseWait({
						logo: 'assets/images/logoleft.svg',
						backgroundColor: '#1ab6ff',
						loadingHtml: "<p class='loading-message' style='color: #fff'>Enviando correo...</p><div class='spinner' style='color: #fff'><div class='rect1'></div><div class='rect2'></div><div class='rect3'></div><div class='rect4'></div><div class='rect5'></div></div>"
						});

                        $.ajax(
                                {
                                    type: "get",
                                    url: "/MOLINA.PAGOS/public/index.php/estadocuentamail/"+email
                                }
                        ).done(function(data) {
									window.loading_screen.finish();
                                    swal({
                                        type: 'success',
                                        html: 'El correo <strong>' + email + '</strong>  ha sido enviado'
                                    });
                                })
                                .error(function(data) {
									window.loading_screen.finish();
                                    swal("Ups", "Ocurrio un error con el envio de correo!", "error");
                                });
                    }).done();
                });
                function showSpinner() {
                    $('#btnPay').append(`
                        <i class="fa fa-spinner fa-pulse"></i>
                        <span class="sr-only">Loading...</span>
                    `);
                }
            </script>
<script src="{{ asset('assets/js/jquery.twbsPagination.js') }}"></script>
@stop
