@extends('layouts.authorized')
@section('title', 'Cicilan Jatuh Tempo')
@section('content')
    <div class="row">
        <div class="col-xs-12">
            <div class="card">
                <div class="card-header">
                    <span>Cicilan Jatuh Tempo</span>
                </div>
                <div class="card-body padding">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-3">
                                <input name="dateFilter" type="text" class="customdatepickerinput form-control"
                                       value="{{  Carbon::now()->format('M Y') }}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                    </div>
                    @tableconfig
                    <div class="card-body no-padding table-responsive">
                        @tableajax(route('admin.report.duePaymentData'))
                        <thead>
                        <tr>
                            <th data-column-name="merchantName" data-sortable="true">Nama Merchant</th>
                            <th data-column-name="investorName" data-sortable="true">Nama Investor</th>
                            <th data-column-name="customerName" data-sortable="true">Nama Pegawai</th>
                            <th data-column-name="companyName" data-sortable="true">Perusahaan Pemberi Kerja</th>
                            <th data-column-name="transactionNumber" data-sortable="true">No Akad</th>
			    <th data-column-name="employeeNumber" data-sortable="true">NIK</th>
                            <th data-column-name="vaNumber" data-sortable="true">Virtual Account</th>
                            <th data-column-name="grandTotal" data-sortable="true">Total Pembiayaan</th>
                            <th data-column-name="subtotal" data-sortable="true">Total Pokok Pembiayaan</th>
                            <th data-column-name="subtotalMargin" data-sortable="true">Total Margin/Ujroh</th>
                            <th data-column-name="period" data-sortable="true">Tenor Bulan</th>
                            <th data-column-name="installmentAmount" data-sortable="true">Cicilan Per Bulan</th>
                            <th data-column-name="unpaidInstallmentAmount" data-sortable="true">Cicilan Berjalan</th>
                            <th data-column-name="unpaidInstallmentBaseAmount" data-sortable="true">Pokok Berjalan</th>
                            <th data-column-name="unpaidInstallmentMarginAmount" data-sortable="true">Margin/Ujroh Berjalan</th>
                            <th data-column-name="paidInstallmentAmount" data-sortable="true">Cicilan Dibayar</th>
                            <th data-column-name="paidInstallmentBaseAmount" data-sortable="true">Pokok Dibayar</th>
                            <th data-column-name="paidInstallmentMarginAmount" data-sortable="true">Margin/Ujroh Dibayar</th>
                            <th data-column-name="installmentStartDate" data-sortable="true">Cicilan Dimulai Tgl</th>
                            <th data-column-name="installmentEndDate" data-sortable="true">Cicilan Berakhir Tgl</th>
                            <th data-column-name="dueInstallmentDate" data-sortable="true">Jatuh Tempo Tgl</th>
                            <th data-column-name="lateDuration" data-sortable="true">Hari Keterlambatan</th>
                            <th data-column-name="dueInstallmentAmount" data-sortable="true">Cicilan Jatuh Tempo</th>
                            <th data-column-name="dueInstallmentBaseAmount" data-sortable="true">Pokok Jatuh Tempo</th>
                            <th data-column-name="dueInstallmentMarginAmount" data-sortable="true">Margin/Ujroh Jatuh Tempo</th>
                        </tr>
                        </thead>
                        @endtableajax
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('jsCustom')
    <script>
        $(document).ready(function () {
            $('.customdatepickerinput').datetimepicker({
                viewMode: 'years',
                format: 'MMM YYYY'
            });

            $('.customdatepickerinput').on('dp.change', function () {
                refreshDataTable();
            });
        });

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

        function refreshDataTable() {
            $(dataTableList).each(function (index, data) {
                dataTableList[index].clear().draw();
            });
        }
    </script>
@endsection