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

@section('headerCustom')
    @php
        $title = 'Daftar Restruktur 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.restructureInvoices', ['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.restructureInvoices', ['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';
                    } elseif ($status === $constant::INVOICE_STATUS_OFFERED) {
                        $aksi = 'rangeVal';
                    }
                @endphp
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(
                        route('productive.lender.restructureInvoicesData', ['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 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 {
                            return html = '-';
                        }
                    }
                    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'];

                // 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);
                }


            });
        });



        function setApprovalVerificationStatus(id, statusApproval, titleModal, dialogModal) {
            let url = `{{ route('productive.lender.restructureInvoice.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