@extends('layouts.authorized')
@inject('constant', '\App\Util\Constant')
@section('title', 'Daftar Pendanaan')

@section('headerCustom')
    @php
        $title = 'Daftar Pendanaan';
    @endphp
@endsection

@section('cssCustom')
    <style>
        .text-warning{
            color: gold !important;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-xs-12">
            <div class="card">
                <div class="card-header card-header-add ">
                    <span>Daftar Pendanaan</span>
                </div>
                <div class="row" style="padding-top: 15px;">
                    <div class="col-md-12">
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <label>Tgl. Pendanaan</label>
                            <div class="input-group input-date-range">
                                <input name="dateFrom" type="text" class="datepickerinput custom-date-range form-control" value="{{  Carbon::now()->subMonths(1)->format('d M Y') }}">
                                <span class="input-group-addon">To</span>
                                <input name="dateTo" type="text" class="datepickerinput custom-date-range form-control" value="{{ Carbon::now()->format('d M Y') }}">
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <label>Status Invoice/PO</label>
                            <select name="invoiceStatus" class="form-control" style="width: 100%" onchange="refreshDataTable()">
                                <option value="">Semua Status</option>
                                <option value="{{ $constant::INVOICE_STATUS_OFFERED }}">{{ $constant::INVOICE_STATUS_LABELS[$constant::INVOICE_STATUS_OFFERED] }}</option>
                                <option value="{{ $constant::INVOICE_STATUS_ACTIVE }}">{{ $constant::INVOICE_STATUS_LABELS[$constant::INVOICE_STATUS_ACTIVE] }}</option>
                                <option value="{{ $constant::INVOICE_STATUS_COMPLETED }}">{{ $constant::INVOICE_STATUS_LABELS[$constant::INVOICE_STATUS_COMPLETED] }}</option>
                            </select>
                        </div>
                    </div>
                </div>
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(route('productive.lender.invoicePayment.data'))
                    <thead>
                        <tr>
                            <th data-column-name="invoiceNumber">No. Invoice/PO</th>
                            <th data-column-name="vaNumber">No. Va Lender</th>
                            <th data-column-name="methodPayment">Metode Pembayaran</th>
                            <th data-column-name="amount">Nilai Pendanaan</th>
                            <th data-column-name="date">Waktu Pengajuan</th>
                            <th data-column-name="akadStatus">Status Akad</th>
                            <th data-column-name="paymentStatus">Status Dana</th>
                            <th data-column-name="refundStatus">Status Pengembalian</th>
                            <th data-column-name="investorContract" data-sortable="false">Dokumen Akad</th>
                            <th data-column-name="privyDocumentUrl" data-sortable="false">Dokumen Privy</th>
                            <th data-column-name="privyDocumentToken" data-sortable="false">Dokumen Signed</th>
                            <th data-column-name="borrowerContract" data-sortable="false">Dokumen Borrower</th>
                            <th data-column-name="status">Status Pembiayaan</th>
                            <th data-column-name="dataObject" data-sortable="false">Aksi</th>
                            <th data-column-name="additional" data-sortable="false">&nbsp;</th>
                        </tr>
                    </thead>
                    @endtableajax
                </div>
            </div>
        </div>
    </div>

    <div id="historyFundTransferDanamonModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header p-15">
                    <h4 class="modal-title">Riwayat Transaksi Fund Transfer Danamon</h4>
                </div>
                <div class="modal-body p-15 text-center">
                    <div class="table-responsive">
                        <table class="table table-hover" style="width: 100%;">
                            <thead>
                                <th class="text-center">#</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Tipe</th>
                                <th class="text-center">Nilai Transfer</th>
                                <th class="text-center">Reference Number</th>
                                <th class="text-center">Tanggal Transfer</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('jsCustom')
    <script>
        $(document).ready(function() {
            $('.custom-date-range').on('dp.change', function() {
                refreshDataTable();
            });
        });

        function customColumns(index) {
            if(index === 0){
                return {
                    8 : function (data, type, row, meta) {
                        // if (row[5] == '{{ $constant::INVOICE_PAYMENT_AKAD_STATUS_LABELS["COMPLETE"] }}') {
                            var result = `<a href="${data}" target="_blank">Lihat Dokumen</a>`;
                        // } else {
                        //     var result = 'N/A';
                        // }
                        return result;
                    },
                    9 : function (data, type, row, meta) {
                        // if (row[9] == "") {
                        //     return "Belum verifikasi hold balance";
                        // } else {
                            return `<a href=${data} target="_blank">Lihat Dokumen</a>`;
                        // }
                    },
                    10 : function (data, type, row, meta) {
                        if (row[5] == '{{ $constant::INVOICE_PAYMENT_AKAD_STATUS_LABELS["COMPLETE"] }}') {
                            var result = '<a href="{{ route('admin.privy.getSignedDoc', ['token' => '']) }}/'+ data +'" target="_blank">Lihat Dokumen</a>';
                        } else {
                            var result = 'N/A';
                        }
                        return result;
                    },
                    13: function (data, type, row, meta) {
                        data = JSON.parse(data);

                        var html = '';

                        if(data.isEditable) {
                            html += '<button type="button" class="btn btn-default btn-xs delete-button-modal" data-toggle="modal" data-target="#modal-delete-alert" data-url="{{ route('lender.rdlDanamon.unholdBalance', ['id'=>'']) }}/' + data.id + '"> Batal</button>';
                         
                            if (row[8] == '{{ $constant::INVOICE_PAYMENT_RDI_DANAMON_STATUS_VERIFICATION }}') {
                                html += `<a class="btn btn-primary btn-xs" href="{{ route('lender.rdlDanamon.otp', ['where' => 'holdBalance', 'id' => '']) }}/${data.id}" target="_blank">Verifikasi OTP</a>`;
                            }else if (row[8] == "") {
                                html += `<a class="btn btn-primary btn-xs" href="{{ route('lender.rdlDanamon.retryHoldBalance', ['invoicePaymentId' => '']) }}/${data.id}" target="_blank">Hold Balance Pendanaan</a>`;
                            }
                        }

                        return html;
                    },
                    14: function (data, type, row, meta) {
                        data = JSON.parse(data);

                        var html = `<button type="button" class="btn btn-primary btn-xs history-fund-transfer-button" data-invoice-id="${data.invoiceId}">Riwayat Transfer</button>`;

                        return html;
                    }
                }
            }
            else {
                return '';
            }
        }

        function showHistoryTransferModal(el) {
            const id = $(el).data('invoiceId');

            const url = '{{ route("productive.lender.invoicePayment.getHistoryFundingTransferDanamon.by.invoiceId") }}';

            $.ajax({
                type: "GET",
                url: url,
                data: {
                    id: id,
                },
                contentType: "application/json",
                success: function (response) {
                    const { data } = response;
                    console.log(data);
                    
                    $('#historyFundTransferDanamonModal tbody').empty();

                    if ($.isArray(data) && data.length > 0) {
                        $.each(data, function(index, transaction) {
                            let textColor = transaction.status === 'SUCCESS' ? 'success' : 'danger';
                            let row = `
                                <tr>
                                    <td class="text-center">${index + 1}</td>
                                    <td class="text-center text-${textColor}"><b>${transaction.status}</b></td>
                                    <td class="text-center"><b>${transaction.type}</b></td>
                                    <td class="text-center">${parseFloat(transaction.amount).toLocaleString('id-ID', { style: 'currency', currency: 'IDR' })}</td>
                                    <td class="text-center">${transaction.bankUserReferenceNumber}</td>
                                    <td class="text-center">${new Date(transaction.transferDate).toLocaleString('id-ID')}</td>
                                </tr>
                            `;
                            $('#historyFundTransferDanamonModal tbody').append(row);
                        });
                    } else {
                        let row = `
                            <tr>
                                <td class="text-center" colspan="6">${response.message}</td>
                            </tr>
                        `;

                        $('#historyFundTransferDanamonModal tbody').append(row);
                    }
                    
                    $('#historyFundTransferDanamonModal').modal('toggle');
                },
                error: function (xhr, status, error) {
                    const response = xhr.responseJSON;
                    console.error(response.message);
                    swal('Error', `reason: ${response.message}`, 'error')
                }
            });
        }

        $(document).on('click', '.history-fund-transfer-button', function(e) {
            e.preventDefault();
            showHistoryTransferModal(this);
        })

        function customFilter(filter) {
            filter.dateFrom         = $('[name=dateFrom]').val();
            filter.dateTo           = $('[name=dateTo]').val();
            filter.invoiceStatus    = $('[name=invoiceStatus]').val();
            return filter;
        }

        function refreshDataTable() {
            dataTableList[0].clear().draw();
        }

    </script>
@endsection