@extends('layouts.main')

@section('container')
    <form method="POST" action="{{ route('admin.lease.store') }}" class="container-fluid"
        cemes="form"
        cemes-redirect="{{ route('admin.lease.index') }}">
        @csrf
        <div class="row">
            <div class="col-12 col-sm-6">
                <x-cms.card id="personal_info" title="Data Pribadi Pemohon">
                    <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" class="form-control form-control-sm" name="identity_number" id="identity_number"
                            value="{{ old('identity_number', 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="tgl_lahir"
                            class="form-control form-control-sm tanggal"
                            value="{{ old('tgl_lahir', isset($res) ? tglDbToPhp($res->tgl_lahir) : '') }}">
                    </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 type="email" class="form-control form-control-sm" name="address" id="address"
                            value="{{ 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">
                        <label class="col-form-label">Jenis Kelamin</label>
                        <select name="jk" id="jk" class="form-control  form-control-sm">
                            <option value="Laki-laki"
                                {{ old('jk', isset($res) ? $res->jk : '') == 'Laki-laki' ? 'selected' : '' }}>
                                Laki-laki</option>
                            <option value="Perempuan"
                                {{ old('jk', isset($res) ? $res->jk : '') == 'Perempuan' ? 'selected' : '' }}>
                                Perempuan</option>
                        </select>
                    </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="" id="output" style="height: 260px; object-fit:contain">
                        </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 col-sm-6">
                <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-detail-url="{{ route('admin.product.detail', '') }}">
                            <option value="">-- 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" cemes-cast="price" name="otr_price" inputmode="numeric">
                    </div>
                    <div class="form-group col-6">
                        <label for="">Tahun Kendaraan</label>
                        <input type="text" class="form-control" id="vehicle_year" name="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="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="">-- 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">
                            <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="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">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-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" readonly name="down_payment" cemes-cast="price" id="down_payment" inputmode="numeric"
                            class="form-control">
                    </div>
                    <div class="form-group col-12 col-sm-6">
                        <label class="col-form-label">Angsuran</label>
                        <input type="text" name="installment" cemes-cast="price" id="installment" inputmode="numeric"
                            class="form-control">
                    </div>
                </x-cms.card>
            </div>
            <div class="card col-12">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary float-right">Submit</button>
                    <a href="{{ route('admin.lease.index') }}" class="btn btn-default">Cancel</a>
                </div>
            </div>
        </div>

    </form>
@endsection


@section('javascript')
    <script>
        $(document).ready(function() {
            $('select#product_id').on('ready change',function(event) {
                productPreview(event.target);
            })
            $("select#payment_type").on('ready 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('ready change',(e) => {
                changeDownPaymentPercentage($(e.target))
            })
        })

    </script>
@endsection