@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">
                        Form Inspeksi
                    </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>
                                            <img src="" class="img-responsive" alt="Gambar Pendamping" style="width: 10rem; height: 10rem; display: none;" id="uploadedImage1">
                                            <input type="file" class="file-input" 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>
                                            Alamat
                                        </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 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>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>



            <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 ">
                        <h1>Informasi khusus</h1>
                    </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>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            let columnCount = 1;

            document.getElementById('addColumnBtn').addEventListener('click', function() {
                columnCount++;
                const newHeader = document.createElement('th');
                newHeader.className = 'min-w-[350px] text-center';
                newHeader.style = 'min-width: 350px';
                newHeader.innerHTML = `Data Pembanding ${columnCount}`;
                document.querySelector('#dataTable thead tr').appendChild(newHeader);

                // Tampilkan tombol hapus kolom
                document.getElementById('removeColumnBtn').style.display = 'inline-block';

                // Tambahkan sel baru ke setiap baris di tbody
                const rows = document.querySelectorAll('#dataTable tbody tr');
                rows.forEach((row, index) => {
                    const newCell = document.createElement('td');
                    newCell.className = 'text-center';

                    // Hanya baris pertama yang memiliki input file
                    if (index === 0) {
                        // Buat elemen gambar dan input file untuk baris pertama
                        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}`; // ID unik untuk setiap gambar

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

                        // Tambahkan elemen gambar dan input file ke sel baru
                        newCell.appendChild(imgElement);
                        newCell.appendChild(fileInput);
                    } else {
                        // Untuk baris lainnya, hanya tambahkan input teks
                        const textInput = document.createElement('input');
                        textInput.type = 'text';
                        textInput.className = 'input';
                        textInput.placeholder = `Data Pembanding ${columnCount}`;
                        newCell.appendChild(textInput);
                    }

                    // Tambahkan sel baru ke baris
                    row.appendChild(newCell);
                });
            });

            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