@extends('layouts.main')

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

@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5">
        <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="">

                <form id="dataPembandingForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
                    <input type="hidden" name="type" value="tanah">
                    <input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">

                    <div class="card">
                        <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')]) }}"
                                    class="btn btn-xs btn-info">
                                    <i class="ki-filled ki-exit-left"></i> Kembali
                                </a>
                            </div>
                        </div>

                        <div class="card-header py-5 flex-wrap flex justify-end">
                            <button type="button" id="addColumnBtn" class="btn btn-primary btn-sm">
                                <i class="ki-filled ki-plus"></i> Tambah Pembanding
                            </button>
                            <button type="button" id="removeColumnBtn" class="btn btn-danger btn-sm ml-2"
                                style="display: none;">
                                <i class="ki-filled ki-minus"></i> Hapus Pembanding
                            </button>
                        </div>

                        {{-- @php
                            print_r($inspectionData);
                        @endphp --}}

                        <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">
                                    <thead class="bg-gray-50 sticky top-0">
                                        <tr>
                                            <th class="px-4 py-3 min-w-[200px]">Parameter</th>
                                            <th class="px-4 py-3 min-w-[250px]">Objek Penilaian</th>
                                            <th class="px-4 py-3 min-w-[250px]">Data Pembanding 1</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Informasi Dasar -->
                                        <tr class="bg-gray-100">
                                            <td colspan="3" class="px-4 py-2 font-semibold">Informasi Dasar</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Foto</td>
                                            <td class="px-4 py-2">
                                                <div class="flex flex-col gap-2">
                                                    <img id="uploadedImage1"
                                                        src="{{ isset($fotoForm['object_jaminan'][0]['foto_objek']) ? asset('storage/' . $fotoForm['object_jaminan'][0]['foto_objek']) : '' }}"
                                                        class="max-w-[200px] {{ isset($fotoForm['object_jaminan'][0]['foto_objek']) ? '' : 'hidden' }}"
                                                        alt="Uploaded Image">
                                                    <input type="file"
                                                        name="foto_objek"
                                                        class="file-input"
                                                        accept="image/*"
                                                        onchange="previewImage(this, 'uploadedImage1')">
                                                </div>
                                            </td>

                                            <td class="px-4 py-2">
                                                <div class="flex flex-col gap-2">
                                                    <img id="uploadedImage2" class="max-w-[200px] hidden"
                                                        alt="Pembanding Image">
                                                    <input type="file" name="foto_objek_pembanding[]" class="file-input"
                                                        accept="image/*" onchange="previewImage(this, 'uploadedImage2')">
                                                </div>
                                            </td>
                                        </tr>



                                        <!-- Data Properti -->
                                        <tr class="bg-gray-100">
                                            <td colspan="3" class="px-4 py-2 font-semibold">Data Properti</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Jenis Aset</td>
                                            <td class="px-4 py-2">
                                                <select name="jenis_aset" class="select">
                                                    <option value="">Pilih Jenis Aset</option>
                                                    @foreach ($data['jenisJaminan'] as $item)
                                                    <option value="{{ $item->name }}" {{ ($inspectionData['asset']['jenis_asset']['sesuai'] ?? '') == $item->name ? 'selected' : '' }}>{{ $item->name }}</option>
                                                    @endforeach

                                                </select>
                                            </td>
                                            <td class="px-4 py-2">
                                                <select name="jenis_aset_pembanding[]" class="select">
                                                    <option value="">Pilih Jenis Aset</option>
                                                    @foreach ($data['jenisJaminan'] as $item)
                                                    <option value="{{ $item->name }}" {{ ($inspectionData['jenis_aset'] ?? '') == $item->name ? 'selected' : '' }}>{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Luas Tanah (m²)</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="luas_tanah" class="input number-format"
                                                    value="{{ $inspectionData['tanah']['luas_tanah']['tidak sesuai'] ?? ($inspectionData['tanah']['luas_tanah']['sesuai'] ?? '') }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="luas_tanah_pembanding[]"
                                                    class="input number-format">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Luas Bangunan (m²)</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="luas_tanah_bagunan" class="input number-format"
                                                    value="{{ $inspectionData['bangunan']['luas_tanah_bagunan']['tidak sesuai'] ?? ($inspectionData['bangunan']['luas_tanah_bagunan']['sesuai'] ?? '') }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="luas_bangunan_pembanding[]"
                                                    class="input number-format">
                                            </td>
                                        </tr>

                                        <!-- Informasi Harga -->
                                        <tr class="bg-gray-100">
                                            <td colspan="3" class="px-4 py-2 font-semibold">Informasi</td>
                                        </tr>

                                        <tr>
                                            <td class="px-4 py-2">Status Narasumber</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="nama_nara_sumber" class="input"
                                                    value="{{ $inspectionData['nama_nara_sumber'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="status_nara_sumber_pembanding[]"
                                                    class="input">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Nama Narasumber</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="nama_nara_sumber" class="input"
                                                    value="{{ $inspectionData['nama_nara_sumber'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="nama_nara_sumber_pembanding[]"
                                                    class="input">
                                            </td>
                                        </tr>


                                        <!-- Lokasi -->
                                        <tr class="bg-gray-100">
                                            <td colspan="3" class="px-4 py-2 font-semibold">Lokasi</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Koordinat</td>
                                            <td class="px-4 py-2">
                                                <div class="grid grid-cols-2 gap-2">
                                                    <input type="text" name="kordinat_lat" class="input"
                                                        placeholder="Latitude"
                                                        value="{{ $inspectionData['asset']['kordinat_lat'] ?? '' }}">
                                                    <input type="text" name="kordinat_lng" class="input"
                                                        placeholder="Longitude"
                                                        value="{{ $inspectionData['asset']['kordinat_lng'] ?? '' }}">
                                                </div>
                                            </td>
                                            <td class="px-4 py-2">
                                                <div class="grid grid-cols-2 gap-2">
                                                    <input type="text" name="kordinat_lat_pembanding[]" class="input"
                                                        placeholder="Latitude">
                                                    <input type="text" name="kordinat_lng_pembanding[]" class="input"
                                                        placeholder="Longitude">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Alamat</td>
                                            <td class="px-4 py-2">
                                                <textarea name="alamat" class="input" rows="2">{{ $inspectionData['alamat'] ?? '' }}</textarea>
                                            </td>
                                            <td class="px-4 py-2">
                                                <textarea name="alamat_pembanding[]" class="input" rows="2"></textarea>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Desa/Kelurahan</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="desa" class="input"
                                                    value="{{ $inspectionData['desa'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="desa_pembanding[]" class="input">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Kecamatan</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="kecamatan" class="input"
                                                    value="{{ $inspectionData['kecamatan'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="kecamatan_pembanding[]" class="input">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Kabupaten/Kota</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="kabupaten" class="input"
                                                    value="{{ $inspectionData['kabupaten'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="kabupaten_pembanding[]" class="input">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Provinsi</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="provinsi" class="input"
                                                    value="{{ $inspectionData['provinsi'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="provinsi_pembanding[]" class="input">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2">Harga (Rp)</td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="harga" class="input currency-format"
                                                    value="{{ $inspectionData['harga'] ?? '' }}">
                                            </td>
                                            <td class="px-4 py-2">
                                                <input type="text" name="harga_pembanding[]"
                                                    class="input currency-format">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="flex justify-end gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ki-duotone ki-save-2 fs-2"></i>
                                    Simpan
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white p-4 rounded-lg">
            <div class="loader"></div>
            <p class="mt-2 text-center">Sedang memproses...</p>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let columnCount = 1;

        function fillObjekPenilaian(data) {
            if (!data) return;

            // Helper function untuk mengisi nilai input dengan aman
            function setInputValue(selector, value) {
                const element = document.querySelector(selector);
                if (element) {
                    element.value = value || '';
                }
            }

            // Isi data koordinat
            if (data.asset) {
                setInputValue('input[name="kordinat_lat"]', data.asset.kordinat_lat);
                setInputValue('input[name="kordinat_lng"]', data.asset.kordinat_lng);
            }

            // Isi data tanah
            if (data.tanah) {
                const luasTanah = data.tanah.luas_tanah?.sesuai ||
                    data.tanah.luas_tanah?.['tidak sesuai'] || '';
                setInputValue('input[name="luas_tanah"]', luasTanah);
            }

            // Isi data bangunan
            if (data.bangunan) {
                const luasBangunan = data.bangunan.luas_tanah_bagunan?.sesuai ||
                    data.bangunan.luas_tanah_bagunan?.['tidak sesuai'] || '';
                setInputValue('input[name="luas_tanah_bagunan"]', luasBangunan);
            }

            console.log("tee", data.asset.alamat.sesuai.nama_jalan);

            // Isi data umum
            setInputValue('input[name="alamat"]', data.asset.alamat.sesuai.nama_jalan);
            setInputValue('input[name="desa"]', data.desa);
            setInputValue('input[name="kecamatan"]', data.kecamatan);
            setInputValue('input[name="kabupaten"]', data.kabupaten);
            setInputValue('input[name="provinsi"]', data.provinsi);
            setInputValue('input[name="nama_nara_sumber"]', data.nama_nara_sumber);
            setInputValue('input[name="harga"]', data.harga);

            // Set jenis aset dengan pengecekan
            const jenisAsetSelect = document.querySelector('select[name="jenis_aset"]');
            if (jenisAsetSelect && data.jenis_aset) {
                jenisAsetSelect.value = data.jenis_aset;
            }
        }

        function fillPembandingData(data, index) {
            if (!data) return;

            // Helper function untuk mengisi nilai input array dengan aman
            function setArrayInputValue(name, value, index) {
                const element = document.getElementsByName(name)[index];
                if (element) {
                    element.value = value || '';
                }
            }

            // Isi data pembanding
            const inputs = {
                'jenis_aset_pembanding[]': data.jenis_aset,
                'luas_tanah_pembanding[]': data.luas_tanah,
                'luas_bangunan_pembanding[]': data.luas_bangunan,
                'status_nara_sumber_pembanding[]': data.status_nara_sumber,
                'nama_nara_sumber_pembanding[]': data.nama_nara_sumber,
                'kordinat_lat_pembanding[]': data.kordinat_lat,
                'kordinat_lng_pembanding[]': data.kordinat_lng,
                'alamat_pembanding[]': data.alamat,
                'desa_pembanding[]': data.desa,
                'kecamatan_pembanding[]': data.kecamatan,
                'kabupaten_pembanding[]': data.kabupaten,
                'provinsi_pembanding[]': data.provinsi,
                'harga_pembanding[]': data.harga
            };

            // Isi semua input fields
            Object.entries(inputs).forEach(([name, value]) => {
                setArrayInputValue(name, value, index);
            });

            // Handle foto pembanding jika ada
            if (data.foto_objek) {
                const imageId = `uploadedImage${index + 2}`;
                const preview = document.getElementById(imageId);
                if (preview) {
                    preview.src = `/storage/pembanding/${data.foto_objek}`;
                    preview.classList.remove('hidden');
                }
            }
        }

        // Event listener dengan pengecekan data
        document.addEventListener('DOMContentLoaded', function() {
            try {
                const inspectionData = {!! isset($inspectionData) ? json_encode($inspectionData) : 'null' !!};
                const comparisons = {!! isset($comparisons) ? json_encode($comparisons) : '' !!};

                console.log('Inspection Data:', inspectionData); // Debug
                console.log('Comparisons:', comparisons); // Debug

                if (inspectionData) {
                    fillObjekPenilaian(inspectionData);
                }

                if (comparisons) {
                    console.log("comparisons", comparisons);

                    comparisons.data_pembanding.forEach((comparison, index) => {
                        if (index > 0) { // Skip kolom pertama karena sudah ada di template
                            addColumn();
                        }
                        fillPembandingData(comparison, index);
                    });
                }

                updateRemoveButtonVisibility();
                initializeEventListeners();
            } catch (error) {
                console.error('Error initializing form:', error);
            }
        });


        function addColumn() {
            columnCount++;
            const table = document.getElementById('dataTable');
            const headerRow = table.querySelector('thead tr');
            const bodyRows = table.querySelectorAll('tbody tr');

            // Add header
            const newHeader = document.createElement('th');
            newHeader.className = 'px-4 py-3 min-w-[250px]';
            newHeader.textContent = `Data Pembanding ${columnCount}`;
            headerRow.appendChild(newHeader);

            // Add cells to each row
            bodyRows.forEach(row => {
                const newCell = document.createElement('td');
                newCell.className = 'px-4 py-2';

                // Clone the last input cell
                const lastInputCell = row.querySelector('td:last-child');
                if (lastInputCell) {
                    const clonedContent = lastInputCell.innerHTML;
                    newCell.innerHTML = clonedContent;

                    // Update IDs and names for the new cell
                    const inputs = newCell.querySelectorAll('input, select, textarea');
                    inputs.forEach(input => {
                        if (input.type === 'file') {
                            const newImageId = `uploadedImage${columnCount + 1}`;
                            const preview = newCell.querySelector('img');
                            if (preview) {
                                preview.id = newImageId;
                                preview.src = '';
                                preview.classList.add('hidden');
                                input.onchange = function() {
                                    previewImage(this, newImageId);
                                };
                            }
                        }
                        // Clear values
                        if (input.type !== 'file') {
                            input.value = '';
                        }
                    });
                }
                row.appendChild(newCell);
            });

            updateRemoveButtonVisibility();
            reinitializeEventListeners();
        }

        function removeColumn() {
            if (columnCount > 1) {
                const table = document.getElementById('dataTable');
                const rows = table.querySelectorAll('tr');

                rows.forEach(row => {
                    row.deleteCell(-1);
                });

                columnCount--;
                updateRemoveButtonVisibility();
            }
        }

        function updateRemoveButtonVisibility() {
            const removeBtn = document.getElementById('removeColumnBtn');
            if (removeBtn) {
                removeBtn.style.display = columnCount > 1 ? 'inline-flex' : 'none';
            }
        }

        function fillComparisonData(comparison, index) {
            Object.entries(comparison).forEach(([key, value]) => {
                if (key === 'foto_objek') {
                    const imageId = `uploadedImage${index + 1}`;
                    const preview = document.getElementById(imageId);
                    if (preview && value) {
                        preview.src = `{{ asset('storage/pembanding/') }}/${value}`;
                        preview.classList.remove('hidden');
                    }
                } else {
                    const input = document.querySelector(`[name="${key}_pembanding[]"]:nth-of-type(${index})`);
                    if (input) {
                        input.value = value;
                    }
                }
            });
        }

        function previewImage(input, imageId) {
            const preview = document.getElementById(imageId);
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.classList.remove('hidden');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        function formatCurrency(input) {
            let value = input.value.replace(/[^\d]/g, '');
            value = new Intl.NumberFormat('id-ID').format(value);
            input.value = value;
        }

        function formatNumber(input) {
            let value = input.value.replace(/[^\d.]/g, '');
            input.value = value;
        }

        function initializeEventListeners() {
            // Button event listeners
            document.getElementById('addColumnBtn').addEventListener('click', addColumn);
            document.getElementById('removeColumnBtn').addEventListener('click', removeColumn);

            // Form submission
            document.getElementById('dataPembandingForm').addEventListener('submit', handleSubmit);

            reinitializeEventListeners();
        }

        function reinitializeEventListeners() {
            // Currency format
            document.querySelectorAll('.currency-format').forEach(input => {
                input.addEventListener('input', function() {
                    formatCurrency(this);
                });
            });

            // Number format
            document.querySelectorAll('.number-format').forEach(input => {
                input.addEventListener('input', function() {
                    formatNumber(this);
                });
            });
        }

        function handleSubmit(e) {
            e.preventDefault();

            const loadingOverlay = document.getElementById('loadingOverlay');
            loadingOverlay.classList.remove('hidden');
            loadingOverlay.classList.add('flex');

            const formData = new FormData(e.target);

            $.ajax({
                url: '{{ route('surveyor.storeDataPembanding') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(result) {
                    if (result.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: result.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href =
                                    '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: result.message || 'Terjadi kesalahan',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Terjadi kesalahan pada server',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                },
                complete: function() {
                    loadingOverlay.classList.add('hidden');
                    loadingOverlay.classList.remove('flex');
                }
            });
        }
    </script>

    <style>
        .loader {
            border: 4px solid #f3f3f3;
            border-radius: 50%;
            border-top: 4px solid #3498db;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .scrollable-x-auto {
            overflow-x: auto;
            max-width: 100%;
        }

        .table {
            min-width: 100%;
        }
    </style>
@endpush