@extends('layouts.authorized')
@section('title', 'Billing Transaksi')
@section('content')
    <div class="row">
        <div class="col-xs-12">
            <div class="card">
                <div class="card-header">
                    <span>Billing Transaksi</span>
                </div>
                <div class="card-body padding">
                    <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 for="">Tgl. Jatuh Tempo</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> --}}

                                <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('userAnchor.employer.billingData'))
                            <thead>
                                <tr>
                                    <th data-column-name="customerName" data-sortable="true"
                                        style="min-width: 180px !important;">Nama Pegawai</th>
                                    <th data-column-name="transactionNumber" data-sortable="true"
                                        style="min-width: 120px !important;">No Akad</th>
                                    <th data-column-name="employeeNumber" data-sortable="true"
                                        style="min-width: 180px !important;">NIK</th>
                                    <th data-column-name="vaNumber" data-sortable="true" style="min-width: 180px !important;">
                                        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="billingIndex" data-sortable="true">Cicilan Ke</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() {
            // $('.custom-date-range').on('dp.change', function() {
            //     refreshDataTable();
            // });

            $('.customdatepickerinput').datetimepicker({
                viewMode: 'years',
                format: 'MMM YYYY'
            });

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

        // function customStyle() {
        //     return (row, data, dataIndex) => {
        //         var GivenDate = data[4].substring(0, 10);
        //         var CurrentDate = '2023-01-03';
        //         const DataDate = new Date(GivenDate);
        //         const ToDate = new Date(CurrentDate);
        //         if (DataDate < ToDate) {
        //             $(row).addClass("bg-info");
        //         } else if (DataDate == ToDate) {
        //             $(row).addClass("bg-warning");
        //         } else if (DataDate > ToDate) {
        //             $(row).addClass("bg-danger");
        //         }
        //     }
        // }

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

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