@extends('layout')
@section('title', 'Anulación de Pagos')
@section('style')
    <style>
        #tabla{
            margin-top: 5px;
            height: 250px;
            overflow-y: auto;
            overflow-x: auto;
            display: block;
        }

        #tabla>thead>tr>th{
            width: 100%;
            font-size: 10px;
        }
    </style>
@stop
@section('content')
<div class="col-sm-12 col-md-10 col-lg-10 col-xl-10">
    <h3 class="text-center titulo">Anulación de Pagos</h3>
    <div class="borde-forma">
        <form id="form" method="get" accept-charset="utf-8" onsubmit="return false;" >
            <p class="parrafo-forma">
                Los campos marcados con <strong class="requerido">*</strong> son obligatorios.
            </p>
            {{ csrf_field() }}
            <div class="form-group row">
                <label for="txtNumero" class="col-sm-12 col-form-label col-md-2 col-lg-2 col-xl-3 text-xl-right text-lg-right text-md-right text-sm-left">
                    <strong class="requerido">*</strong>Número de factura paga:
                </label>
                <div class="col-sm-12 col-md-3 col-lg-3 col-xl-3 validar">
                    <input type="text" name="txtNumero" id="txtNumero" title="Ingrese número de factura paga" class="form-control" placeholder="Número de factura paga" required="" style="height: 34px;" autocomplete="off">
                </div>
                <label for="txtFecha" class="col-sm-12 col-form-label col-md-2 col-lg-2 col-xl-2 text-xl-right text-lg-right text-md-right text-sm-left">
                    <strong class="requerido">*</strong>Fecha Anulación:
                </label>
                <div class="col-sm-12 col-md-3 col-lg-3 col-xl-3 validar">
                    <input type="text" name="txtFecha" id="txtFecha" title="Fecha de anulación" class="form-control fecha" placeholder="Fecha de anulación" required="" style="height: 34px;" value="<?php echo date("d/m/Y") ?>" autocomplete="off">
                </div>
            </div>
        </form>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <table class="table table-bordered table-striped table-condensed table-striped table-hover" id="tabla">
            <thead>
            <tr>
                <th style="width: 25%;">TIPO PAGO</th>
                <th style="width: 15%;">FECHA PAGO</th>
                <th style="width: 20%;">RESPONSABLE</th>
                <th style="width: 10%;">PAQUETE</th>
                <th style="width: 30%;">BANCO</th>
                <th style="width: 5%;"></th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@stop
@section('script')
<script>
    $("#txtNumero").autocomplete({
        source:"/municipiobarbosa-sigiep/predial/public/factura/buscar",
        minLength: 3,
        select: function(event, ui){
            $("#txtNumero").val(ui.item.value);
        }
    });

    $("#txtNumero").blur(function(){
        let numero = $("#txtNumero").val();
        let token =  $("input[name='_token']").val();
        $.get("/municipiobarbosa-sigiep/predial/public/BuscarPagosFactura", { numero : numero, _token: token }, function(data){
            $("#tabla>tbody").html(data);
        });
    });

    function registrar($id){
        let token  = $("input[name='_token']").val();
        let numero = $("#txtNumero").val();
        let date   = $("#txtFecha").val();
        let fecha  = date.split("/").reverse().join("-");
        $.post(
            "/municipiobarbosa-sigiep/predial/public/GuardarAnulacionPago",
            {
                _token: token,
                numero: numero,
                fecha: fecha,
                id: $id
            },
            function (data){
                window.location.reload();
            }
        );
    }
</script>
@stop