<div id="divDetailLoans" data-bind="visible: IsDetails">
    <div class="form-horizontal" data-bind="with: LoanModel">
        <div>
            <h3><strong>Detalles</strong></h3>
            <br />
            <dl class="dl-horizontal">
                <dt>
                    <strong>No. Prestamo:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: CodeLoan"></span>
                </dd>
                <dt>
                    <strong>Cliente:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: FullName"></span>
                </dd>
                <dt>
                    <strong>Monto del Prestamo:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: Amount"></span>
                </dd>
                <dt>
                    <strong>Monto Pendiente:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: AmountCurrent"></span>
                </dd>
                <dt>
                    <strong>Tasa:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: Rate"></span><span>%</span>
                </dd>
                <dt>
                    <strong>Interes Generado:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: Interest"></span>
                </dd>
                <dt>
                    <strong>Interes Ganado:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: InterestAmount"></span>
                </dd>
                <dt>
                    <strong>Fecha:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: DateCreation"></span>
                </dd>
                <dt>
                    <strong>Ciclo de Prestamo:</strong>
                </dt>
                <dd>
                    <span style="text-align:left" data-bind="text: CycleLoanName"></span>
                </dd>
                <dt>
                    <strong>Tipo de Prestamo:</strong>
                </dt>
                <dd>
                    <span id="QuantityQuotasDetEdit" style="text-align:left" data-bind="text: TypeLoanName"></span>
                </dd>
                <dt id="QuantityQuotasDet">
                    <strong>No. Cuotas:</strong>
                </dt>
                <dd>
                    <span id="QuantityQuotasDetItem" style="text-align:left" data-bind="text: QuantityQuota"></span>
                </dd>
                <dt>
                    <strong>Estado de Prestamo:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: StateLoanName"></span>
                </dd>
                <dt>
                    <strong>Nota:</strong>
                </dt>

                <dd>
                    <span style="text-align:left" data-bind="text: Note"></span>
                </dd>
            </dl>
        </div>
        <div id="divListAmortizationTables">
            <hr />
            <h3>Tabla de Amortizacion</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            No. Cuota
                        </th>
                        <th>
                            Valor Cuota
                        </th>
                        <th>
                            Capital
                        </th>
                        <th>
                            Interes
                        </th>
                        <th>
                            Fecha
                        </th>
                        <th>
                            Estado
                        </th>

                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: $parent.AmortizationTable">
                    <tr>
                        <td style="text-align:left" data-bind="text: NumberQuota"></td>
                        <td style="text-align:left" data-bind="text: AmountPay.toFixed(2)"></td>
                        <td style="text-align:left" data-bind="text: AmountCapital.toFixed(2)"></td>
                        <td style="text-align:left" data-bind="text: AmountInterest.toFixed(2)"></td>
                        <td style="text-align:left" data-bind="text: moment(DatePayment).format('DD/MM/YYYY') "></td>
                        <td style="text-align:left" data-bind="text: StatePayName"></td>
                        <td style="text-align:center">
                            <a href="#" data-bind="click: $parent.PayQuota" class=" btn btn-success">Pagar</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

loanViewModel.PayQuota = function (model) {
    swal({
        title: "Esta seguro?",
        text: "Que desea pagar esta cuota?",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-success",
        confirmButtonText: "Si",
        cancelButtonText: "Cancelar",
        closeOnConfirm: false,
        closeOnCancel: false
    },
        function (isConfirm) {
            if (isConfirm) {
                $.ajax({
                    url: '/AdminAmortizationTables/PayQuota',
                    data: ko.toJSON(model),
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    success: function (data) {
                        if (data.Success) {
                            swal("Pagado!", "Se ha realizado el pago satisfactoriamente", "success");
                        }
                        else {
                            swal("Error realizando el pago!", data.Data, "error")
                        }
                    }
                });

            } else {
                swal("Cancelado!", "El pago no ha sido realizado", "error");
            }
        });
};