@extends('layouts.authorized')
@inject('constant', '\App\Util\Constant')
@section('headerCustom')
    @php
        $id = 0;
        if (!empty($model->getKey())) {
            $id = $model->getKey();
        }
        $formUrl = $model->getUrlDetails(['id' => $id]);
        $cancelUrl = $model->getUrlIndex();
        $language = '';
        $title = 'Profil Pemberi Pembiayaan';
        $urlPrefix = strtolower(str_replace('/', '', Request::route()->getPrefix()));
    @endphp
@endsection

@section('content')

    @include('cms.form.errorbox')

    @if (Session::has('email-validation'))
        <div class="row" id="alert-box">
            <div class="col-md-6 col-md-offset-3">
                <div class="alert alert-danger alert-dismissible fade in" role="alert" id="alert-box-details">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <strong>Warning!</strong> {{ Session::get('email-validation') }} <br>
                </div>
            </div>
        </div>
    @endif

    <div class="col-md-12">
        @if (!empty($id))
            <div class="col-md-12">
                <ul class="nav nav-tabs fs-15">
                    <li class="active"><a data-toggle="tab" href="#detail-investor">Detail Pemberi Pembiayaan</a></li>
                    <li><a data-toggle="tab" href="#dana-disalurkan">Dana yang Disalurkan</a></li>
                    <li><a data-toggle="tab" href="#pengembalian-dana">Pengembalian Dana</a></li>
                    @if (\Auth::isAdmin())
                        <li><a data-toggle="tab" href="#pembayaran-marketplace">Pembayaran ke Marketplace</a></li>
                    @endif
                    <li><a data-toggle="tab" href="#pengembalian-terlambat">Pengembalian Terlambat</a></li>
                    <li><a data-toggle="tab" href="#rekap-pembayaran">Rekap Pembayaran</a></li>
                </ul>
            </div>

            <div class="col-md-12">&nbsp;</div>
        @endif

        <div class="tab-content">
            <div id="detail-investor" class="tab-pane fade in active">
                <form id="form" action="{{ $formUrl }}" class="create-project form-horizontal" method="POST"
                    enctype="multipart/form-data">

                    @foreach ($model::MASKED_FIELD as $maskedField)
                        <input type="hidden" name="masked_{{ $maskedField }}"
                            value="{{ maskString($model->$maskedField, 6) }}">
                    @endforeach

                    <div class="col-md-12">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">Info General</div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="row">
                                                @if (!empty($id))
                                                    <div class="col-md-12">
                                                        <div class="col-md-3">
                                                            <label class="control-label">Kode</label>
                                                        </div>
                                                        <div class="col-md-9">
                                                            <input name="code" class="form-control"
                                                                value="{{ $model->code }}" label="Kode" type="text"
                                                                {{ $model->isDisabled('code') }}
                                                                {{ $model->isRequired('code') }} />
                                                        </div>
                                                    </div>
                                                @endif
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Nama</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input name="name" class="form-control"
                                                            value="{{ $model->name }}" label="Nama" type="text"
                                                            {{ $model->isRequired('name') }} />
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Tipe</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <select name="type" class="form-control"
                                                            {{ $model->isDisabled('type') }}
                                                            {{ $model->isRequired('type') }}>
                                                            @foreach ($constant::INVESTOR_TYPE_LABELS as $key => $label)
                                                                <option @if ($model->type === $key) selected @endif
                                                                    value="{{ $key }}">{{ $label }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Perusahaan</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <select select2ajax name="lenderCompanyId"
                                                            url="{{ URL::route('admin.lendercompany.ajaxAutoComplete', ['appendCustomOption' => [0, '']]) }}"
                                                            data-select2click="populateCompanyData" class="form-control">
                                                            <option
                                                                value="{{ empty($model->company->id) ? 0 : $model->company->id }}">
                                                                {{ empty($model->company->name) ? '' : $model->company->name }}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">No. Telp.</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        {!! generateMaskedInputHtml(
                                                            maskString($model->picContact, 6),
                                                            $model->id,
                                                            'picContact',
                                                            'unmask-picContact-input-btn',
                                                            ['required' => 'required']
                                                        ) !!}
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Email</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input name="email" class="form-control"
                                                            value="{{ $model->email }}" label="Email" type="text"
                                                            {{ $model->isRequired('email') }} />
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Jenis Kelamin</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <select name="gender" class="form-control"
                                                            {{ $model->isDisabled('gender') }}
                                                            {{ $model->isRequired('gender') }}>
                                                            <option value=""></option>
                                                            @foreach ($constant::INVESTOR_GENDER_LABELS as $key => $label)
                                                                <option @if ($model->gender === $key) selected @endif
                                                                    value="{{ $key }}">{{ $label }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Tanggal Lahir</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <div class="input-group date datepickerinput">
                                                            <input name="birthdayDate" type="text"
                                                                class="form-control" value="{{ $model->birthdayDate }}"
                                                                {{ $model->isRequired('birthdayDate') }}>
                                                            <span class="input-group-addon"><span
                                                                    class="glyphicon glyphicon-calendar"></span></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Alamat</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input name="address" class="form-control"
                                                            value="{{ $model->address }}" label="Alamat" type="text"
                                                            {{ $model->isRequired('address') }} />
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Provinsi</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <select name="provinceId" id="provinceId" class="form-control"
                                                            label="Provinsi" {{ $model->isDisabled('provinceId') }}
                                                            {{ $model->isRequired('provinceId') }}>
                                                            <option value=""></option>
                                                            @foreach ($provinceList as $key => $label)
                                                                <option @if ($model->provinceId === $label->id) selected @endif
                                                                    value="{{ $label->id }}">{{ $label->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Kota</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <select name="cityId" id="cityId" class="form-control"
                                                            label="Kota" {{ $model->isDisabled('cityId') }}
                                                            {{ $model->isRequired('cityId') }}>
                                                            <option value=""></option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Nomor Akta Pendirian</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input class="form-control" name="establishmentDeedNumber"
                                                            value="{{ $model->establishmentDeedNumber }}" type="text"
                                                            {{ $model->isDisabled('establishmentDeedNumber') }}
                                                            {{ $model->isRequired('establishmentDeedNumber') }} />
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Margin/Ujroh Per Tahun
                                                            (Flat)</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input class="form-control autonumericDecimal" name="marginRate"
                                                            value="{{ $model->marginRate }}" label="Margin"
                                                            type="text" {{ $model->isRequired('marginRate') }}
                                                            @if (!\Auth::isAdmin()) {{ $model->isDisabled('marginRate') }} @endif />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if (!empty($id))
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">Info Bank Penyaluran Pembiayaan</div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-3">
                                                            <label class="control-label">No. Virtual Account</label>
                                                        </div>
                                                        <div class="col-md-9">
                                                            <input name="bankVaNumber" class="form-control"
                                                                value="{{ $model->bankVaNumber }}" label="No. VA"
                                                                type="text" {{ $model->isRequired('bankVaNumber') }}
                                                                {{ $model->isDisabled('bankVaNumber') }} />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="col-md-3">
                                                            <label class="control-label">Bank</label>
                                                        </div>
                                                        <div class="col-md-9">
                                                            <input name="bankName" class="form-control"
                                                                value="{{ $model->bankName }}" label="Bank"
                                                                type="text" {{ $model->isRequired('bankName') }}
                                                                {{ $model->isDisabled('bankName') }} />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="col-md-3">
                                                            <label class="control-label">Update Terakhir</label>
                                                        </div>
                                                        <div class="col-md-9">
                                                            <input name="updatedAt" class="form-control"
                                                                value="{{ parseDateToIndonesian(\Carbon::parse($model->updatedAt)->format('l, d M Y H:i:s')) }}"
                                                                label="Saldo" type="text" disabled />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="col-md-12">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">Info Bank Pengembalian Dana Cicilan</div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">No. Rekening</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input name="repaymentBankAccountNumber" class="form-control"
                                                            value="{{ $model->repaymentBankAccountNumber }}"
                                                            label="No. Rekening" type="text"
                                                            {{ $model->isRequired('repaymentBankAccountNumber') }}
                                                            {{ $model->isDisabled('repaymentBankAccountNumber') }} />
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Bank</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input name="repaymentBankName" class="form-control"
                                                            value="{{ $model->repaymentBankName }}" label="Bank"
                                                            type="text" {{ $model->isRequired('repaymentBankName') }}
                                                            {{ $model->isDisabled('repaymentBankName') }} />
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Atas Nama</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input name="repaymentBankAccountOwner" class="form-control"
                                                            value="{{ $model->repaymentBankAccountOwner }}"
                                                            label="Atas Nama" type="text"
                                                            {{ $model->isRequired('repaymentBankAccountOwner') }}
                                                            {{ $model->isDisabled('repaymentBankAccountOwner') }} />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">Info PIC</div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Nama PIC</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input type="text" id="picName" class="form-control"
                                                            name="picName" label="Nama PIC"
                                                            value="{{ $model->picName }}"
                                                            {{ $model->isDisabled('picName') }}
                                                            {{ $model->isRequired('picName') }}>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Posisi PIC</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input type="text" id="picPosition" class="form-control"
                                                            name="picPosition" label="Posisi PIC"
                                                            value="{{ $model->picPosition }}"
                                                            {{ $model->isDisabled('picPosition') }}
                                                            {{ $model->isRequired('picPosition') }}>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">No. KTP </label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input type="text" id="picIdCardNumber" class="form-control"
                                                            name="picIdCardNumber" label="No. KTP"
                                                            value="{{ $model->picIdCardNumber }}"
                                                            {{ $model->isDisabled('picIdCardNumber') }}
                                                            {{ $model->isRequired('picIdCardNumber') }}>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">Info Akun</div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Email</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input type="email" id="email" class="form-control"
                                                            name="accountEmail" label="Email"
                                                            value="{{ $id == 0 ? '' : @$model->investorPicDetail->email }}"
                                                            {{ $model->isDisabled('accountEmail') }}
                                                            {{ $model->isRequired('accountEmail') }}>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Kata Kunci</label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <input type="password" class="form-control"
                                                            name="accountPassword" label="Password"
                                                            placeholder="*******">
                                                    </div>
                                                </div>
                                                @if ($id === 0)
                                                    <div class="col-md-12">
                                                        <div class="col-md-3">
                                                            <label class="control-label">Konfirmasi Kata Kunci</label>
                                                        </div>
                                                        <div class="col-md-9">
                                                            <input type="password" class="form-control"
                                                                name="confirmaccountPassword" label="Konfirmasi Password"
                                                                {{ $model->isDisabled('accountPassword') }}
                                                                {{ $model->isRequired('accountPassword') }}
                                                                placeholder="*******">
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="col-md-3">&nbsp;</div>
                                                    <div class="col-md-9">
                                                        <a href="{{ route('admin.investors') }}"
                                                            class="btn btn-default">Kembali</a>
                                                        @if (checkPermission(\App\Util\AclConstant::COMPANY_CREATE) || checkPermission(\App\Util\AclConstant::COMPANY_UPDATE))
                                                            <button class="btn btn-primary submitButton">
                                                                Simpan
                                                            </button>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            @if (!empty($id))
                <div id="dana-disalurkan" class="tab-pane fade in">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">Dana Disalurkan</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        @tableconfig
                                        <div class="card-body no-padding table-responsive">
                                            @tableajax(
                                                route($urlPrefix . '.investor.balanceMutationsData', [
                                                    'id' => $id,
                                                    'mutationDirection' => $constant::MUTATION_TYPE_INCOME
                                                ])
                                            )
                                                <thead>
                                                    <tr>
                                                        <th class="col-md-2" data-column-name="recordedAt"
                                                            data-sortable="false">Tgl.
                                                        </th>
                                                        <th class="col-md-2" data-column-name="balanceOld"
                                                            data-sortable="false">Saldo Awal
                                                        </th>
                                                        <th class="col-md-2" data-column-name="mutationAmount"
                                                            data-sortable="false">Nilai Mutasi
                                                        </th>
                                                        <th class="col-md-2" data-column-name="balanceNew"
                                                            data-sortable="false">Saldo Akhir
                                                        </th>
                                                        <th class="col-md-2" data-column-name="remark" data-sortable="false">
                                                            Ket.
                                                        </th>
                                                        <th class="col-md-2" data-column-name="file" data-sortable="false">
                                                            File
                                                        </th>
                                                    </tr>
                                                </thead>
                                            @endtableajax
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="pengembalian-dana" class="tab-pane fade in">
                    <div class="col-md-3">
                        <a class="card card-banner card-primary-light">
                            <div class="card-body">
                                <div class="content">
                                    <div class="title">Total Angsuran Pokok yang Diterima</div>
                                    <div class="value"><span class="sign"></span><span
                                            id="snapshotOrderGrandTotal"></span></div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a class="card card-banner card-primary-light">
                            <div class="card-body">
                                <div class="content">
                                    <div class="title">Total Margin/Ujroh yang Diterima</div>
                                    <div class="value"><span class="sign"></span><span
                                            id="snapshotInvestorMarginAmount"></span></div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">Pengembalian Dana</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        @tableconfig
                                        <div class="card-body no-padding table-responsive">
                                            @tableajax(route($urlPrefix . '.investor.repaymentsData', ['id' => $id]))
                                                <thead>
                                                    <tr>
                                                        <th data-column-name="transactionNumber" data-sortable="false">No.
                                                            Transaksi
                                                        </th>
                                                        <th data-column-name="repaymentDate" data-sortable="false">Tgl.</th>
                                                        <th data-column-name="orderGrandTotal" data-sortable="false">Angsuran
                                                            Pokok
                                                        </th>
                                                        <th data-column-name="investorMarginAmount" data-sortable="false">
                                                            Margin
                                                            / Ujroh (Net)
                                                        </th>
                                                        <th data-column-name="remark" data-sortable="false">Ket.</th>
                                                        <th data-column-name="status" data-sortable="false">Status
                                                            Pengembalian
                                                        </th>
                                                        <th data-column-name="attachment" data-sortable="false">Attachment
                                                        </th>
                                                        @if (\Auth::isAdmin())
                                                            <th data-column-name="id" data-sortable="false">Action</th>
                                                        @endif
                                                    </tr>
                                                </thead>
                                            @endtableajax
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if (\Auth::isAdmin())
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">Buat Pengembalian</div>
                                <div class="card-body">
                                    <form action="{{ route('admin.investor.createRepayment', ['id' => $id]) }}"
                                        class="create-project form-horizontal" method="POST"
                                        enctype="multipart/form-data">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="col-md-3">
                                                    Tanggal Pengembalian
                                                </div>
                                                <div class="col-md-2">
                                                    <input name="repaymentDate" type="text"
                                                        class="datepickerinput form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="col-md-3">
                                                    Angsuran Pokok
                                                </div>
                                                <div class="col-md-2">
                                                    <input type="text" class="form-control autonumeric" required>
                                                    <input type="hidden" class="autonumericvalue"
                                                        name="orderGrandTotal">
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="col-md-3">
                                                    Margin / Ujroh (Net)
                                                </div>
                                                <div class="col-md-2">
                                                    <input type="text" class="form-control autonumeric" required>
                                                    <input type="hidden" class="autonumericvalue"
                                                        name="investorMarginAmount">
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="col-md-3">
                                                    Keterangan
                                                </div>
                                                <div class="col-md-9">
                                                    <textarea name="remark" class="form-control"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="col-md-3">
                                                    File
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="image-selector-wrapper">
                                                        @if (empty($model->file))
                                                            <input type="file" class="hidden btn-upload-file"
                                                                id="{{ $model->file }}" name="attachment" required
                                                                accept=".jpg,.jpeg,.png" {!! $model->getImageLimit('file') !!} />
                                                        @endif
                                                        <button class="btn-upload thumbnail" type="button">
                                                            <img />
                                                            <div>
                                                                <i class="fa fa-upload"></i>
                                                                Upload
                                                            </div>
                                                        </button>
                                                        <i style="display: none"
                                                            class="fa fa-trash-o image-delete-icon"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="col-md-3">

                                                </div>
                                                <div class="col-md-9">
                                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <div id="pembayaran-marketplace" class="tab-pane fade in">
                    @if (\Auth::isAdmin())
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    Pembayaran ke Marketplace
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            @tableconfig
                                            <div class="card-body no-padding table-responsive">
                                                @tableajax(
                                                    route($urlPrefix . '.investor.balanceMutationsData', [
                                                        'id' => $id,
                                                        'mutationDirection' => $constant::MUTATION_TYPE_EXPENSE
                                                    ])
                                                )
                                                    <thead>
                                                        <tr>
                                                            <th class="col-md-2" data-column-name="recordedAt"
                                                                data-sortable="false">Tgl.
                                                            </th>
                                                            <th class="col-md-2" data-column-name="balanceOld"
                                                                data-sortable="false">Saldo Awal
                                                            </th>
                                                            <th class="col-md-2" data-column-name="mutationAmount"
                                                                data-sortable="false">Nilai Mutasi
                                                            </th>
                                                            <th class="col-md-2" data-column-name="balanceNew"
                                                                data-sortable="false">Saldo Akhir
                                                            </th>
                                                            <th class="col-md-2" data-column-name="remark"
                                                                data-sortable="false">Ket.
                                                            </th>
                                                            <th class="col-md-2" data-column-name="file"
                                                                data-sortable="false">
                                                                File
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                @endtableajax
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if (\Auth::isAdmin())
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">Buat Pembayaran</div>
                                <div class="card-body">
                                    <form action="{{ route($urlPrefix . '.investor.createMutation', ['id' => $id]) }}"
                                        class="create-project form-horizontal" method="POST"
                                        enctype="multipart/form-data">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="col-md-3">
                                                    Nominal
                                                </div>
                                                <div class="col-md-2">
                                                    <input type="text" class="form-control autonumeric" required>
                                                    <input type="hidden" class="autonumericvalue" name="mutationAmount">
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="col-md-3">
                                                    Keterangan
                                                </div>
                                                <div class="col-md-9">
                                                    <textarea name="remark" class="form-control"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="col-md-3">
                                                    File
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="image-selector-wrapper">
                                                        @if (empty($model->file))
                                                            <input type="file" class="hidden btn-upload-file"
                                                                id="{{ $model->file }}" name="file" required
                                                                accept=".jpg,.jpeg,.png" {!! $model->getImageLimit('file') !!} />
                                                        @endif
                                                        <button class="btn-upload thumbnail" type="button">
                                                            <img />
                                                            <div>
                                                                <i class="fa fa-upload"></i>
                                                                Upload
                                                            </div>
                                                        </button>
                                                        <i style="display: none"
                                                            class="fa fa-trash-o image-delete-icon"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="col-md-3">

                                                </div>
                                                <div class="col-md-9">
                                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <div id="pengembalian-terlambat" class="tab-pane fade in">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">Pengembalian Terlambat</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        @tableconfig
                                        <div class="card-body no-padding table-responsive">
                                            @tableajax(route($urlPrefix . '.transactionsData', ['overdueBillingOnly' => $constant::YES]))
                                                <thead>
                                                    <tr>
                                                        <th class="col-md-2" data-column-name="transactionNumber">No.
                                                            Transaksi
                                                        </th>
                                                        <th class="col-md-2" data-column-name="orderDate">Tgl. Transaksi</th>
                                                        <th class="col-md-2" data-column-name="totalOverdueBillingCount">Jml.
                                                            Cicilan Terlambat
                                                        </th>
                                                        <th class="col-md-2" data-column-name="totalOverdueBillingAmount">
                                                            Total
                                                            Cicilan Terlambat
                                                        </th>
                                                    </tr>
                                                </thead>
                                            @endtableajax
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="rekap-pembayaran" class="tab-pane fade in">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">Rekap Pembayaran</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <table class="table table-striped table-bordered">
                                            <tr>
                                                <th class="col-md-4">Keterangan</th>
                                                <th class="col-md-8">Jumlah (Rp.)</th>
                                            </tr>
                                            <tr>
                                                <th class="col-md-4">Total Dana Disalurkan</th>
                                                <td class="col-md-8">{{ getPriceNumber($paymentRecap->fundingAmount) }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="col-md-4">Total Pengembalian Pokok Diterima</th>
                                                <td class="col-md-8">{{ getPriceNumber($paymentRecap->repaymentAmount) }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="col-md-4">Total Margin / Ujroh Diterima (Net)</th>
                                                <td class="col-md-8">{{ getPriceNumber($paymentRecap->profitAmount) }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="col-md-4">Pengembalian Terlambat</th>
                                                <td class="col-md-8">
                                                    {{ getPriceNumber($paymentRecap->latePaymentAmount) }}</td>
                                            </tr>
                                            <tr>
                                                <th class="col-md-4">Pengembalian Terdekat</th>
                                                <td class="col-md-8">
                                                    {{ getPriceNumber($paymentRecap->nearestDuePaymentAmount) }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('modal')
    <div id="modal-upload-repayment-attachment" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <form action="{{ route($urlPrefix . '.investor.uploadRepaymentAttachment', ['id' => $id]) }}" method="post"
                enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header p-15">

                    </div>
                    <div class="modal-body p-15 text-center">
                        <input type="hidden" name="id" value="">
                        <div class="row">
                            <div class="col-md-3">
                                Attachment
                            </div>
                            <div class="col-md-9">
                                <div class="image-selector-wrapper">
                                    <input type="file" id="attachment" name="attachment" label="Foto e-KTP"
                                        accept=".jpg,.jpeg,.png" class="hidden btn-upload-file">
                                    <button type="button" class="btn-upload thumbnail">
                                        <img>
                                        <div>
                                            <i class="fa fa-upload"></i>Upload
                                        </div>
                                    </button>
                                    <i class="fa fa-trash-o image-delete-icon" style="display: none;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Batal
                        </button>
                        <button class="btn btn-primary">
                            Simpan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('jsCustom')
    @if (checkUserPermission(\App\Util\AclConstant::VIEW_MASKED_DATA))
        @if ($model::MASKED_FIELD && count($model::MASKED_FIELD) > 0)
            @foreach ($model::MASKED_FIELD as $maskedField)
                <script>
                    $(document).ready(function() {
                        $(`#unmask-{{ $maskedField }}-input-btn`).on('click', function(event) {
                            const button = $(this);
                            const id = button.data('id');

                            let url =
                                '{{ route('admin.unmask-data.investor', ['modelId' => ':id', 'fieldName' => ':fieldName']) }}';
                            url = url.replace(':id', id).replace(':fieldName', '{{ $maskedField }}');

                            const input = $(`.masked-input-{{ $maskedField }}`);

                            if (!input.length) {
                                console.error(
                                    `Input element with class '.masked-input-{{ $maskedField }}' not found.`);
                                return;
                            }

                            const maskedValue = input.data('masked-value');
                            const isMasked = input.data('is-masked') === true;

                            if (isMasked) {
                                $.getJSON(url)
                                    .done(function(data) {
                                        input.val(data);
                                    })
                                    .fail(function(xhr, status, error) {
                                        input.val(xhr.responseText);
                                        console.error(xhr.responseText);
                                    })
                                    .always(function() {
                                        input.data('is-masked', false);
                                    });
                            } else {
                                input.val(maskedValue);
                                input.data('is-masked', true);
                            }
                        });
                    });
                </script>
            @endforeach
        @endif
    @endif

    <script>
        const imageFolder = '{{ url('/') . '/assets/upload/md/' }}';

        function showUploadAttachmentModal(transactionNumber, id) {
            $('#modal-upload-repayment-attachment').find('.modal-header').html('<h3>Upload Attachment ' +
                transactionNumber + '</h3>');
            $('#modal-upload-repayment-attachment').find('input:file[name=attachment]').val('');
            $('#modal-upload-repayment-attachment').find('input:hidden[name=id]').val(id);
            $('#modal-upload-repayment-attachment').modal('show');
        }

        function customValidation() {
            var result = [];
            var email = $('input[type=email]').val();
            if (validateEmail(email) == false && email != '') {
                result = ['Email must be a valid email format.'];
            }
            return result;
        }

        function customColumns(index) {
            @if (\Auth::isAdmin())
                if (index == 0 || index == 2) {
                    return {
                        5: function(data, type, row, meta) {
                            var html = '';
                            if (!empty(data)) {
                                html += '<a href="' + imageFolder + data + '" target="_blank">';
                                html += '    <button type="button" class="btn btn-default btn-xs"> View Image</button>';
                                html += '</a>&nbsp;';
                            }
                            return html;
                        }
                    }
                } else if (index == 1) {
                    const updateStatusUrl = '{{ route($urlPrefix . '.investor.updateRepaymentStatus', ['id' => $id]) }}';

                    return {
                        6: function(data, type, row, meta) {
                            var html = '';
                            if (!empty(data)) {
                                html += '<a href="' + imageFolder + data +
                                    '" class="btn-upload thumbnail" target="_blank">';
                                html += '   <img src="' + imageFolder + data + '">'
                                html += '</a>';
                            }
                            return html;
                        },
                        7: function(data, type, row, meta) {
                            var html = '';

                            html += '<button type="button" onclick="showUploadAttachmentModal(\'' + row[0] + '\', ' +
                                row[7] + ')" class="btn btn-default btn-xs"> Upload Image</button>';
                            html += '<form method="POST" action="' + updateStatusUrl + '">';
                            html += '    <button type="submit" name="id" value="' + data +
                                '" class="btn btn-default btn-xs"> Ubah Status</button>';
                            html += '</form>&nbsp;';

                            return html;
                        }
                    }
                } else {
                    return '';
                }
            @elseif (\Auth::isInvestorPic())
                if (index == 0) {
                    var imageFolder = '{{ url('/') . '/assets/upload/md/' }}';
                    return {
                        5: function(data, type, row, meta) {
                            var html = '';
                            if (!empty(data)) {
                                html += '<a href="' + imageFolder + data + '" target="_blank">';
                                html += '    <button type="button" class="btn btn-default btn-xs"> View Image</button>';
                                html += '</a>&nbsp;';
                            }
                            return html;
                        }
                    }
                } else {
                    return '';
                }
            @else
                return '';
            @endif
        }

        $('.nav-tabs a').on('shown.bs.tab', function() {
            if ($(this).attr('href') == '#dana-disalurkan') {
                redrawDataTables(0);
            } else if ($(this).attr('href') == '#pengembalian-dana') {
                redrawDataTables(1);
                dataTableList[1].on('draw.dt', function(e, data) {
                    $('#snapshotOrderGrandTotal').text(data.json.snapshotOrderGrandTotal);
                    $('#snapshotInvestorMarginAmount').text(data.json.snapshotInvestorMarginAmount);
                });
            } else if ($(this).attr('href') == '#pembayaran-marketplace') {
                redrawDataTables(2);
            } else if ($(this).attr('href') == '#pengembalian-terlambat') {
                @if (\Auth::isAdmin())
                    redrawDataTables(3);
                @elseif (\Auth::isInvestorPic())
                    redrawDataTables(2);
                @endif
            }
        });

        function redrawDataTables(tableIndex) {
            setTimeout(function() {
                if (dataTableList[tableIndex]) {
                    dataTableList[tableIndex].clear().draw();
                } else {
                    $(dataTableList).each(function(index, data) {
                        dataTableList[index].clear().draw();
                    });
                }
            }, 200);
        }

        function getCityList(provinceId) {
            var cityList = [];
            $.ajax({
                url: '{{ route($urlPrefix . '.city.ajaxAutoComplete') }}',
                data: {
                    provinceId: provinceId
                },
                method: 'POST',
                async: false,
                success: function(successData) {
                    if (successData.status == 'success') cityList = successData.data;
                }
            });
            return cityList;
        }

        function setCityList(provinceId) {
            let cityList = getCityList(provinceId);

            let html = '<option></option>';
            cityList.forEach(function(data) {
                html += '<option value="' + data.id + '">' + data.name + '</option>'
            })

            $('#cityId').empty().append(html);
        }

        $(document).ready(function() {
            $('.datepickerinput').datetimepicker({
                format: 'YYYY-mm-dd'
            });

            let province_id = {{ empty($model->provinceId) ? 0 : $model->provinceId }};

            if (province_id != 0) {
                setCityList(province_id);

                let city_id = {{ empty($model->cityId) ? 0 : $model->cityId }};

                if (city_id != 0) {
                    $('#cityId').val(city_id);
                }

            }

            $('#provinceId').change(function(e) {
                let provinceId = $(this).val();

                setCityList(provinceId);
            });
        })
    </script>
@endsection