@extends('layouts.main')

@section('container')
    <div class="container-fluid">
        <div class="row">
            <div class="col-6">
                <form method="POST" action="{{ route('admin.lease.update', $res->id) }}" cemes="form" class="row"
                    data-index-url="{{ route('admin.lease.index') }}">
                    @csrf
                    <div class="col-12" style="order: 1">
                        <x-cms.card id="personal_info" title="Data Pribadi Pemohon" collapse="collapse">
                            <input type="hidden" name="id" value="{{ old('id', isset($res) ? $res->id : '') }}">
                            <div class="form-group col-12">
                                <label class="col-form-label">Nama Lengkap</label>
                                <input type="text" class="form-control form-control-sm" name="full_name" id="full_name"
                                    value="{{ old('full_name', isset($res) ? $res->full_name : '') }}">
                            </div>
                            <div class=" form-group col-12">
                                <label class="col-form-label">Nomor KTP</label>
                                <input type="text" name="identity_number" id="identity_number"
                                    class="form-control form-control-sm"
                                    value="{{ old('tgl_lahir', isset($res) ? $res->identity_number : '') }}">
                            </div>
                            <div class=" form-group col-12">
                                <label class="col-form-label">Tanggal Lahir</label>
                                <input readonly type="text" name="birthdate" id="birthdate"
                                    class="form-control form-control-sm tanggal"
                                    value="{{ old('tgl_lahir', isset($res) ? $res->birthdate : '') }}">
                            </div>

                            <div class="form-group col-12">
                                <label class="col-form-label">Nomor Handphone</label>
                                <input type="number" class="form-control form-control-sm" name="phone_number"
                                    id="phone_number"
                                    value="{{ old('phone_number', isset($res) ? $res->phone_number : '') }}">
                            </div>

                            <div class="form-group col-12">
                                <label class="col-form-label">Alamat</label>
                                <textarea class="form-control form-control-sm" name="address" id="address">{{ old('address', isset($res) ? $res->address : '') }}</textarea>
                            </div>

                            <div class="form-group col-12">
                                <label class="col-form-label">Email</label>
                                <input type="email" class="form-control form-control-sm" name="email" id="email"
                                    value="{{ old('email', isset($res) ? $res->email : '') }}">
                            </div>

                            <div class="form-group col-12">
                                <label class="col-form-label">Status Pernikahan</label>
                                <select name="marital_status" id="marital_status" class="form-control  form-control-sm">
                                    <option value="MENIKAH">Menikah</option>
                                    <option value="BELUM MENIKAH">Belum Menikah</option>
                                    <option value="CERAI">Cerai</option>
                                </select>
                            </div>
                            <input type="hidden" id="foto_selfi" name="foto_selfi"
                                value="{{ isset($res) ? $res->foto_selfi : '' }}">

                            <div class="form-group col-12 mb-0">
                                <label for="upload_ktp">Foto KTP</label>
                                <div id="upload_ktp"
                                    style="background-color:rgb(219, 219, 219); overflow:hidden;height: 260px;"
                                    class="d-flex justify-content-center align-items-center">
                                    <img src="{{ $res->foto_ktp_url }}" id="output"
                                        style="height: 260px; object-fit:contain">
                                    <input type="hidden" name="foto_ktp" value="{{ $res->foto_ktp }}">
                                </div>
                                <input type="file" hidden name="foto_ktp_file" id="foto_ktp"
                                    onchange="uploadSingle(event)" accept=".jpg,.jpeg,.png" data-input-name="foto_ktp"
                                    data-upload-container="#upload_ktp"
                                    data-upload-url="{{ route('v2.upload', 'ktp_kredit') }}">
                                <button type="button" class="btn btn-sm btn-block btn-primary"
                                    onclick="$('#foto_ktp').trigger('click')">Upload Foto Ktp</button>
                            </div>
                        </x-cms.card>
                    </div>
                    <div class="col-12" style="order: 2">
                        <x-cms.card id="leasing_info" title="Detail Permohonan Kredit">
                            <div class="form-group col-12">
                                <div id="product_preview"
                                    style="background-color:rgb(219, 219, 219); overflow:hidden;height: 260px;"
                                    class="d-flex justify-content-center align-items-center">
                                    <div class="container mx-5 bg-white">
                                        <div class="d-flex">
                                            <a class="bg-grey d-block" id="car_link" href="" target="_blank"
                                                style="height: 200px; width: 200px" title="Lihat Detail Mobil di tab baru">
                                                <img src="" id="default_image_url"
                                                    style="height: 100%; width: 100%; object-fit:contain;">
                                            </a>
                                            <div class="p-4 w-100" style="position: relative">
                                                <span class="h4" id="car_preview_name">-</span>
                                                <div class="text-muted">
                                                    <span>Tahun Pembuatan : <b id="car_preview_tahun_pembuatan"></b></span>
                                                    <br>
                                                    <span>Harga OTR (diskon) : <b
                                                            id="car_preview_price_after_discount"></b>
                                                    </span>
                                                </div>
                                                <div style="position: absolute; right: 0; bottom: 0" class="p-4">
                                                    <span id="car_preview_showroom_name">-</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <label class="col-form-label">Pilih Mobil</label>
                                <select name="product_id" id="product_id" class="select2" data-no-edit
                                    data-detail-url="{{ route('admin.product.detail', '') }}">
                                    <option value="{{ $res->product_id ?? '' }}">
                                        {{ $res->product->name ?? '-- Pilih Mobil --' }}</option>
                                    @foreach ($products as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-6">
                                <label for="">Harga OTR (Termasuk Diskon)</label>
                                <input type="text" class="form-control" id="otr_price" name="otr_price" cemes-cast="price"
                                    inputmode="numeric" value="{{ currency_IDR($res->otr_price, '') ?? '' }}">
                            </div>
                            <div class="form-group col-6">
                                <label for="">Tahun Kendaraan</label>
                                <input type="text" class="form-control" id="vehicle_year" name="vehicle_year"
                                    value="{{ $res->vehicle_year ?? '' }}" inputmode="numeric">
                            </div>
                            <div class="form-group col-4">
                                <label class="col-form-label">Bank Penyedia</label>
                                <select class="form-control form-control-sm" name="leasing_provider"
                                    id="leasing_provider">
                                    <option value="{{ $res->leasing_provider }}">{{ $res->leasing_provider }}</option>
                                    <option value="BFI_FINANCE">BFI Finance</option>
                                </select>
                            </div>
                            <div class="form-group col-4">
                                <label class="col-form-label">Angsuran Dibayar Di Belakang (ADDB)</label>
                                <select class="form-control form-control-sm" name="payment_type" id="payment_type"
                                    data-tenor-input="#tenor">
                                    <option value="{{ $res->payment_type }}">
                                        {{ 'ADDB ' . $res->payment_type ?? '-- Pilih ADDB --' }}</option>
                                    <option value="0">ADDB 0</option>
                                    <option value="1">ADDB 1</option>
                                </select>
                            </div>
                            <div class="form-group col-4">
                                <label class="col-form-label">Tenor (bulan)</label>
                                <select class="form-control form-control-sm" name="tenor" id="tenor">
                                    @if ($res->tenor)
                                        <option value="{{ $res->tenor }}">{{ $res->tenor . ' bulan' }}</option>
                                    @endif
                                    <option value="">-- Pilih Tenor --</option>
                                </select>
                            </div>
                            <div class="form-group col-12 col-sm-6">
                                <label class="col-form-label">Jenis Asuransi</label>
                                <select name="insurance_type" id="insurance_type" class="select2">
                                    <option value="{{ $res->insurance_type }}">{{ $res->insurance_type }}</option>
                                    <option value="TLO">TLO</option>
                                    <option value="ARK">ALLRISK</option>
                                    <option value="COMBINE">COMBINE</option>
                                </select>
                            </div>
                            <div class="form-group col-12 col-sm-6">
                                <label class="col-form-label">Wilayah Asuransi</label>
                                <select name="insurance_area" id="insurance_area" class="select2">
                                    <option value="AREA_2" {{ $res->insurance_area == 'AREA_2' ? 'selected' : '' }}>DKI
                                        Jakarta, Jawa Barat dan Banten</option>
                                </select>
                            </div>
                            <div class="form-group col-2 col-sm-2">
                                <label class="col-form-label">DP %</label>
                                <input type="number" name="down_payment_percentage" min="20" max="100"
                                    id="down_payment_percentage" inputmode="numeric" class="form-control"
                                    data-target="#down_payment" data-cast="cleanNumber" data-otr-price="#otr_price"
                                    value="20">
                            </div>
                            <div class="form-group col-10 col-sm-4">
                                <label class="col-form-label">Uang Muka</label>
                                <input type="text" name="down_payment" id="down_payment" cemes-cast="price" inputmode="numeric"
                                    class="form-control" value="{{ $res->down_payment ?? '' }}">
                            </div>
                            <div class="form-group col-12 col-sm-6">
                                <label class="col-form-label">Angsuran</label>
                                <input type="text" name="installment" id="installment" cemes-cast="price" inputmode="numeric"
                                    class="form-control" value="{{ $res->installment ?? '' }}"">
                            </div>
                        </x-cms.card>
                    </div>
                    <div class="col-12" style="order: 999">
                        <div class="card">
                            <div class="card-body">
                                <button type="submit" class="btn btn-primary float-right">Simpan Perubahan
                                    Kredit</button>
                                <a href="{{ route('admin.lease.index') }}" class="btn btn-default">Cancel</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="col-6">
                <form method="POST" action="{{ route('admin.lease.update.status', $res->id) }}" cemes="form" cemes-redirect="reload" class="row" >
                    <div class="col-12" style="order: 1">
                        <x-cms.card id="status_history" title="History Status">
                            <div class="timeline col-12">
                                @foreach ($history as $k => $items)
                                    <div class="time-label">
                                        <span class="bg-primary">{{ $k }}</span>
                                    </div>
                                    @foreach ($items as $h)
                                        <div>

                                            <i class="fas fa-envelope bg-orange text-white"></i>
                                            <div class="timeline-item">
                                                <span class="time">
                                                    <i class="fas fa-clock"></i>
                                                    {{ $h->for_humans ?? '-' }}
                                                </span>
                                                <h3 class="timeline-header"><a href="#">{{ $h->status->name }}</a>
                                                </h3>
                                                <div class="timeline-body">
                                                    <div class="col-12">
                                                        {{ $h->notes }}
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    @endforeach
                                @endforeach

                                <div>
                                    <i class="fas fa-clock bg-gray"></i>
                                </div>
                            </div>
                        </x-cms.card>
                        <x-cms.card id="status_form" title="Update Status Permohonan">
                            <div class="form-group col-12">
                                <label for="status_id">Status</label>
                                <select name="status_id" id="status_id" class="form-control select">
                                    @foreach (leasingStatusOptions() as $opt)
                                        <option value="{{ $opt['id'] }}"
                                            {{ $opt['id'] == $res->current_status->id ? 'selected' : '' }}>
                                            {{ $opt['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-12">
                                <label for="notes">Catatan</label>
                                <textarea name="notes" id="" cols="30" rows="6" class="form-control"></textarea>
                            </div>
                            <div class="form-group col-12">
                                <button class="float-right btn btn-primary">Update Status</button>
                            </div>
                        </x-cms.card>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('javascript')
    <script>
        $(document).ready(function() {
            // productPreview($('select#product_id'), true); // NO Edit
            $('select#product_id').on('change', function(event) {
                productPreview(event.target);
            })
            $("select#payment_type").on('change', (e) => {
                changeAddb($(e.target))
                console.log("Change ADDB")
            })

            $(`#down_payment_percentage, select#payment_type,
            input#otr_price, input#vehicle_year,
            select#payment_type, select#tenor, select#insurance_type,
            select#insurance_area`).change(() => {
                changeDownPaymentPercentage($('#down_payment_percentage'))
                if ($('input#down_payment').val() == "") {
                    console.log($('input#down_payment').val());
                    return
                }
                calculate({
                    vehicle_year: $("input#vehicle_year").val(),
                    otr_price: $("input#otr_price").cleanVal(),
                    down_payment: $("input#down_payment").cleanVal(),
                    tenor: $("select#tenor").val(),
                    payment_type: $("select#payment_type").val(),
                    leasing_provider: $("select#leasing_provider").val(),
                    insurance_type: $("select#insurance_type").val(),
                    insurance_type: $("select#insurance_type").val(),
                    insurance_area: $("select#insurance_area").val(),
                })
            })

            $('#down_payment_percentage').on('keyup change', (e) => {
                changeDownPaymentPercentage($(e.target))
            })
        })
    </script>
@endsection