@extends('layouts.authorized', ['isVue' => true])
@inject('constant', '\App\Util\Constant')
@section('title', 'Detil Invoice #'. $model->id)
@section('headerCustom')
    @php
        $id = 0;
        if (!empty($model->getKey())) $id = $model->getKey();
        $formUrl = $model->getUrlDetails(['id' => $id]);
        $cancelUrl = $model->getUrlIndex();
        $language = '';
        $title = 'Detail Pembiayaan Invoice';
    @endphp
@endsection

@section('cssCustom')
    <style>
        .datepicker-days table.table-condensed thead tr th,
        .datepicker-days table.table-condensed tbody tr td {
            padding: 5px !important;
        }

        .border{
            border: 1px solid rgba(0,0,0,0.1);
            margin-left: 15px;
            padding: 20px;
        }

        .border-top{
            border-top: 1px solid rgba(0,0,0,0.1);
        }

        #daftar-lender table{
            width: 100%!important;
        }

        .reject-reason-template {
            font-size: 12px;
            padding-left: 20px;
            text-align: left;
        }

        #map {
            height: 500px;
            width: 100%;
        }

        #map2 {
            height: 500px;
            width: 100%;
        }

        .tenor-type {
            margin-top: -5px;
            margin-bottom: 5px;
        }

        .tenor-type-label {
            margin-top: -5px;
        }
       
        /* .bg-primary {
            color: 
        } */
    </style>

    @if (checkUserPermission(App\Util\AclConstant::VIEW_MASKED_DATA))
        <style>
            .toast-container {
                position: fixed;
                bottom: 20px;
                right: 20px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                z-index: 9999;
            }

            .toast-message {
                background-color: #333;
                color: #fff;
                padding: 10px 20px;
                margin-top: 10px;
                border-radius: 5px;
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.4s ease, transform 0.4s ease;
            }

            .toast-message.show {
                opacity: 1;
                transform: translateY(0);
            }
        </style>
    @endif
@endsection

@section('content')
    @include('cms.form.errorbox')
    <form action="{{ route('userAnchor.scf.invoice.save', $model->id) }}" class="form-horizontal" method="POST" enctype="multipart/form-data" id="formMain">
       
        @if($model->status === $constant::INVOICE_STATUS_VERIFICATION)
            <input type="hidden" name="status" value="">
            <input type="hidden" name="remarks" value="">
        @endif
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    {{ $model->invoiceNumber }}
                    <span class="pull-right">
                    <span class="badge badge-primary">{{ $model->status == Constant::INVOICE_STATUS_VERIFICATION ? @$badgeApprovalVerificationText : @$constant::INVOICE_STATUS_LABELS[$model->status] }}</span>
                    <span class="badge badge-warning ml-5">{{ @$constant::INVOICE_PAYMENT_STATUS_LABLES[$model->statusPayment] }}</span>
                    <span class="badge badge-success ml-5">{{ @$constant::INVOICE_REPAYMENT_STATUS_LABLES[$model->statusRepayment] }}</span>
                </span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-4">Tanggal Pengajuan</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">{{ \Carbon::parse($model->createdAt)->format('d/m/y') }}</div>
                        </div>
                        @if($model->status !== $constant::INVOICE_STATUS_VERIFICATION)
                            <div class="col-md-12">
                                <div class="col-md-4">Pengajuan Disetujui</div>
                                <div class="col-md-1" style="width: 10px !important;">:</div>
                                <div class="col-md-7">{{ \Carbon::parse($model->approvedAt)->format('d/m/y') }}</div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-4">Penawaran Ditutup</div>
                                <div class="col-md-1" style="width: 10px !important;">:</div>
                                <div class="col-md-7">{{ \Carbon::parse($model->offerClosedAt)->format('d/m/y') }}</div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-4">Pembiayaan Aktif</div>
                                <div class="col-md-1" style="width: 10px !important;">:</div>
                                <div class="col-md-7">{{ !empty($model->activeAt) ? \Carbon::parse($model->activeAt)->format('d/m/y') : '-' }}</div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-4">Pembiayaan Jatuh Tempo</div>
                                <div class="col-md-1" style="width: 10px !important;">: 
                                <div class="col-md-7">
                                    @php
                                        $dueDate = \Carbon::parse($model->dueDate)->startOfDay();
                                        $dateNow = \Carbon::parse('today')->startOfDay();
                                    @endphp
                                    {{ !empty($model->dueDate) ? \Carbon::parse($model->dueDate)->format('d/m/y') : '-'}}
                                    @if(($model->status == 'ACTIVE') &&(!empty($model->dueDate) && $dateNow->greaterThan($dueDate)))
                                        <span class="text-danger">Terlambat {{ $dateNow->diffIndays($dueDate) }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-4">Tanggal Repayment</div>
                                <div class="col-md-1" style="width: 10px !important;">:</div>
                                <div class="col-md-7">{{ !empty($model->repaymentDate) ? \Carbon::parse($model->repaymentDate)->format('d/m/y') : '-' }}</div>
                            </div>
                            @if ($model->status === Constant::INVOICE_STATUS_CANCELLED)
                                <div class="col-md-12">
                                    <div class="col-md-4">Tanggal Pembatalan</div>
                                    <div class="col-md-1" style="width: 10px !important;">:</div>
                                    <div class="col-md-7">{{ !empty($model->cancelledAt) ? \Carbon::parse($model->cancelledAt)->format('d/m/y') : '-' }}</div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-4">Alasan Pembatalan</div>
                                    <div class="col-md-1" style="width: 10px !important;">:</div>
                                    <div class="col-md-7">{{ $model->remark }}</div>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
                <br>
                <div class="card-header" style="border-top: 2px solid #dfe6e8;">
                    Detail Borrower
                </span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-4">Tipe Pembiayaan</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">
                                <select class="form-control" name="loanType" disabled readonly>
                                    <option value="{{ $constant::INVOICE_LOAN_TYPE_INVOICE_FINANCING }}" {{ $model->loanType == $constant::INVOICE_LOAN_TYPE_INVOICE_FINANCING ? 'selected' : '' }}> {{ $constant::INVOICE_LOAN_TYPE_LABELS[$constant::INVOICE_LOAN_TYPE_INVOICE_FINANCING] }} </option>
                                    <option value="{{ $constant::INVOICE_LOAN_TYPE_PO_FINANCING }}" {{ $model->loanType == $constant::INVOICE_LOAN_TYPE_PO_FINANCING ? 'selected' : '' }}> {{ $constant::INVOICE_LOAN_TYPE_LABELS[$constant::INVOICE_LOAN_TYPE_PO_FINANCING] }} </option>
                                    @if (!empty($borrower->creditApplicationBusiness->scfId))
                                        <option value="{{ $constant::INVOICE_LOAN_TYPE_SCF }}" {{ $model->loanType == $constant::INVOICE_LOAN_TYPE_SCF ? 'selected' : '' }}> {{ $constant::INVOICE_LOAN_TYPE_LABELS[$constant::INVOICE_LOAN_TYPE_SCF] }} </option>
                                    @endif
                                </select> 
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Kategori Pembiayaan</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">{{ $constant::CREDIT_APPLICATION_TYPE_LABELS[$borrower->type] }}</div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Tipe Borrower</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">
                                <select class="form-control" name="creditType" readonly>
                                    <option value="COMPANY" {{ $borrower->creditType == $constant::CREDIT_APPLICATION_CREDIT_TYPE_COMPANY ? 'selected' : '' }}>Perusahaan</option>
                                    <option value="INDIVIDUAL" {{ $borrower->creditType == $constant::CREDIT_APPLICATION_CREDIT_TYPE_INDIVIDUAL ? 'selected' : '' }}>Individual</option>
                                </select> 
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Nomor PO</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">
                                <input class="form-control" type="text" name="poNumber" value="{{ $model->poDate }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Tanggal PO</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">
                                <div class="input-group date datepickerinput">
                                    <input type="text" class="form-control" id="poDate" name="poDate" data-date-format="YYYY-MM-DD" value="{{ empty($model->poDate) ? "" : $model->poDate }}" readonly>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Nomor Invoice</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">
                                <input class="form-control" type="text" name="invoiceFinancingNumber" value="{{ $model->invoiceFinancingNumber }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Tanggal Invoice</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">
                                <div class="input-group date datepickerinput">
                                    <input type="text" class="form-control" id="invoiceFinancingDate" name="invoiceFinancingDate" data-date-format="YYYY-MM-DD" value="{{ empty($model->invoiceFinancingDate) ? "" : $model->invoiceFinancingDate }}" readonly>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Nama Perusahaan</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">{{ $borrower->creditApplicationBusiness->businessName }}</div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Nama</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">{{ $borrower->fullName }}</div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">No. HP</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">{!! generateMaskedDataHtml(maskString($borrower->mobilePhone, 6), $borrower->id, 'masked-mobilePhone', 'unmask-mobilePhone-btn') !!}</div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-4">Email</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">{{ $borrower->email }}</div>
                        </div>
                        {{--  <div class="col-md-12">
                            <div class="col-md-4">Grade</div>
                            <div class="col-md-7">: {{ $borrower->creditApplicationBusiness->rating }}</div>
                        </div> --}}
                        <div class="col-md-12">
                            {{-- <div class="col-12">(invoice->monthlyMarginRate * fundingValue)</div> --}}
                            <div class="col-md-4">Ujroh</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            {{-- Perhitungan Ujroh = margin rate bulanan * nilai pembiayaan * tenor  --}}
                            <div class="col-md-7">Rp {{ number_format($model->monthlyMarginRate * $model->fundingValue * $model->period, 2, ',', '.') }}</div>
                        </div>
                        {{-- <div class="col-md-12">
                            <div class="col-12">(business->marginRate * fundingValue)</div>
                            <div class="col-md-4">Ujroh</div>
                            <div class="col-md-1" style="width: 10px !important;">:</div>
                            <div class="col-md-7">Rp {{ number_format($borrower->creditApplicationBusiness->marginRate * $model->fundingValue, 2, ',', '.') }}</div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
     
        <div class="col-md-12">
            <ul class="nav nav-pills fs-15">
                <li class="active"><a data-toggle="tab" href="#pengajuan-pembiayaan">Pengajuan Pembiayaan </a></li>
            </ul>
        </div>

        <div class="col-md-12 mt-15">
            <div class="tab-content">
                <div id="pengajuan-pembiayaan" class="tab-pane fade in active">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                Pengajuan Pembiayaan
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-xs-12 col-md-7">
                                        @foreach($model::FORM_GROUP['invoiceInformation'] as $key)
                                            @php
                                                if (!isset($listItem)) $listItem = '';
                                                if (!isset($listName)) $listName = '';
                                                if (!isset($listIndex)) $listIndex = '';

                                                $formType = $model->formType($key);
                                                if( strpos( $formType , 'Image' ) !== false ){
                                                    $imageCount = (substr($formType, 6) - 1);
                                                    $formType = 'Image';
                                                }
                                            @endphp
                                            <div class="col-xs-12">
                                                <div class="col-md-3">
                                                    <label class="control-label">{{ $model::FORM_LABEL[$key] }}</label>
                                                    @if(!empty($model->labelHelp($key)))
                                                        <p class="control-label-help">
                                                            ( {{ $model->labelHelp($key) }} )
                                                        </p>
                                                    @endif
                                                </div>
                                                <div class="col-md-9 pr-0">
                                                    @if($formType)
                                                        @include('cms.form.field.'.$formType)
                                                    @else
                                                        Under Construction
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        @if(\Auth::isAdmin() && !empty(@$model->loanType))
                                            @if (@$model->loanType == $constant::INVOICE_LOAN_TYPE_PO_FINANCING)
                                                <div class="col-xs-12">
                                                    <div class="col-md-3">
                                                        <label class="control-label">Nilai RAB (RP)</label>
                                                    </div>
                                                    <div class="col-md-9 pr-0">
                                                        <div class="input-group">
                                                            <span class="input-group-addon">Rp</span>
                                                            <input class="form-control autonumeric" type="text" name="rabAmount" value="{{ $model->rabAmount }}" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endif

                                        {{-- <div class="col-xs-12">
                                            <div class="col-md-3">
                                                <label class="control-label">Skema Pembayaran</label>
                                            </div>
                                            <div class="col-md-9">
                                                <label class="pt-5">Trasnfer ke rekening Duha Syariah</label>
                                            </div>
                                        </div>

                                        <div class="col-xs-12">
                                            <div class="col-md-3">
                                                <label class="control-label">Rekening Pembayaran</label>
                                            </div>
                                            <div class="col-md-9">
                                                <label class="pt-5">{{ $borrower->creditApplicationBusiness->bankAccountNumber }}</label>
                                            </div>
                                        </div> --}}
                                    </div>
                                    <div class="col-xs-12 col-md-4">
                                        <p><strong>Dokumen Kontrak</strong></p>
                                        <div class="table-responsive">
                                            <table class="table table-bordered" width="100%">
                                                <tr>
                                                    <th>Jenis Dokumen</th>
                                                    {{--<th>Upload Dokumen</th>--}}
                                                    <th>Dokumen Asli</th>
                                                    <th>Dokumen Privy</th>
                                                    <th>Dokumen TTD</th>
                                                </tr>
                                                @if(\Auth::isAdmin() && !empty(@$model->loanType))
                                                    @if (in_array(@$model->loanType, [Constant::INVOICE_LOAN_TYPE_INVOICE_FINANCING, Constant::INVOICE_LOAN_TYPE_SCF]))
                                                        <tr>
                                                            <th>Dokumen Qardh</th>
                                                            {{-- <td>
                                                                @if(!empty($model->borrowerQardhContract))
                                                                    <div>
                                                                        <div class="input-group">
                                                                            <input type="text" class="form-control" disabled value="{{ @$model->borrowerQardhContract  }}">
                                                                            <input type="hidden" class="form-control" name="borrowerQardhContract" id="borrowerQardhContract" value="{{ @$model->borrowerQardhContract }}">
                                                                            <span class="input-group-addon change-file-delete">Delete</span>
                                                                        </div>
    
                                                                        <div class="input-group hide">
                                                                            <input type="file" class="form-control input-file-upload" accept=".pdf" id="borrowerQardhContract" label="borrowerQardhContract" {!! $model->getFileLimit($key) !!} data-name="borrowerQardhContract">
                                                                        </div>
                                                                    </div>
                                                                @else
                                                                    <div>
                                                                        <div class="input-group">
                                                                            <input type="file" class="form-control input-file-upload" accept=".pdf" name="borrowerQardhContract" id="borrowerQardhContract" label="borrowerQardhContract" {!! $model->getFileLimit($key) !!}>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            </td> --}}
                                                            <td>
                                                                @if(!empty($model->borrowerQardhContract))
                                                                <a href="{{ getDocumentUrl($model->borrowerQardhContract) }}" target="_blank">
                                                                    Lihat Dokumen</a>
                                                                @else
                                                                    -
                                                                @endif
                                                            </td>
                                                            <td >
                                                                @if(!empty($model->privyDocumentQardhToken))
                                                                    <a href="{{ $model->privyDocumentQardhUrl }}" target="_blank">Lihat di
                                                                        Privy</a>
                                                                @else
                                                                    -
                                                                @endif
                                                            </td>
                                                            <td>
                                                                @if($model->privyDocumentQardhStatus == \App\Util\PrivyConstant::DOCUMENT_STATUS_COMPLETED)
                                                                    <a target="_blank" href="{{ route('admin.privy.getSignedDoc', ['token' => $model->privyDocumentQardhToken]) }}">Lihat Dokumen</a>
                                                                @else
                                                                    -
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @else
                                                        <tr>
                                                            <th>Dokumen Musyarakah</th>
                                                            <td>
                                                                @if(!empty($model->borrowerMusyarakahContract))
                                                                <a href="{{ getDocumentUrl($model->borrowerMusyarakahContract) }}" target="_blank">Lihat
                                                                    Dokumen</a>
                                                                @else
                                                                    -
                                                                @endif
                                                            </td>
                                                            <td >
                                                                @if(!empty($model->privyDocumentMusyarakahToken))
                                                                    <a href="{{ $model->privyDocumentMusyarakahUrl }}" target="_blank">Lihat di
                                                                        Privy</a>
                                                                @else
                                                                    -
                                                                @endif
                                                            </td>
                                                            <td>
                                                                @if($model->privyDocumentMusyarakahStatus == \App\Util\PrivyConstant::DOCUMENT_STATUS_COMPLETED)
                                                                    <a target="_blank" href="{{ route('admin.privy.getSignedDoc', ['token' => $model->privyDocumentMusyarakahToken]) }}">Lihat Dokumen</a>
                                                                @else
                                                                    -
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endif
                                                    <tr>
                                                        <th>Dokumen Wakalah Bil Ujroh</th>
                                                        <td>
                                                            @if(!empty($model->borrowerWakalahContract))
                                                            <a href="{{ getDocumentUrl($model->borrowerWakalahContract) }}" target="_blank">Lihat
                                                                Dokumen</a>
                                                            @else
                                                                -
                                                            @endif
                                                        </td>
                                                        <td >
                                                            @if(!empty($model->privyDocumentWakalahToken))
                                                                <a href="{{ $model->privyDocumentWakalahUrl }}" target="_blank">Lihat di
                                                                    Privy</a>
                                                            @else
                                                                -
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if($model->privyDocumentWakalahStatus == \App\Util\PrivyConstant::DOCUMENT_STATUS_COMPLETED)
                                                                <a target="_blank" href="{{ route('admin.privy.getSignedDoc', ['token' => $model->privyDocumentWakalahToken]) }}">Lihat Dokumen</a>
                                                            @else
                                                                -
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endif
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-10">
            <div class="col-md-4 col-xs-12">
                <a class="btn btn-default" href="{{ route('userAnchor.scf.invoices') }}">
                    Kembali ke Daftar
                </a> &nbsp;
                @if ($model->status === $constant::INVOICE_STATUS_VERIFICATION && $model->approvalVerfication == $constant::INVOICE_STATUS_VERIFICATION_APPROVAL_SCF)
                    <button type="button" onclick="triggerSubmitMainForm()"  class="btn btn-primary">
                        Simpan Perubahan
                    </button>
                @endif
            </div>
            <div class="col-md-8">
                <div class="pull-right">
                    @if($model->status === $constant::INVOICE_STATUS_VERIFICATION && $model->approvalVerfication == $constant::INVOICE_STATUS_VERIFICATION_APPROVAL_SCF)
                        <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#modal-cancel-application">
                            Batalkan
                        </button>
                        <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal-approve-application" onclick="setStatus('APPROVED')">
                            Setujui
                        </button>
                    @endif
                </div>
            </div>
        </div>
    
    @if ($model->status === $constant::INVOICE_STATUS_VERIFICATION)
        <div id="modal-approve-application" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header p-15">
                        <h4 class="modal-title">Setujui</h4>
                    </div>
                    <div class="modal-body p-15 text-center">
                        <div class="row">
                            <i class="fa fa-exclamation-circle mb-20 fa-4x"></i>
                            <p class="mb-25"><b>Anda akan menyetujui pembiayaan ini?</b></p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Batal
                        </button>
                        <button class="btn btn-primary btnSubmit buttonApproveInvoice" type="button" onclick="approveInvoice()">
                            Setujui
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div id="modal-reject-application" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <form action="{{ route('userAnchor.scf.invoice.updateStatus', ['invoiceId' => $model->id]) }}" method="POST">
                    <input type="hidden" name="status" value="{{ $constant::INVOICE_STATUS_REJECTED }}">
                    <div class="modal-content">
                        <div class="modal-header p-15">
                            <h4 class="modal-title">Tolak Pembiayaan</h4>
                        </div>
                        <div class="modal-body p-15 text-center">
                            <div class="row">
                                <i class="fa fa-exclamation-circle mb-20 fa-4x"></i>
                                <p class="mb-25"><b>Anda akan menolak pembiayaan ini?</b></p>
                            </div>
                            <div class="form-group">
                                <textarea name="remarks" id="" cols="30" rows="3" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Batal
                            </button>
                            <button class="btn btn-primary btnSubmit" type="submit">
                                Tolak Pembiayaan
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div> 
    @endif

    @if (in_array($model->status, $constant::INVOICE_CANCELABLE_STATUS_LIST))
        <div id="modal-cancel-application" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <form action="{{ route('userAnchor.scf.invoice.updateStatus', ['invoiceId' => $model->id]) }}" method="POST">
                    <input type="hidden" name="status" value="{{ $constant::INVOICE_STATUS_CANCELLED }}">
                    <div class="modal-content">
                        <div class="modal-header p-15">
                            <h4 class="modal-title">Batalkan Pembiayaan</h4>
                        </div>
                        <div class="modal-body p-15 text-center">
                            <div class="row">
                                <i class="fa fa-exclamation-circle mb-20 fa-4x"></i>
                                <p class="mb-25"><b>Anda akan membatalkan pembiayaan ini?</b></p>
                            </div>
                            <div class="form-group">
                                <textarea name="remarks" id="" cols="30" rows="3" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Batal
                            </button>
                            <button class="btn btn-primary btnSubmit" type="submit">
                                Batalkan Pembiayaan
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif

    <input type="hidden" name="invoiceId" value="{{$model->id}}">
    <input type="hidden" name="activeAt" value="{{ date('Y-m-d', strtotime($model->activeAt))}}">

    <script>
        var vueData = {!! json_encode($model) !!};
        // dokumen pendukung
        vueData.documentText = '{{ preg_replace( "/\r|\n/", "", $model->documentText) }}';
        vueData.documentAttachment = {!! json_encode($model->documentAttachmentList) !!};

        vueData.documentAttachment.push({name: '', url: ''});

        @if($model->lenderType == $constant::INVOICE_LENDER_TYPE_PUBLIC)
            vueData.investorIdList = [];
            vueData.investorList = [];
        @else
            vueData.investorList = {!! json_encode($model->investorList) !!};
        @endif
        vueData.readonly = true;

        var vueExtraMethods = {
            checkDisabled : function() {
                alert(disabled);

                let disabled = false;

                if (this.readonly == 1) {
                    disabled = true;
                } else {
                    disabled = false;
                }

                return disabled;
            },
            processAttachment: function (event, index) {  
                var input = event.target;
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = (e) => {
                        this.documentAttachment[index].name = input.files[0].name;
                        this.documentAttachment[index].url = e.target.result;
                        this.documentAttachment.push({name: '', url: ''});
                    }
                    reader.readAsDataURL(input.files[0]);
                }
                vueApp.$forceUpdate();
            },
            removeAttachment: function (event, index) {
                this.documentAttachment.splice(index, 1);
                var inputFields = $(event.target).parent().parent().find('input');
                vueApp.$forceUpdate();
            }
        }
    </script>
@endsection

@section('jsCustom')
    @if (checkUserPermission(App\Util\AclConstant::VIEW_MASKED_DATA))
        <script>
            var copyButtonHtml =
                "<button type='button' style='display: flex; align-items: center; justify-content: center; padding: 5px !important; height: 30px !important; width: 30px !important; border-radius: 50%;' class='btn copy-data-btn' style='margin-left: 5px;'><i class='fa fa-clone' style='font-size: 8pt;'></i></button>";

            function handleUnmaskButtonClick(buttonClass, fieldName, maskedSpanClass) {
                $(document).on('click', buttonClass, function() {
                    var id = $(this).data('id');
                    var url =
                        '{{ route('scf.unmask-data', ['tableName' => 'creditApplicationId', 'id' => ':id', 'fieldName' => ':fieldName']) }}';
                    url = url.replace(':id', id).replace(':fieldName', fieldName);

                    var $span = $(this).siblings(maskedSpanClass);
                    var maskedValue = $span.data('maskedValue');
                    var isMasked = $span.data('isMasked');

                    if (isMasked) {
                        $.ajax({
                            type: "GET",
                            url: url,
                            dataType: "json",
                            success: function(response) {
                                $span.text(`${response}`);
                            },
                            error: function(xhr, status, error) {
                                $span.text(`${xhr.responseText}`);
                                console.log(xhr.responseText);
                            },
                            complete: function() {
                                $span.data('isMasked', false);
                                $(copyButtonHtml).insertAfter($span);
                            }
                        });
                    } else {
                        $span.text(maskedValue);
                        $span.data('isMasked', true);
                        $(this).siblings('.copy-data-btn').remove();
                    }
                });
            }

            function showToast(message) {
                var $toastContainer = $('.toast-container');

                if ($toastContainer.length === 0) {
                    $toastContainer = $('<div class="toast-container"></div>');
                    $('body').append($toastContainer);
                }

                var $toastMessage = $('<div class="toast-message"></div>').text(message);
                $toastContainer.append($toastMessage);

                setTimeout(function() {
                    $toastMessage.addClass('show');
                }, 100);

                setTimeout(function() {
                    $toastMessage.removeClass('show');
                    setTimeout(function() {
                        $toastMessage.remove();
                    }, 400);
                }, 3000);
            }

            $(function() {
                handleUnmaskButtonClick('.unmask-mobilePhone-btn', 'mobilePhone', '.masked-mobilePhone');

                $(document).on('click', '.copy-data-btn', function() {
                    var textToCopy = $(this).siblings('span').text();

                    var $tempInput = $('<input>');
                    $('body').append($tempInput);
                    $tempInput.val(textToCopy).select();
                    document.execCommand('copy');
                    $tempInput.remove();

                    showToast('Copied to clipboard: ' + textToCopy);
                });
            })
        </script>
    @endif

    <script>
        $('#selected-custom-field').select2();

        var marginRate = $('[name=marginRate]').val();
        var monthlyProfit = parseFloat(marginRate) / 12;
        var dailyProfit = parseFloat(monthlyProfit) / 30;

        var periodType = $('input:radio[name="periodType"]:checked').val();

        var duhaMarginRate = $('[name=duhaMarginRate]').val();
        var investorMarginRate = $('[name=investorMarginRate]').val();

        var invoiceType = $('input:radio[name="invoiceType"]:checked').val();

        var redDayList = {!! json_encode($redDayList) !!};

        $(function(){
            // if (redDayList === null) {
            //     alert('API URL TANGGAL MERAH SUDAH TIDAK DAPAT DIGUNAKAN LAGI');
            // }

            $('[name=marginRate], [name=insuranceRate], [name=rating], [name=duhaMarginRate], [name=investorMarginRate], [name=payorName], [name=payorEstablished], [name=payorIndustry], [name=payorDomisili]').prop('readonly', true);
            $('[name=minValue], [name=maxValue], [name=payorBillValue], [name=submissionValue]').parent().find('input').prop('readonly', true);

            if(periodType == '{{ $constant::INVOICE_PERIOD_TYPE_MONTH }}') {
                $('[name=period]').prop('readonly', false);
                $('[name=periodDay]').prop('readonly', true);

                // $('[name=marginRate]').prop('readonly', false);
                // $('#dailyProfit').prop('disabled', true);
            }
            else {
                $('[name=period]').prop('readonly', true);
                $('[name=periodDay]').prop('readonly', false);

                // $('[name=marginRate]').prop('readonly', true);
                // $('#dailyProfit').prop('disabled', false);
            }

            if(invoiceType == '{{ $constant::INVOICE_LENDER_TYPE_PUBLIC }}') {
                $('#investorList').prop('readonly', true);
            }
            else {
                $('#investorList').prop('readonly', false);
            }

            $('#monthlyProfit').val(parseFloat(monthlyProfit).toFixed(2));
            $('#dailyProfit').val(parseFloat(dailyProfit).toFixed(3));

            $('#duhaMarginRate').val(parseFloat(duhaMarginRate).toFixed(2));
            $('#investorMarginRate').val(parseFloat(investorMarginRate).toFixed(2));


            $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
                $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
            });

            $('input:radio[name="periodType"]').change(function() {
                if (this.value == '{{ $constant::INVOICE_PERIOD_TYPE_MONTH }}') {
                    $('[name=period]').prop('readonly', false).val(0);
                    $('[name=periodDay]').prop('readonly', true).val(0);

                    $('[name=marginRate]').prop('readonly', false);
                    $('#dailyProfit').prop('disabled', true);
                }
                else {
                    $('[name=period]').prop('readonly', true).val(0);
                    $('[name=periodDay]').prop('readonly', false).val(0);

                    $('[name=marginRate]').prop('readonly', true);
                    $('#dailyProfit').prop('disabled', false);
                }
            });

            $('[name=marginRate]').keyup(function() {
                let monthlyProfit = $('#monthlyProfit');
                let dailyProfit = $('#dailyProfit');
                let yearlyProfit = $(this).val();

                if(yearlyProfit !== '') {
                    let totalMonthly = parseFloat(yearlyProfit) / 12;
                    let totalDaily = parseFloat(totalMonthly) / 30;
                    monthlyProfit.val(parseFloat(totalMonthly).toFixed(2));
                    dailyProfit.val(parseFloat(totalDaily).toFixed(3));
                } else {
                    monthlyProfit.val('');
                    dailyProfit.val('');
                }
            });

            $('#dailyProfit').keyup(function() {
                let yearlyProfit = $('[name=marginRate]');
                let monthlyProfit = $('#monthlyProfit');
                let dailyProfit = $(this).val();

                if(dailyProfit !== '') {
                    let totalMonthly = parseFloat(dailyProfit) * 30;
                    let totalYearly = parseFloat(totalMonthly) * 12;
                    monthlyProfit.val(parseFloat(totalMonthly).toFixed(2));
                    yearlyProfit.val(parseFloat(totalYearly).toFixed(2));
                } else {
                    monthlyProfit.val('');
                    yearlyProfit.val('');
                }
            });

            $('[name=period]').keyup(function() {
                if($("input[name='periodType']:checked").val() == '{{ $constant::INVOICE_PERIOD_TYPE_MONTH }}') {
                    let periodDay = $('#periodDay');
                    let periodMonth = $(this).val();

                    // alert(periodMonth);

                    if(periodMonth !== '') {
                        totalDay = parseInt(periodMonth) * 30;
                        periodDay.val(totalDay);
                    } else {
                        periodDay.val('');
                    }
                    
                    setDueData(periodDay.val(), redDayList);
                }
            });

            $('[name=periodDay]').keyup(function() {
                let periodMonth = $('#period');
                let periodDay = $(this).val();
                
                /* let totalMonth = parseInt(periodDay) / 30;
                periodMonth.val(Math.floor(totalMonth).toFixed(0)); */

                setDueData(periodDay, redDayList);
            });

            $('[name=duhaMarginRate]').keyup(function() {
                let marginRateDuha = $('#duhaMarginRate').val();
                let marginRateInvestor = $('#investorMarginRate');

                let marginInvestor = 100 - marginRateDuha;
                marginRateInvestor.val(parseFloat(marginInvestor).toFixed(2));
            });

            $('[name=investorMarginRate]').keyup(function() {
                let marginRateDuha = $('#duhaMarginRate');
                let marginRateInvestor = $('#investorMarginRate').val();

                let marginDuha = 100 - marginRateInvestor;
                marginRateDuha.val(parseFloat(marginDuha).toFixed(2));
            });

            $("#emailDueDateHead").on('dp.change', function (e) { 
                var date                = $('#emailDueDate').val();
                var formatDate          = new Date(date);
                var nationalHoldayDate  = Object.values(redDayList);
                if (formatDate.getDay() == 0 || formatDate.getDay() == 6 || nationalHoldayDate.includes(date)) {
                    $('#warningRedDays').text('Tanggal yang dipilih termasuk pada tanggal merah nasional !');
                }else{
                    $('#warningRedDays').text('');
                }
            });
        });

        function setStatus(status) {
            $('[name="status"]').val(status);
        };

        function triggerSubmitMainForm() {
            $('#formMain').submit();
        }

        function triggerSubmitAkadForm() {
            $('[name="borrowerQardhContract"]').clone().hide().appendTo($('#formAkad'));
            $('[name="borrowerWakalahContract"]').clone().hide().appendTo($('#formAkad'));
            $('[name="borrowerMusyarakahContract"]').clone().hide().appendTo($('#formAkad'));

            $('#formAkad').submit();
        }

        function approveInvoice() {
            var btn = $('.buttonApproveInvoice').ladda();
            btn.ladda('start');
            $('#formMain').submit();
        }

        function setDueData(periodDay, redDayList) {  
            if (periodDay.length !== 0 && redDayList.length !== 0) {
                var date = new Date();
                var addRedDay = 0;
                var nationalHoldayDate = Object.values(redDayList);
                date.setDate(date.getDate() + parseInt(periodDay));
                // 0 = sunday | 6 = saturday -> standart get day javascript
                while (date.getDay() == 0 || date.getDay() == 6 || nationalHoldayDate.includes(date.toISOString().slice(0, 10))) {
                    ++addRedDay;
                    date.setDate(date.getDate() + 1);
                }
                $('#additionalRedDay').val(addRedDay);
                $('#emailDueDate').val(date.toISOString().slice(0, 10));
            }
        }
    </script>
@endsection