@extends(backpack_view('blank'))

@section("content")
<div>
    <div>
        <section class="container-fluid">
            <h2>
                <span class="text-capitalize">Detail Object Penilaian</span>
            </h2>
        </section>
        <div id="formObjectPenilaian">

            <div class="card">
                <div class="card-header fw-bold bg-primary text-white">
                    Data Object Penilaian
                </div>
                <div class="card-body">
                    <div class="row">
                        <input type="hidden" id="object_id" value="{{ $objectDetailId ?? 0 }}">
                        <input type="hidden" id="pathUrl" value="{{url('')}}">

                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="jenis_objek">Jenis Objek</label>
                                <select name="jenis_objek" id="jenis_objek" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="subjenis_objek">Subjenis Objek</label>
                                <select name="subjenis_objek" id="subjenis_objek" class="form-control"></select>
                                <div id="contentSubJenisOther" class="my-2"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="klasifikasi_objek">Klasifikasi Objek</label>
                                <select name="klasifikasi_objek" id="klasifikasi_objek" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="kepemilikan_objek">Kepemilikan Objek</label>
                                <select name="kepemilikan_objek" id="kepemilikan_objek" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="transaksi_penawaran">Transaksi/Penawaran</label>
                                <select name="transaksi_penawaran" id="transaksi_penawaran" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="jenis_dok_kepemilikan">Jenis Dokumen Kepemilikan</label>
                                <select name="jenis_dok_kepemilikan" id="jenis_dok_kepemilikan" class="form-control"></select>
                                <div id="contentDokKepemilikan" class="my-2"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="no_dok_kepemilikan">No. Dokumen kepemilikan</label>
                                <input type="text" name="no_dok_kepemilikan" id="no_dok_kepemilikan" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="nama_pemilik_objek">Nama Pemilik Object Penilaian</label>
                                <input type="text" class="form-control" name="nama_pemilik_objek" id="nama_pemilik_objek">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="tgl_terbit_dok_kepemilikan">Tanggal Terbit Dokumen Kepemilikan</label>
                                <input type="date" name="tgl_terbit_dok_kepemilikan" id="tgl_terbit_dok_kepemilikan" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="tgl_jatuh_tempo_kepemilikan">Tanggal Jatuh Tempo Dokumen Kepemilikan</label>
                                <input type="date" name="tgl_jatuh_tempo_kepemilikan" id="tgl_jatuh_tempo_kepemilikan" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="luas_tanah">Luas Tanah (m2)</label>
                                <input type="number" name="luas_tanah" id="luas_tanah" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="luas_bangunan">Luas Bangunan (m2)</label>
                                <input type="number" name="luas_bangunan" id="luas_bangunan" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="jumlah_unit">Jumlah Unit</label>
                                <input type="number" class="form-control" name="jumlah_unit" id="jumlah_unit">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="debitur_objek">Debitur</label>
                                <input type="text" class="form-control" name="debitur_objek" id="debitur_objek">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="no_dok_imb">No. Dokumen IMB</label>
                                <input type="text" class="form-control" name="no_dok_imb" id="no_dok_imb">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="tgl_terbit_imb">Tanggal Terbit IMB</label>
                                <input type="date" name="tgl_terbit_imb" id="tgl_terbit_imb" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="metode_penilaian">Metode Penilaian</label>
                                <select name="metode_penilaian" id="metode_penilaian" class="form-control"></select>
                                <div id="contentPenilaianLainnya" class="my-2"></div>
                            </div>
                        </div>
                        <div class="col-md-6" id="sumber_pembanding_form">
                            <div class="my-2">
                                <label for="sumber_pembanding">Sumber Pembanding</label>
                                <select name="sumber_pembanding" id="sumber_pembanding" class="form-control"></select>
                                <div id="contentPembandingLainnya" class="my-2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header fw-bold bg-primary text-white">
                    Data Nilai Transaksi Object
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="no_kontrak" class="fw-bold">Tanah</label>
                        </div>
                        <div class="col-md-6">
                            <label for="no_kontrak" class="fw-bold">Bangunan</label>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="tanah_pasar_rpm2">Pasar (Rp/m2)</label>
                                <input type="text" name="tanah_pasar_rpm2" id="tanah_pasar_rpm2" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="tanah_pasar_rp">Pasar (Rp)</label>
                                <input type="text" name="tanah_pasar_rp" id="tanah_pasar_rp" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="bangunan_pasar_rpm2">Pasar (Rp/m2)</label>
                                <input type="text" name="bangunan_pasar_rpm2" id="bangunan_pasar_rpm2" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="bangunan_pasar_rp">Pasar (Rp)</label>
                                <input type="text" name="bangunan_pasar_rp" id="bangunan_pasar_rp" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="tanah_likuidasi_rpm2">Likuidasi (Rp/m2)</label>
                                <input type="text" name="tanah_likuidasi_rpm2" id="tanah_likuidasi_rpm2" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="tanah_likuidasi_rp">Likuidasi (Rp)</label>
                                <input type="text" name="tanah_likuidasi_rp" id="tanah_likuidasi_rp" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="bangunan_likuidasi_rpm2">Likuidasi (Rp/m2)</label>
                                <input type="text" name="bangunan_likuidasi_rpm2" id="bangunan_likuidasi_rpm2" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="bangunan_likuidasi_rp">Likuidasi (Rp)</label>
                                <input type="text" name="bangunan_likuidasi_rp" id="bangunan_likuidasi_rp" class="form-control currency">
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="no_kontrak" class="fw-bold">Total Transaksi (Tanah + Bangunan)</label>
                        </div>
                        <div class="col-md-6">
                            <label for="no_kontrak" class="fw-bold">Selain Tanah dan Bangunan</label>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="total_pasar_rpm2">Pasar (Rp/m2)</label>
                                <input type="text" name="total_pasar_rpm2" id="total_pasar_rpm2" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="total_pasar_rp">Pasar (Rp)</label>
                                <input type="text" name="total_pasar_rp" id="total_pasar_rp" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="total_pasar_other">Pasar (Rp)</label>
                                <input type="text" name="total_pasar_other" id="total_pasar_other" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="total_likuidasi_other">Likuidasi (Rp)</label>
                                <input type="text" name="total_likuidasi_other" id="total_likuidasi_other" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="total_likuidasi_rpm2">Likuidasi (Rp/m2)</label>
                                <input type="text" name="total_likuidasi_rpm2" id="total_likuidasi_rpm2" class="form-control currency">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="my-2">
                                <label for="total_likuidasi_rp">Likuidasi (Rp)</label>
                                <input type="text" name="total_likuidasi_rp" id="total_likuidasi_rp" class="form-control currency">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header fw-bold bg-primary text-white">
                    Lokasi Object Penilaian
                </div>
                <div class="card-body">
                    <div class="row">
                        <label for="no_kontrak" class="fw-bold">Alamat</label>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="provinsi">Provinsi</label>
                                <select name="provinsi" id="provinsi" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="kota_kab">Kota/Kabupaten</label>
                                <select name="kota_kab" id="kota_kab" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="kecamatan">Kecamatan</label>
                                <select name="kecamatan" id="kecamatan" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="kelurahan">Kelurahan</label>
                                <select name="kelurahan" id="kelurahan" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="jalan">Jalan</label>
                                <input type="text" name="jalan" id="jalan" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="no_blok">No dan Blok</label>
                                <input type="text" name="no_blok" id="no_blok" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="komplek">Komplek (Jika dalam komplek perumahan)</label>
                                <input type="text" name="komplek" id="komplek" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="rt_rw">RT/RW</label>
                                <input type="text" name="rt_rw" id="rt_rw" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="kode_pos">Kode Pos</label>
                                <input type="text" name="kode_pos" id="kode_pos" class="form-control">
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <label for="no_kontrak" class="fw-bold">Lokasi</label>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="peta_lokasi">Peta Lokasi (Screenshot dari Google Map, maks. 250KB)</label>
                                <input type="file" name="peta_lokasi" id="peta_lokasi" class="form-control filefotoobject">
                                <div class="col-sm-12">
                                    <div class="my-2">
                                        <img src="" alt="Foto Peta Lokasi Properti" height="200px" id="img-peta-lokasi" title="Foto Peta Lokasi Properti">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="objek_terdekat">Fasum/Bangunan penting dekat objek penilaian</label>
                                <input type="text" name="objek_terdekat" id="objek_terdekat" class="form-control">
                            </div>
                        </div>
                        {{--DISINI MAPS--}}
                        <div class="col-md-12">
                            <div class="my-2">
                                <div id="map" class="w-100" style="height: 420px !important;"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="latitude">Latitude</label>
                                <input type="text" name="latitude" id="latitude" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="longitude">Longitude</label>
                                <input type="text" name="longitude" id="longitude" class="form-control" readonly>
                            </div>
                        </div>
{{--                        <div class="col-md-6">--}}
{{--                            <div class="my-2">--}}
{{--                                <label for="batas_1_angin">Batas 1 Arah Mata Angin</label>--}}
{{--                                <input type="text" name="batas_1_angin" id="batas_1_angin" class="form-control">--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="batas_1_info">Info Batas Utara</label>
                                <input type="text" name="batas_1_info" id="batas_1_info" class="form-control">
                            </div>
                        </div>
{{--                        <div class="col-md-6">--}}
{{--                            <div class="my-2">--}}
{{--                                <label for="batas_2_angin">Batas 2 Arah Mata Angin</label>--}}
{{--                                <input type="text" name="batas_2_angin" id="batas_2_angin" class="form-control">--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="batas_2_info">Info Batas Selatan</label>
                                <input type="text" name="batas_2_info" id="batas_2_info" class="form-control">
                            </div>
                        </div>
{{--                        <div class="col-md-6">--}}
{{--                            <div class="my-2">--}}
{{--                                <label for="batas_3_angin">Batas 3 Arah Mata Angin</label>--}}
{{--                                <input type="text" name="batas_3_angin" id="batas_3_angin" class="form-control">--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="batas_3_info">Info Batas Barat</label>
                                <input type="text" name="batas_3_info" id="batas_3_info" class="form-control">
                            </div>
                        </div>
{{--                        <div class="col-md-6">--}}
{{--                            <div class="my-2">--}}
{{--                                <label for="batas_4_angin">Batas 4 Arah Mata Angin</label>--}}
{{--                                <input type="text" name="batas_4_angin" id="batas_4_angin" class="form-control">--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="batas_4_info">Info Batas Timur</label>
                                <input type="text" name="batas_4_info" id="batas_4_info" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header fw-bold bg-primary text-white">
                    Kondisi Objek Penilaian
                </div>
                <div class="card-body">
                    <div class="row">
                        <label for="no_kontrak" class="fw-bold">Foto Objek Penilaian</label>
                        <div class="col-md-6 filefotoobject">
                            <div class="my-2">
                                <label for="tampak_depan">Tampak Depan (maks. 250KB)</label>
                                <input type="file" name="tampak_depan" id="tampak_depan" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 filefotoobject">
                            <div class="my-2">
                                <label for="tampak_sekitar">Tampak Lingkungan Sekitar (maks. 250KB)</label>
                                <input type="file" name="tampak_sekitar" id="tampak_sekitar" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 filefotoobject">
                            <div class="my-2">
                                <label for="tampak_dalam">Tampak Dalam (maks. 250KB)</label>
                                <input type="file" name="tampak_dalam" id="tampak_dalam" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 filefotoobject"></div>
                        <div class="col-md-4">
                            <div class="my-2">
                                <img src="" alt="Foto Tampak Depan" height="200px" id="img_tampak_depan" title="Foto Tampak Depan">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="my-2">
                                <img src="" alt="Foto Tampak Dalam" height="200px" id="img_tampak_dalam" title="Foto Tampak Dalam">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="my-2">
                                <img src="" alt="Foto Tampak Sekitar" height="200px" id="img_tampak_sekitar" title="Foto Tampak Sekitar">
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <label for="no_kontrak" class="fw-bold">Detail Kondisi Objek</label>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="kondisi_objek">Kondisi Objek</label>
                                <select name="kondisi_objek" id="kondisi_objek" class="form-control"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="lantai">Jumlah Lantai</label>
                                <input type="number" name="lantai" id="lantai" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="kamar_tidur">Jumlah Kamar Tidur</label>
                                <input type="number" name="kamar_tidur" id="kamar_tidur" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="kamar_mandi">Jumlah Kamar Mandi</label>
                                <input type="number" name="kamar_mandi" id="kamar_mandi" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="daya_listrik">Daya Listrik PLN (Watt)</label>
                                <input type="number" name="daya_listrik" id="daya_listrik" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="sumber_air">Sumber Air Bersih</label>
                                <select name="sumber_air" id="sumber_air" class="form-control"></select>
                                <div id="contentSumberAir" class="my-2"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="peruntukan_lahan">Peruntukan Lahan</label>
                                <select name="peruntukan_lahan" id="peruntukan_lahan" class="form-control"></select>
                                <div id="contentPeruntukanLahan" class="my-2"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="pelengkap_bangunan">Sarana Pelengkap Bangunan</label>
                                <input type="text" name="pelengkap_bangunan" id="pelengkap_bangunan" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="my-2">
                                <label for="keterangan">Keterangan</label>
                                <textarea name="keterangan" id="keterangan" class="form-control" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex w-100 justify-content-between my-2">
                <a href="{{url('/tasks')}}" class="btn btn-default">Back</a>
                <div>
                    <button type="button" id="btnSimpanObjectDetail" class="btn btn-primary" onclick="prepareDataObjectDetail()">Simpan</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('after_scripts')
    @include('components.script.gmaps')
    @include('components.script.axios')
    @include('components.script.select2')
    @include('components.script.jqueryValidation')
    @include('components.script.sweetalert')
    @include('components.script.general')
    @include('tasks.tabs.js.objek_penilaian_js')
@endsection