@extends('cms.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">

                    <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">
                                                        <input name="picContact" class="form-control phone-number"
                                                               value="{{ $model->picContact }}" label="No. Telp"
                                                               type="text" {{ $model->isRequired('picContact') }}/>
                                                    </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')
    <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