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

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

@section('cssCustom')
<style>
        /* .simulasi-percepatan .modal-body .row div:nth-last-child(4){
            display: flex;
        }

        .simulasi-percepatan .modal-body .row div:nth-last-child(4) p{
            padding-left: 2rem;
        } */

        .app-container .nav-tabs{
            overflow-x: scroll;
        }

        .simulasi-percepatan .modal-body .row .col-md-4::after{
            content: ":";
            position: absolute;
            right: 0;
            top: 0;
        }

        .text-warning{
            color: gold !important;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-xs-12">
            <ul id="listOrderStatus" class="nav nav-tabs">
                <li @if($status === $constant::INVOICE_STATUS_VERIFICATION) class="active" @endif>
                    <a href="{{ route('productive.lender.invoices', ['status' => $constant::INVOICE_STATUS_VERIFICATION, 'role' => $constant::INVOICE_STATUS_VERIFICATION_APPROVAL_LENDER]) }}">
                        Persetujuan
                    </a>
                </li>
                <li @if($status === $constant::INVOICE_STATUS_OFFERED) class="active" @endif>
                    <a href="{{ route('productive.lender.invoices', ['status' => $constant::INVOICE_STATUS_OFFERED, 'role' => '']) }}">
                        Pendanaan
                    </a>
                </li>
            </ul>
            <div class="card">
                <div class="card-header card-header-add ">
                    <span>{{ $title }}</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. Pengajuan</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>Tgl. Jatuh Tempo</label>
                            <div class="input-group input-date-range">
                                <input name="dueDateFrom" type="text" class="datepickerinput custom-date-range form-control" value="">
                                <span class="input-group-addon">To</span>
                                <input name="dueDateTo" type="text" class="datepickerinput custom-date-range form-control" value="">
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <label>Tgl. Berjalan</label>
                            <div class="input-group input-date-range">
                                <input name="confirmDateFrom" type="text" class="datepickerinput custom-date-range form-control" value="">
                                <span class="input-group-addon">To</span>
                                <input name="confirmDateTo" type="text" class="datepickerinput custom-date-range form-control" value="">
                            </div>
                        </div>
                    </div>
                </div>
                @php
                    if ($status === $constant::INVOICE_STATUS_VERIFICATION) {
                        $aksi = "id";    
                    } else if($status === $constant::INVOICE_STATUS_OFFERED) {
                        $aksi = "rangeVal";    
                    }
                @endphp
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(route('productive.lender.invoicesData', ['status' => $status, 'role' => $roleApprovalVerification]))
                    <thead>
                    <tr>
                        <th data-column-name="invoiceNumber">No.</th>
                        <th data-column-name="createdAt">Tgl. Pengajuan</th>
                        <th data-column-name="activeAt">Tgl. Penyaluran</th>
                        <th data-column-name="emailDueDate">Tgl. Jatuh Tempo</th>
                        <th data-column-name="businessName">Borrower</th>
                        <th data-column-name="invoiceValue">Nilai Invoice</th>
                        <th data-column-name="submissionValue">Nilai Pembiayaan</th>
                        <th data-column-name="fundingValue">Nilai Pembiayaan</th>
                        <th data-column-name="payorName">Payor</th>
                        <th data-column-name="period">Tenor</th>
                        <th data-column-name="marginRate">Ujroh</th>
                        <th data-column-name="documentText">Dokumen Pendukung</th>
                        <th data-column-name="factSheet">Fact Sheet</th>
                        <th data-column-name="fundSimulation">Simulasi Pembiayaan</th>
                        <th data-column-name="{{$aksi}}" data-sortable="false">Aksi</th>
                    </tr>
                    </thead>
                    @endtableajax
                </div>
            </div>
        </div>
    </div>

    <div id="modal-approval-verification" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <form method="POST">
                <input type="hidden" name="approvalVerfication">
                <div class="modal-content">
                    <div class="modal-header p-15">
                        <h4 class="modal-title"><span class="modal-title-approval"></span> Pendanaan</h4>
                    </div>
                    <div class="modal-body p-15 text-center">
                        <div class="row">
                            <i class="fa fa-exclamation-circle mb-20 fa-4x"></i>
                            <p class="mb-25"><b id="modal-dialog-approval"></b></p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Batal
                        </button>
                        <button class="btn btn-primary btnSubmit" type="submit">
                            <span class="modal-title-approval"></span> Pendanaan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="modal-offered" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <form method="POST">
                <input type="hidden" name="offered">
                <div class="modal-content">
                    <div class="modal-header p-15">
                        <h4 class="modal-title">Pendanaan</h4>
                    </div>
                    <div class="modal-body p-15 text-center">
                        <div class="row">
                            <div class="col-md-12">
                                <b><p>Nilai Pendanaan</p></b>
                            </div>
                            <div class="col-md-12 pb-10" style="border-bottom:1px solid rgb(234, 234, 234);">
                                <input class="form-control text-center autonumeric" type="text" value="0" name="amount" required>
                                <small class="text-warning">Masukkan jumlah nilai minimal Rp <span id="min-val"></span>, maksimal Rp <span id="max-val"></span></small>
                                <br><br><br>
                                <p>Sisa Pendanaan : <span id="rest-payment"></span> <b id="rest-percentage-text"></b></p>
                                <div class="progress">
                                    <div class="progress-bar" id="fund-percentage" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mt-10 text-left">
                                <b><p>Metode Pendanaan</p></b>
                            </div>
                            <div class="col-md-12 text-left">
                                <input type="radio" name="methodPayment" value="{{$constant::INVOICE_PAYMENT_METHOD_PAYMENT_RDI_DANAMON}}" id="method-payment-rdl" required/>
                                {{$constant::INVOICE_PAYMENT_METHOD_PAYMENT_LABELS[$constant::INVOICE_PAYMENT_METHOD_PAYMENT_RDI_DANAMON]}}
                                @if (empty($rdlDanamon))
                                     (Gunakan metode pembayaran RDL Danamon untuk kemudahan transkasi, daftar <a href="{{route('lender.rdlDanamon')}}">disini</a>)
                                @else
                                    <span id="rdl-balance"><b>(Balance : Rp {{ getPriceNumber($rdlDanamon->amount) }})</b></span>
                                @endif
                            </div>
                            <div class="col-md-12 text-left">
                                <input type="radio" name="methodPayment" value="{{$constant::INVOICE_PAYMENT_METHOD_PAYMENT_VA_BNI}}" id="method-payment-va"/>
                                {{$constant::INVOICE_PAYMENT_METHOD_PAYMENT_LABELS[$constant::INVOICE_PAYMENT_METHOD_PAYMENT_VA_BNI]}}
                            </div>
                            <div class="col-md-12 text-left">
                                <input type="radio" name="methodPayment" value="{{$constant::INVOICE_PAYMENT_METHOD_PAYMENT_MANUAL}}" id="method-payment-manual"/>
                                {{$constant::INVOICE_PAYMENT_METHOD_PAYMENT_LABELS[$constant::INVOICE_PAYMENT_METHOD_PAYMENT_MANUAL]}}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Batal
                        </button>
                        <button class="btn btn-primary btnSubmit" type="submit">
                            Lakukan Pendanaan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('jsCustom')
    <script>
        var successMessage = '{!! session('success') !!}';
        if (successMessage) {
            swal('Sukses',successMessage,'success');
        }

        // var detailUrl = '{!! route('admin.invoice',['id' => '']) !!}';

        function customColumns() {
            return {
                11: function (data, type, row, meta) {  
                    let html = data;
                    try {
                        new URL(data);
                        html = `
                            <a href="${data}" target="_blank">Lihat Gdrive</a>
                        `;
                    } catch (error) {
                
                    }
                    return html;
                },
                12: function (data, type, row, meta) { 
                    let html = data;
                    let url = '{!! route('productive.lender.factsheet',['invoiceNumber' => '']) !!}';
                    if (data != '-') {
                        html = `
                            <a href="${url}/${data}" target="_blank">Lihat Fact Sheet</a>
                        `;
                    }

                    return html;
                },
                13: function (data, type, row, meta) { 
                    let html = data;
                    let url = '{!! route('productive.lender.fundsimulation',['invoiceNumber' => '']) !!}';
                    if (data != '-') {
                        html = `
                            <a href="${url}/${data}" target="_blank">Lihat Simulasi Pembiayaan</a>
                        `;
                    }

                    return html;
                },
                14: function (data, type, row, meta) {
                    let status = `{{$status}}`;
                    let html = (status) => {
                        if (status == `{{$constant::INVOICE_STATUS_VERIFICATION}}`) {
                           return html = `<button class="btn btn-xs btn-success" type="button" data-toggle="modal" data-target="#modal-approval-verification" onClick="setApprovalVerificationStatus(${data}, '{{$constant::INVOICE_STATUS_VERIFICATION_APPROVAL_CEO}}', 'Setujui', 'Anda yakin setuju dengan pendanaan ini ?')">
                                        Setuju
                                    </button>
                                    <button class="btn btn-xs btn-danger" type="button" data-toggle="modal" data-target="#modal-approval-verification" onClick="setApprovalVerificationStatus(${data}, '{{$constant::INVOICE_STATUS_VERIFICATION_APPROVAL_STAFF}}', 'Tolak', 'Anda yakin menolak dengan pendanaan ini ?')">
                                        Tolak
                                    </button>`;
                        }else if(status == `{{$constant::INVOICE_STATUS_OFFERED}}`) {
                            return html = `<button class="btn btn-xs btn-success funds" type="button" data-toggle="modal" data-target="#modal-offered" data-ranges=${data}>
                                        Danai
                                    </button>`;
                        }
                    }
                    return html(status);
                }
            }
        }

        $(document).ready(function() {
            // var isVerifyHoldBalance = '{!! session('isVerifyHoldBalance') !!}';
    
            // if (isVerifyHoldBalance) {
            //     $('#modal-verify-hold-balance').modal('show');
            // }

            $('.custom-date-range').on('dp.change', function() {
                refreshDataTable();
            });

            $("table tbody").on("click", 'td button.funds', function () {
                let data        = $(this).data("ranges");
                let url         = `{{ route('lender.rdlDanamon.holdBalance') }}/${data['id']}`;
                let rdlBalance  = `{{ isset($rdlDanamon->amount) ? $rdlDanamon->amount : 0 }}`;
                let minVal      = data['minVal'];
                let maxVal      = data['maxVal'];
                let fundingData = fundingDetail(data['id']);
                
                // set value modal
                $('#min-val').text(minVal);
                $('#max-val').text(maxVal);
                $('#modal-offered form').attr("action", url);

                minVal = minVal.replace(/\./g, '');
                if (parseInt(rdlBalance) >= parseInt(minVal)) {
                    $("#rdl-balance").addClass("text-success");
                    $("#method-payment-rdl").prop('checked', true);
                } else {
                    $("#rdl-balance").addClass("text-danger");
                    $("#method-payment-va").prop('checked', true);
                    $("#method-payment-rdl").prop('disabled', true);
                }

                if (fundingData.data.invoice !== "" || fundingData.data.invoice !== null) {
                    $("#rest-payment").text(`Rp ${fundingData.data.invoice.restPayment}`);
                    // let restPercentage = fundingData.data.invoice.restPercentage.toFixed(2);
                    let restPercentage = fundingData.data.invoice.restPercentage;
                    if (restPercentage != 0) {
                        restPercentage = restPercentage.toFixed(2);
                    }
                    $("#fund-percentage").attr("aria-valuenow", restPercentage);
                    $("#fund-percentage").css("width", `${restPercentage}%`);
                    $("#rest-percentage-text").text(`( ${restPercentage} % )`);
                }
            });
        });

        function fundingDetail(id) {
            var fundingDetail = [];
            $.ajax({
                url: `{{ route('productive.lender.invoice.fundingdata') }}/${id}`,
                data: "",
                method: 'POST', 
                async: false,
                success: function(successData) {
                    if(successData.status == 'success') fundingDetail = successData.data;
                }
            });
            
            return fundingDetail;
        }

        function setApprovalVerificationStatus(id, statusApproval, titleModal, dialogModal) {
            let url  = `{{ route('productive.lender.invoice.save') }}/${id}` ;
            $('[name="approvalVerfication"]').val(statusApproval);
            $('.modal-title-approval').text(titleModal);
            $('#modal-dialog-approval').text(dialogModal);
            $('#modal-approval-verification form').attr("action", url);
        };

        function customFilter(filter) {
            filter.payor = $('[name=payor]').val();
            filter.risk = $('[name=risk]').val();
            filter.statusRepayment = $('[name=statusRepayment]').val();
            filter.statusPayment = $('[name=statusPayment]').val();
            filter.dateFrom = $('[name=dateFrom]').val();
            filter.dateTo = $('[name=dateTo]').val();
            filter.dueDateFrom = $('[name=dueDateFrom]').val();
            filter.dueDateTo = $('[name=dueDateTo]').val();
            filter.confirmDateFrom = $('[name=confirmDateFrom]').val();
            filter.confirmDateTo = $('[name=confirmDateTo]').val();
            return filter;
        }

        function refreshDataTable() {
            dataTableList[0].clear().draw();
        }
    </script>
@endsection