@extends('layouts.main')

{{-- @section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection --}}

@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
        <div class="card min-w-full">
            <div class="card min-w-full">
                <div class="card-header">
                    <h3 class="card-title">
                        Data Pembanding
                    </h3>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('surveyor.show', ['id' => request('pembanding')]) }}?form=data-pembanding"
                            class="btn btn-xs btn-info">
                            <i class="ki-filled ki-exit-left"></i> Back
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid gap-5">
            <div class="card-grid min-w-full" data-datatable="false" data-datatable-page-size="5"
                data-datatable-state-save="false" id="data-table" data-api-url="">
                <div class="card">
                    <div class="card-header py-5 flex-wrap flex justify-end">
                        <button id="addColumnBtn" class="btn btn-primary btn-sm">
                            <i class="ki-filled ki-plus"></i> Tambah Kolom
                        </button>
                        <button id="removeColumnBtn" class="btn btn-danger btn-sm ml-2" style="display: none;">
                            <i class="ki-filled ki-minus"></i> Hapus Kolom
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="scrollable-x-auto">
                            <table id="dataTable"
                                class="table table-auto table-border align-middle text-gray-700 font-medium text-sm"
                                data-datatable-table="true">
                                <thead>
                                    <tr>
                                        <th class="min-w-[250px]" data-datatable-column="code" style="min-width: 350px">
                                            <span class="sort"> <span class="sort-label"> Nama </span>
                                                <span class="sort-icon"> </span> </span>
                                        </th>
                                        <th class="min-w-[250px]" data-datatable-column="name" style="min-width: 350px">
                                            <span class="sort"> <span class="sort-label"> Objek Penilaian </span>
                                                <span class="sort-icon"> </span> </span>
                                        </th>
                                        <th class="min-w-[50px]" data-datatable-column="actions"
                                            style="min-width: 350px"id="dataPembanding2Header">
                                            Data Pembanding 1
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            Foto
                                        </td>
                                        <td>
                                            @php
                                                $formFoto = json_decode($forminspeksi['foto_form'], true);

                                                $formIns = json_decode($forminspeksi['data_form'], true);

                                            @endphp

                                            @if (isset($formFoto['object_jaminan']) &&
                                                    count($formFoto['object_jaminan']) > 0 &&
                                                    isset($formFoto['object_jaminan'][0]['foto_object']))
                                                <img src="{{ asset('storage/' . $formFoto['object_jaminan'][0]['foto_object']) }}"
                                                    class="img-responsive" alt="Gambar Pendamping"
                                                    style="width: 10rem; height: 10rem;" id="uploadedImage1">
                                            @else
                                                <img src="#" class="img-responsive" alt="Gambar Pendamping"
                                                    style="width: 10rem; height: 10rem; display: none;" id="uploadedImage1">
                                            @endif

                                            <input type="file" class="file-input mt-2" placeholder=""
                                                onchange="previewImage(event, 'uploadedImage1')" />
                                        </td>
                                        <td class="text-center">
                                            <img src="" class="img-responsive" alt="Gambar Pendamping"
                                                style="width: 10rem; height: 10rem; display: none;" id="uploadedImage2">
                                            <input type="file" class="file-input" placeholder=""
                                                onchange="previewImage(event, 'uploadedImage2')" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <p>Alamat</p>
                                            <p>Desa</p>
                                            <p>Kecamatan</p>
                                            <p>Kabupaten</p>
                                            <p>Provinsi</p>
                                        </td>
                                        <td>
                                            <input type="text" class="input" value="{{ isset($formIns['nama_jalan']) ? $formIns['nama_jalan'] . ' ' . $formIns['desa_kelurahan'] : ""}}" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" value="{{ isset($formIns['kecamatan']) ? $formIns['kecamatan'] : ""}}" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" value="{{ isset($formIns['kota_kabupaten']) ? $formIns['kota_kabupaten'] : ""}}" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" value="{{ isset($formIns['provinsi']) ? $formIns['provinsi'] : ""}}" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Tahun Penilaian
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Luas Tanah
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Luas Bangunan
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Tahun Bangunan
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            Estimasi Tahun Visual
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            Kepemilikan
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            Harga
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Tinggi Lantai
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            Lebar Depan
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            Lebar Jalan
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Sumber
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Nomor tlp
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Titik Lokasi
                                        </td>
                                        <td>
                                            <div class="flex items-center">
                                                <input type="text" class="input" placeholder="Objek Penilaian" value="{{ isset($formIns['kordinat_lat']) ? $formIns['kordinat_lat'] : ""}}" />
                                                <input type="text" class="input" placeholder="Objek Penilaian" value="{{ isset($formIns['kordinat_lng']) ? $formIns['kordinat_lng'] : ""}}" />
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="flex items-center">
                                                <input type="text" class="input" placeholder="Data pembanding"  />
                                                <input type="text" class="input" placeholder="Data pembanding"  />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Link Internet
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">Lokasi</td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <p>Jarak Ke jalan utama</p>
                                            <p>Lebar jalan depan aset (m)</p>
                                            <p>Posisi kavling</p>
                                            <p>Tingkat Keramaian (Occupancy)</p>
                                        </td>
                                        <td>


                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian"  value="{{ isset($formIns['jarak_jalan_utama']) ? $formIns['jarak_jalan_utama'] : ""}}" />



                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian"  value="{{ isset($formIns['jarak_cbd_point']) ? $formIns['jarak_cbd_point'] : ""}}" />


                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian"  value="{{ isset($formIns['posisi_kavling']) ? $formIns['posisi_kavling'][0] : ""}}" />

                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian"  value="{{ isset($formIns['tingkat_keramaian']) ? $formIns['tingkat_keramaian'][0] : ""}}" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">Karakteristik Fisik</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <p>Kondisi Fisik Tanah</p>
                                            <p>Beda Ketinggian dengan Jalan</p>
                                            <p>Bentuk Tanah</p>
                                            <p>Lebar Depan</p>
                                            <p>Fasos Fasum</p>
                                            <p>Lain-lain</p>
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" value="{{ isset($formIns['kondisi_fisik_tanah']) ? $formIns['kondisi_fisik_tanah'][0] : ""}}" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" value="{{ isset($formIns['ketinggian_jalan']) ? $formIns['ketinggian_jalan'][0] : ""}}"  />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" value="{{ isset($formIns['bentuk_tanah']) ? $formIns['bentuk_tanah'][0] : ""}}" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" value="{{ isset($formIns['bentuk_tanah']) ? $formIns['bentuk_tanah'][0] : ""}}" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Karakteristik Ekonomi
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                        </td>
                                        <td class="text-center">
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <p>Pengunaan</p>
                                            <p>Zonasi/Tata Kota</p>
                                            <p> KDB, KLB, KTB, KDH & Peraturan Lainnya</p>
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Objek Penilaian" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" />
                                        </td>
                                        <td>
                                            <input type="text" class="input" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Data Pembanding 1" />
                                            <input type="text" class="input mt-2" placeholder="Objek Penilaian" />
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            let columnCount = 1;

            document.getElementById('addColumnBtn').addEventListener('click', function() {
                columnCount++;

                // Create new header cell
                const newHeader = document.createElement('th');
                newHeader.className = 'min-w-[350px] text-center';
                newHeader.style.minWidth = '350px';
                newHeader.textContent = `Data Pembanding ${columnCount}`;
                document.querySelector('#dataTable thead tr').appendChild(newHeader);

                document.getElementById('removeColumnBtn').style.display = 'inline-block';


                const rows = document.querySelectorAll('#dataTable tbody tr');
                rows.forEach((row, index) => {
                    const newCell = document.createElement('td');
                    newCell.className = 'text-center';

                    if (index === 0) {
                        const imgElement = document.createElement('img');
                        imgElement.src = '';
                        imgElement.className = 'img-responsive';
                        imgElement.alt = 'Gambar Pendamping';
                        imgElement.style.width = '10rem';
                        imgElement.style.height = '10rem';
                        imgElement.style.display = 'none';
                        imgElement.id = `uploadedImage${columnCount}-${index + 1}`;

                        const fileInput = document.createElement('input');
                        fileInput.type = 'file';
                        fileInput.className = 'file-input';
                        fileInput.placeholder = '';
                        fileInput.onchange = function(event) {
                            previewImage(event, imgElement.id);
                        };

                        newCell.appendChild(imgElement);
                        newCell.appendChild(fileInput);
                    } else {
                        // Other rows get text inputs
                        const numInputs = row.querySelectorAll('input').length;
                        for (let i = 0; i < numInputs; i++) {
                            const textInput = document.createElement('input');
                            textInput.type = 'text';
                            textInput.className = 'input mt-2';
                            textInput.placeholder = `Data Pembanding ${columnCount}`;
                            newCell.appendChild(textInput);
                        }
                    }

                    row.appendChild(newCell);
                });

                // Update colspan on label row
                const colspanRow = document.createElement('tr');
                const colspanCell = document.createElement('td');
                colspanCell.colSpan = 3 + columnCount - 1;
                colspanCell.textContent = `Data Pembanding ${columnCount}`;
                colspanRow.appendChild(colspanCell);
                document.querySelector('#dataTable tbody').insertBefore(colspanRow, rows[0]);
            });

            document.getElementById('removeColumnBtn').addEventListener('click', function() {
                if (columnCount > 1) { // Pastikan ada kolom yang bisa dihapus
                    columnCount--; // Decrement jumlah kolom


                    const headers = document.querySelectorAll('#dataTable thead tr th');
                    headers[headers.length - 1].remove();
                    const rows = document.querySelectorAll('#dataTable tbody tr');
                    rows.forEach(row => {
                        const cells = row.querySelectorAll('td');
                        cells[cells.length - 1].remove();
                    });
                    if (columnCount === 1) {
                        document.getElementById('removeColumnBtn').style.display = 'none';
                    }
                }
            });

            function previewImage(event, imgElementId) {
                const file = event.target.files[0];
                const imgElement = document.getElementById(imgElementId);

                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        imgElement.src = e.target.result;
                        imgElement.style.display = 'block';
                    }
                    reader.readAsDataURL(file);
                }
            }
        </script>
    </div>
@endsection