@extends('cms.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;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-xs-12">
            <ul id="listOrderStatus" class="nav nav-tabs">
                <li @if($status == 'ALL') class="active" @endif>
                    <a href="{{ route('admin.invoices') }}">
                        Semua
                    </a>
                </li>
                @foreach($constant::INVOICE_STATUS_VERIFICATION_APPROVAL_LABELS as $key => $label)
                    @continue($key === $constant::INVOICE_STATUS_VERIFICATION_APPROVAL_COMMITTEE_CEO)
                    @if ($key === $constant::INVOICE_STATUS_VERIFICATION_APPROVAL_COMMITTEE_CMO)
                            <li @if($roleApprovalVerification === 'COMMITTEE') class="active" @endif>
                                <a href="{{ route('admin.invoices', ['status' => 'VERIFICATION', 'role' => 'COMMITTEE']) }}">
                                    Persetujuan Komite
                                </a>
                            </li>
                        @else
                            <li @if($roleApprovalVerification === $key) class="active" @endif>
                                <a href="{{ route('admin.invoices', ['status' => 'VERIFICATION', 'role' => $key]) }}">
                                    {{ $label }}
                                </a>
                            </li>
                        @endif
                @endforeach
                @foreach($constant::INVOICE_STATUS_LABELS_CMS as $key => $label)
                    @continue($key === $constant::INVOICE_STATUS_VERIFICATION || $key === $constant::INVOICE_STATUS_APPROVED)
                    <li @if($status === $key) class="active" @endif>
                        <a href="{{ route('admin.invoices', ['status' => $key]) }}">
                            {{ $label }}
                        </a>
                    </li>
                @endforeach
            </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">
                            <select name="payor" class="form-control" style="width: 100%" onchange="refreshDataTable()">
                                <option value="">Semua Payor</option>
                                @foreach($payors as $payor)
                                    <option value="{{ $payor->payorName }}">{{ $payor->payorName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <select name="risk" class="form-control" style="width: 100%" onchange="refreshDataTable()">
                                <option value="">Semua Risiko</option>
                                @foreach(GetRiskRatings() as $value)
                                    <option value="{{ $value }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <select name="statusPayment" class="form-control" style="width: 100%" onchange="refreshDataTable()">
                                <option value="">Semua Status Payment</option>
                                @foreach($constant::INVOICE_PAYMENT_STATUS_LABLES as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <select name="statusRepayment" class="form-control" style="width: 100%" onchange="refreshDataTable()">
                                <option value="">Semua Status Repayment</option>
                                @foreach($constant::INVOICE_REPAYMENT_STATUS_LABLES as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </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>
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(route('admin.invoicesData', ['status' => $status, 'role' => $roleApprovalVerification]))
                    <thead>
                    <tr>
                        <th data-column-name="invoiceNumber">No.</th>
                        <th data-column-name="loanType">Tipe Pinjaman</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="relationshipManager">Relationship Manager</th>
                        <th data-column-name="invoiceValue">Nilai Invoice</th>
                        <th data-column-name="submissionValue">Nilai Pengajuan</th>
                        <th data-column-name="fundingValue">Nilai Pembiayaan</th>
                        <th data-column-name="usageValue">Nilai Pemakaian</th>
                        <th data-column-name="outstandingValue">Nilai Outstanding</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="rating">Grade</th>
                        <th data-column-name="status">Status Pembiayaan</th>
                        <th data-column-name="statusPayment">Status Payment</th>
                        <th data-column-name="statusRepayment">Status Repayment</th>
                        <th data-column-name="repaymentDate">Tgl. Repayment</th>
                        <th data-column-name="id" data-sortable="false">Aksi</th>
                        @if ($status == $constant::INVOICE_STATUS_ACTIVE)
                            <th data-column-name="outstandingDay">Hari Berjalan</th>
                            <th data-column-name="dailyMarginAmounts">Total Ujroh Harian</th>
                            <th data-column-name="loanTotal">Total Pengembalian</th>
                            <th data-column-name="simulationData">Simulasi Percepatan</th>
                        @endif
                    </tr>
                    </thead>
                    @endtableajax
                </div>
            </div>
        </div>
    </div>

    <div id="modal-hitung-simulasi" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-hitung-simulasi-title" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content simulasi-percepatan">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title text-primary" id="modal-hitung-simulasi-title"><b>Simulasi Percepatan</b></h5>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <input type="hidden" name="simulasi-data">
                        <div class="col-md-4">
                            <b><p>Nilai pokok pembiayaan</p></b>
                        </div>
                        <div class="col-md-8">
                            <p>Rp. <span id="fund-val">0</span></p>
                        </div>
                        <div class="col-md-4">
                            <b><p>Total ujroh harian</p></b>
                        </div>
                        <div class="col-md-8">
                            <p>Rp. <span id="feeday-val">0</span></p>
                        </div>
                        <div class="col-md-4">
                            <b><p>Tanggal pinjaman berjalan</p></b>
                        </div>
                        <div class="col-md-8">
                            <p><span id="invoice-activeAt">-</span></p>
                        </div>
                        <div class="col-md-4">
                            <b><p>Tanggal dipercepat</p></b>
                        </div>
                        <div class="col-md-8">
                            <div class="input-group date datepickerinput expedited-date-head">
                                <input name="percepatDate" type="text" class="datepickerinput expedited-date form-control" data-date-format="YYYY-MM-DD">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                            <small id="warning-text" class="text text-sm text-danger"></small>
                            <p class="mb-0"><b><span id="accelerated-day">0</span> Hari dipercepat</b></p>
                        </div>
                        <div class="col-md-4">
                            <b><p>Hasil simulasi</p></b>
                        </div>
                        <div class="col-md-8 mt-2">
                            <b><p>Rp. <span id="simulation-val">0</span></p><b>
                        </div>
                        <div class="col-12 mt-3 text-right">
                            <a id="download-simulasi" class="btn btn-danger">Download PDF <i class="fa fa-file-pdf-o" aria-hidden="true"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('jsCustom')
    <script>
        var detailUrl = '{!! route('admin.invoice',['id' => '']) !!}';

        function customStyle() {  
            return (row, data, dataIndex) => { 
                if (parseInt(data[9].replaceAll('.', '')) >= 2000000000) {
                    $(row).addClass("bg-danger");
                }
            }
        }

        function customColumns() {
            return {
                20: function (data, type, row, meta) {
                    var html = '';
                    html += '<a href="' + detailUrl + '/' + data + '">';
                    html += '    <button type="button" class="btn btn-default btn-xs"> Detail</button>';
                    html += '</a>&nbsp;';
                    @if($status == $constant::INVOICE_STATUS_REJECTED)
                        html += '<button type="button" class="btn btn-default btn-xs delete-button-modal" data-toggle="modal" data-target="#modal-delete-alert" data-url="{{ route('admin.invoice.delete', ['id' => '']) }}' + '/' + data + '"> Hapus</button>';
                    @endif
                        return html;
                },
                24: function (data, type, row, meta) {
                    var html = '';
                    html += "<button class='btn btn-sm btn-primary simulation' type='button' data-toggle='modal' data-target='#modal-hitung-simulasi' data-simulasi='"+ data +"'>";
                    html += "Hitung Simulasi";
                    html += "</button>";

                    return html;
                }
            }
        }

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

            $("table tbody").on("click", 'td button.simulation', function () { 
                var data = $(this).data("simulasi");
                var fundingValue = parseInt(data['fundingVal'].replaceAll('.', ''));
                // set value modal
                $('[name=simulasi-data]').val(JSON.stringify(data));
                $('#fund-val').text(data['fundingVal']);
                $('#invoice-activeAt').text(data['activeAtFormatted']);
                $("#download-simulasi").addClass("disabled");
            });

            $("#modal-hitung-simulasi").on("hide.bs.modal", function () {  
                $('.expedited-date').data("DateTimePicker").clear();
                $('#fund-val').text(0);
                $('#invoice-activeAt').text('-');
                $('#accelerated-day').text(0);
                $('#feeday-val').text(0);
                $('#simulation-val').text(0);
                $("#warning-text").text("");
                $("#download-simulasi").removeAttr("href");
            });

            $('.expedited-date-head').on('dp.change', function() {
                var data = JSON.parse($('[name=simulasi-data]').val());
                
                var expeditedDate = new Date($('.expedited-date').val());
                var dueDate = new Date(data['dueDate']);
                var invoiceActiveAt = new Date(data['activeAt']);
                var dailyMarginRate = parseFloat(data['dailyMargin']);
                var fundingValue = parseInt(data['fundingVal'].replaceAll('.', ''));

                if ((expeditedDate >= invoiceActiveAt) && (expeditedDate <= dueDate)) {
                    var url = "{{ route('admin.invoice.percepatanPelunasan', ['id' => '', 'dates' => '']) }}/"+ data['id'] + "/" + $('.expedited-date').val();
                    var dateDiff = expeditedDate.getTime() - invoiceActiveAt.getTime();
                    dateDiff = dateDiff / (1000 * 3600 * 24);
                    var printDateDiff = dateDiff; 
                    if (dateDiff == 0){
                        dateDiff = 1;  
                    }  
                    var dailyMarginAmount = dailyMarginRate * dateDiff * fundingValue;
                    $('#accelerated-day').text(printDateDiff);
                    $('#feeday-val').text(format(dailyMarginAmount));
                    $('#simulation-val').text(format(dailyMarginAmount + fundingValue));
                    $("#warning-text").text("");
                    $("#download-simulasi").removeClass("disabled");
                    $("#download-simulasi").attr("href", url);
                } else if(expeditedDate < invoiceActiveAt) {
                    $("#warning-text").text("Tanggal percepatan kurang dari tanggal berjalan invoice !");
                    $('#accelerated-day').text(0);
                    $('#feeday-val').text(0);
                    $('#simulation-val').text(0);
                    $("#download-simulasi").addClass("disabled");
                    $("#download-simulasi").removeAttr("href");
                } else if(expeditedDate > dueDate) {
                    $("#warning-text").text("Tanggal percepatan lebih dari tanggal jatuh tempo invoice !");
                    $('#accelerated-day').text(0);
                    $('#feeday-val').text(0);
                    $('#simulation-val').text(0);
                    $("#download-simulasi").addClass("disabled");
                    $("#download-simulasi").removeAttr("href");
                }

            });
        });

        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