@extends('web.layouts.template')

@section('content')
    <main class="main">
        <form action="{{ route('v2.lease.store') }}" class="page-content container p-5 ajax_post" style="min-height: 100vh" data-index-url="{{ route('v2.detail.product', ($product->slug ?? $product_id)) }}">
            <div class="row">
                <div class="col-12 col-md-4 p-5 border border-2 container">
                    <div class="row">
                        <div class="col-12 text-center mb-5">
                            <img src="{{ $product->default_image_url }}" alt="" srcset="" style="height: 150px; width: auto">
                        </div>
                        <div class="col-12">
                            <span class="h1">{{ $product->name }}</span>
                            <br>
                            <span class="text-disabled">{{ $product->tahun_pembuatan. " • Mobil ".$product->condition}}</span>
                        </div>
                        <div class="col-12">
                            <hr>
                        </div>
                        <div class="col-12">
                            <input type="hidden" name="product_id" value="{{ $product->slug}}">
                            <input type="hidden" name="funding" value="{{ $request->funding}}">
                            <input type="hidden" name="otr_price" value="{{ $request->otr_price}}">
                            <input type="hidden" name="down_payment" value="{{ $request->down_payment}}">
                            <input type="hidden" name="tenor" value="{{ $request->tenor}}">
                            <input type="hidden" name="installment" value="{{ $request->installment}}">
                            <input type="hidden" name="insurance_type" value="{{ $request->insurance_type}}">
                            <input type="hidden" name="insurance_area" value="{{ $request->insurance_area}}">
                            <input type="hidden" name="leasing_provider" value="{{ $request->leasing_provider}}">
                            <input type="hidden" name="vehicle_year" value="{{ $product->tahun_pembuatan}}">
                            <input type="hidden" name="payment_type" value="{{ $request->payment_type}}">
                            <span class="h4">Nilai Pembiayaan</span> <br>
                            <span class="mb-5">{{ currency_IDR($request->funding) }}</span> <br><br>
                            <span class="h4">Harga Kendaraan</span> <br>
                            <span class="mb-5">{{ currency_IDR($request->otr_price) }}</span> <br><br>
                            <span class="h4">Uang Muka</span> <br>
                            <span class="mb-5">{{ currency_IDR($request->down_payment) }}</span> <br><br>
                            <span class="h4">Tenor</span> <br>
                            <span class="mb-5">{{ $request->tenor." Bulan" }}</span> <br><br>
                            <span class="h4">Angsuran</span> <br>
                            <span class="mb-5">{{ currency_IDR($request->installment)."/Bulan" }}</span> <br><br>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-8 p-5 border border-2 container">
                    <div class="row">
                        <div class="col-12 mb-5">
                            <span class="h1">Data Pribadi</span>
                        </div>
                        <div class="form-group col-12">
                            <label for="full_name">Nama Lengkap</label>
                            <input type="text" class="form-control" name="full_name" id="full_name"
                                value="{{ Auth::user()->name ?? '' }}">
                        </div>

                        <div class="form-group col-12">
                            <label for="identity_number">Nomor Identitas</label>
                            <input type="text" class="form-control" name="identity_number" id="identity_number"
                                placeholder="">
                        </div>


                        <div class="form-group col-6">
                            <label for="phone_number">Nomor HP</label>
                            <input type="text" class="form-control" name="phone_number" id="phone_number"
                                value="{{ request()->user()->phone ?? '' }}">
                        </div>


                        <div class="form-group col-6">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" name="email" id="email"
                                value="{{ request()->user()->email }}">
                        </div>


                        <div class="form-group col-6">
                            <label for="birthdate">Tanggal Lahir</label>
                            <input type="date" class="form-control" name="birthdate" id="birthdate">
                        </div>

                        <div class="form-group col-6">
                            <label for="marital_status">Status Pernikahan</label>
                            <select name="marital_status" id="marital_status" class="form-control">
                                <option value="">-- Pilih --</option>
                                <option value="MENIKAH">Menikah</option>
                                <option value="BELUM MENIKAH">Belum Menikah</option>
                            </select>
                        </div>

                        <div class="form-group col-12">
                            <label for="address">Alamat Tinggal</label>
                            <textarea name="address" id="address" cols="30" rows="10" class="form-control"></textarea>
                        </div>

                        <div class="col-12 my-5">
                            <span class="h1">Dokumen Pendukung</span>
                        </div>
                        <div class="form-group col-12">
                            Untuk mendukung aplikasi anda, harap unggah berikut beserta kelengkapan data yang diperlukan.
                            <br>
                            <br>
                            <div class="border border-2 p-4 d-flex justify-content-between align-items-center">
                                <span>
                                    Foto e-KTP (e-Kartu Tanda Penduduk) Pemohon
                                </span>
                                <a style="cursor: pointer" onclick="$(`input[name='foto_ktp_container']`).trigger('click')" class="btn btn-sm btn-default">
                                    Upload
                                </a>
                            </div>
                            <div id="preview-container" class="mb-2">

                            </div>
                            <input hidden type="file" name="foto_ktp_container" id="foto_ktp" accept=".png,.jpg,.jpeg" onchange="uploadKTP(this)" data-target="#preview-container">
                            <br>
                            Gunakan hanya file jpeg dan png dengan ukuran file tidak lebih dari 2MB
                        </div>

                        <div class="col-12">
                            <hr>
                            <div class="form-group d-flex align-items-start">
                                <input type="checkbox" name="consent" id="consent" onchange="toggleConsent(this)" class="mt-2" style="-webkit-appearance: checkbox" data-target="#submit-button">
                                <p class="ml-5 p-0">
                                    Dengan ini saya menyatakan telah menyetujui dan memahami Perlindungan Data Pribadi dan mengizinkan Carshow.id untuk memproses data pribadi saya sesuai dengan kebijakan <a href="#">Perlindungan Data Pribadi</a> yang berlaku serta bersedia untuk dihubungi Carshow.id dan menerima penawaran produk atau layanan terkait.
                                </p>
                            </div>
                            <div class="d-flex justify-content-between">
                                <a href="/" class="btn btn-sm btn-default">Batalkan</a>
                                <button class="btn btn-primary btn-sm disabled" id="submit-button">Submit Permohonan Kredit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </main>
@endsection


@section('script')
    <script>
        function removeParent(el) {
            $(el).closest('#preview-upload-ktp').remove();
        }

        function toggleConsent(el) {
            $el = $(el)
            button = $($($el).data('target'))
            console.log(button);
            console.log($el);
            let checked = $el.prop('checked') == true;
            console.log(checked);
            if (checked) {
                button.removeClass("disabled")
            } else {
                button.addClass("disabled")
            }
        }

        async function uploadKTP(el) {
            console.log("Upload KTP");
            let $el = $(el);
            console.log($el);
            let previewTarget = $($el.data('target'));
            let image = $el.prop("files")[0];
            var fullPath = $el.val();
            var filename = fullPath.replace(/^.*[\\\/]/, '');
            console.log(previewTarget);

            let formData = new FormData();
            formData.append('userfile', image);
            let upload = await ajax_upload("{{ route('v2.upload', 'ktp_kredit') }}", formData);
            if (upload == false) {
                console.log("ERROR");
                return;
            }
            $(previewTarget).html(viewUploadedKTP(filename, upload.result.filename));
        }

function clear_error_text () {
    $('.input-error-text').remove()
}

        function viewUploadedKTP(filename, upload) {
            let result = `
            <div id="preview-upload-ktp" class="py-3 text-bd-left">
                ${filename}
                <input hidden name="foto_ktp" value="${upload}"/>
                <div class="float-right mr-2">
                    <a style="cursor: pointer" onclick="removeParent(this)">
                        <i class="fa fa-trash"></i>
                    </a>
                </div>
            </div>
            `
            return result
        }

        async function ajax_upload(uploadUrl, formData) {
            clear_error_text()
            $.ajaxSetup({
                processData: false,
                contentType: false
            });
            let status;
            let res;
            let result = await $.post(uploadUrl, formData)
            .done((data) => {
                res = data.result;
                console.log(res);
                return res
            })
            .fail((err) => {
                console.log(err)
                window.error_response(err)
                res = false;
                return res
            })
            return result;
        }
    </script>
@endsection