@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">
                @foreach($constant::INVOICE_STATUS_VERIFICATION_APPROVAL_LABELS as $key => $label)
                    @continue(in_array($key, $constant::INVOICE_DUHA_APPROVAL_STATUS_LIST))
                    <li @if($roleApprovalVerification === $key) class="active" @endif>
                        <a href="{{ route('userAnchor.scf.invoices', ['status' => 'VERIFICATION', 'role' => $key]) }}">
                            {{ $label }}
                        </a>
                    </li>
                @endforeach
                <li @if($roleApprovalVerification == 'DUHA') class="active" @endif>
                    <a href="{{ route('userAnchor.scf.invoices', ['status' => 'VERIFICATION', 'role' => 'DUHA']) }}">
                        Persetujuan Duha
                    </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">
                            <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>
                </div>
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(route('userAnchor.scf.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="emailDueDate">Tgl. Jatuh Tempo</th>
                        <th data-column-name="businessName">Borrower</th>
                        <th data-column-name="invoiceValue">Nilai Invoice</th>
                        <th data-column-name="fundingValue">Nilai Pembiayaan</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="repaymentDate">Tgl. Repayment</th>
                        <th data-column-name="ids" data-sortable="false">Aksi</th>
                    </tr>
                    </thead>
                    @endtableajax
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

        function customColumns() {
            return {
                11: function (data, type, row, meta) {
                    let datas = JSON.parse(data);
                    console.log(datas);
                    var html = '';
                    if (datas.status && datas.approvalStatus) {
                        html += '<a href="' + detailUrl + '/' + datas.id + '">';
                        html += '    <button type="button" class="btn btn-default btn-xs"> Detail</button>';
                        html += '</a>&nbsp;';
                    }
                    return html;
                }
            }
        }

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

        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();
            return filter;
        }

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