@extends('layout')
@section('title', 'Pago predial')
@section('style')
<style type="text/css" media="screen">
    .chosen-container{
        width: 100% !important;
        font-size: 10px !important;

    }

    .chosen-container-single .chosen-search input[type="text"]{
        width: 80%;
        font-size: 10px !important;
    }

    .chosen-search-input{
        font-size: 10px !important;
    }

    table .form-control, table .chosen-container, table .select{
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .chosen-container-single .chosen-single div:after{
        left: -0.1rem !important;
        height: 1.5rem !important;
    }
</style>
@stop
@section('content')
<div class="col-sm-12 col-md-10 col-lg-10 col-xl-10">
    <h3 class="text-center titulo">Pago Predial</h3>
    <?php $valor_paquete = 0; ?>
    @if(!empty($paquete->id_unico))
        <div class="form-group row sin-salto">
            <label class="col-form-label col-sm-6 col-md-2 col-lg-2 col-xl-2 text-xl-left tamaño-letra" title="Fecha de pago">Fecha pago : {{ $paquete->fecha }}</label>
            <label class="col-form-label col-sm-6 col-md-3 col-lg-3 col-xl-3 text-xl-left tamaño-letra" title="Banco">Banco: {{ $paquete->cod." ".$paquete->descripcion }}</label>
            <label class="col-form-label col-sm-6 col-md-2 col-lg-2 col-xl-2 text-xl-left tamaño-letra" title="Número de paquete">N° Paquete : {{ $paquete->numero }}</label>
            <label class="col-form-label col-sm-6 col-md-2 col-lg-2 col-xl-2 text-xl-left tamaño-letra" title="Cupones Registrados">Cupones Reg : {{ $paquete->cupones }}</label>
            <label class="col-form-label col-sm-6 col-md-2 col-lg-2 col-xl-2 text-xl-left tamaño-letra" title="Valor Reportado">Valor Reportado : {{ number_format($paquete->valor, 2, '.', ',') }}</label>
        </div>
        <?php $valor_paquete = $paquete->valor; ?>
    @endif
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 superior2 tamaño-letra">
        <table class="table table-striped table-condensed table-bordered" id="table" data-toggle="dataTable" data-form="deleteForm">
            <thead>
                <tr>
                    <th >Tipo Pago</th>
                    <th style="width: 200px">Factura</th>
                    <th>Predio</th>
                    <th>Valor</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <form id="form-table" method="post" accept-charset="utf-8" action="{{ route('RegistrarPago') }}" novalidate>
                        {{ csrf_field() }}
                        @if(!empty($paquete->id_unico))
                            <input type="hidden" name="txtFecha" value="{{ $paquete->fecha }}">
                            <input type="hidden" name="txtPaquete" value="{{ $paquete->id_unico }}">
                            <input type="hidden" name="txtBanco" value="{{ $paquete->banco }}">
                        @endif
                        <td width="15%">
                            <select name="sltTipo" id="sltTipo" class="form-control select" title="Seleccione tipo">
                                <option value="">Tipo Pago</option>
                                @foreach($tipos as $row)
                                    <option value="{{ $row->id_unico }}">{{ ucwords(mb_strtolower($row->nombre)) }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="text" name="txtFactura" id="txtFactura" class="form-control" placeholder="Factura" required="" style="width: 200px; height: 20px">
                            <input type="hidden" name="sltFactura" id="sltFactura" value="" required="">
                        </td>
                        <td>
                            <label for="" id="nomPredio" class="col-form-label"><span class="text-muted">Predio</span></label>
                        </td>
                        <td>
                            <input type="text" class="form-control" id="txtValor" name="txtValor" title="Ingrese valor" style="width: 90%" placeholder="Valor"/>
                            <input type="hidden" id="txtValorC" name="txtValorC" value="">
                        </td>
                        <td width="3%">
                            <button type="submit" id="submit" class="btn btn-primary btn-sin icons cursor fa fa-save"></button>
                        </td>
                    </form>
                </tr>
                <?php $total = 0; $cup = 0; ?>
                @if(!empty($data))
                    @foreach($data as $row)
                        <tr>
                            <td>{{ $row->pgnom }}</td>
                            <td class="text-right">{{ $row->numero }}</td>
                            <td class="text-right">{{ $row->predio }}</td>
                            <td class="text-right">{{ number_format($row->valor, 2, '.', ',') }}</td>
                            <?php
                            $total += $row->valor;
                            $cup++;
                            ?>
                            <td></td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
            <tfoot>
                <tr>
                    <?php
                    $cupones = 0; $valor = 0;
                    if(!empty($paquete->id_unico)){
                        $cupones = $paquete->cupones;
                        $valor   = $paquete->valor;
                    }
                    $dif = $cup - $cupones;
                    $vtl = $valor - $total;
                    ?>
                    <td></td>
                    <td class="text-right">Diferencia valores : {{ number_format( $vtl<0?0:$vtl, 2, '.', '.') }}</td>
                    <td class="text-right">Diferencia cupones : {{ $dif<0?0:$dif }}</td>
                    <td class="text-right">Recaudo Acumulado : {{ number_format($total<0?0:$total, 2, '.', ',') }}</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@include('pago/modalPaquetes')
@include('pago/modalValida')
@include('pago/modalCerrado')

@stop
@section('script')
<script type="text/javascript">
    $("#form-table").on('submit', function(e){
        var tipo    = $("#sltTipo").val();
        var factura = $("#sltFactura").val();
        var valor   = $("#txtValor").val();

        if(tipo.length > 0){
            $("#sltTipo_chosen").removeClass('borde-error');
        }else{
            e.preventDefault();
            $("#sltTipo_chosen").addClass('borde-error');
        }

        if(factura.length > 0){
            $("#txtFactura").removeClass('borde-error');
        }else{
            e.preventDefault();
            $("#txtFactura").addClass('borde-error');
        }

        if(valor.length > 0 ){
            $("#txtValor").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtValor").addClass('is-invalid').removeClass('is-valid');
        }

        if(valor == 0){
            e.preventDefault();
            $("#txtValor").addClass('is-invalid').removeClass('is-valid');
        }
    });

    $("#txtValor").keyup(function(e){
        const xxx   = parseFloat($("#txtValorC").val());
        const valor = parseFloat($(this).val());
        if(xxx >= valor){
            $(".btn-sin").css("display", "block");
        }else{
            $(".btn-sin").css("display", "none");
            $('#txtValor').on('keyup, keypress', function(e) {
                var keyCode = e.keyCode || e.which;
                if (keyCode === 13) {
                    e.preventDefault();
                    return false;
                }
            });
        }
    });

    @if(empty($paquete->id_unico))
        $("#modalPaquete").modal("show");
    @endif

    $("#btn-guardarP").click(function(){
        $("#form-paquete").submit();
    });

    {{-- @if($total == $valor_paquete)
        $(".btn-sin").css("display", "none");
        $("#form-table").removeAttr("action");
        $('#txtValor').on('keyup, keypress', function(e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode === 13) {
                e.preventDefault();
                return false;
            }
        });
    @endif --}}

    $("#btn-guardarP").on('click',function(e){
        var fecha   = $("#txtFecha").val();
        var banco   = $("#sltBancos").val();
        var paquete = $("#txtNumeroPaquete").val();
        var cupones = $("#txtCupones").val();
        var valorR  = $("#txtValorR").val();

        if(fecha.length > 0){
            $("#txtFecha").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtFecha").addClass('is-invalid').removeClass('is-valid');
        }

        if(banco.length > 0){
            $("#sltBancos_chosen").removeClass('borde-error');
        }else{
            e.preventDefault();
            $("#sltBancos_chosen").addClass('borde-error');
        }

        if(paquete.length > 0){
            $("#txtNumeroPaquete").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtNumeroPaquete").addClass('is-invalid').removeClass('is-valid');
        }

        if(cupones.length > 0){
            $("#txtCupones").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtCupones").addClass('is-invalid').removeClass('is-valid');
        }


        if(valorR.length > 0){
            $("#txtValorR").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtValorR").addClass('is-invalid').removeClass('is-valid');
        }
    });

    $("#sltTipo").change(function(){
        $tipo = $("#sltTipo").val();
        if($tipo == 4){
            $("#form-table").attr("action", "{{ route("PagoAbono") }}");
        }else{
            $("#form-table").attr("action", "{{ route("RegistrarPago") }}");
        }
    });

    $("#txtFactura").autocomplete({
        source:"/predial/factura/buscar",
        minLength: 3,
        select: function(event, ui){
            $("#txtFactura").val(ui.item.value);
            $("#sltFactura").val(ui.item.id);
            var factura = ui.item.id;

            var fechapago = "{{ !empty($paquete->fecha)?$paquete->fecha:0 }}" ;
            $("#txtValor, #txtValorC").empty();

            $.get("/predial/obtnerCodigoPredio",
                {
                    "factura" : factura,
                    "fechapago" : fechapago
                },
                function(data){
                $("#nomPredio").text(data);
            });

            $.get("/predial/TotalFactura?factura="+factura, function(data){
                $("#txtValor, #txtValorC").val(data);
            });

            {{-- $.get("/predial/ValidarPeriodoPago?factura="+factura+"&fechapago="+fechapago, function(data){
                if(data == 0){
                }else{
                    $("#modalValida").modal("show");
                    $(".btn-sin").css("display", "none");
                    $("#form-table").removeAttr("action");
                    $('#txtValor').on('keyup, keypress', function(e) {
                        var keyCode = e.keyCode || e.which;
                        if (keyCode === 13) {
                            e.preventDefault();
                            return false;
                        }
                    });
                }
            }); --}}
        }
    });
    $("#txtFecha").change(function (){
    var fecha = $("#txtFecha").val();
    $.get("../public/ValidarPeriodoC?fecha="+fecha, function(data){
            if(data == 2){
            }else{
                $("#modalPaquetes").modal("hide");
                $("#modalCerrado").modal("show");
            }
    });
}); 
</script>
@stop