@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
    <style>
        #peta-rtrw {
            height: 400px;
            margin-bottom: 20px;
        }

        #peta-rdtr {
            height: 400px;
            margin-bottom: 20px;
        }
    </style>
    <style>
        .float {
            position: fixed !important;
            width: 60px !important;
            height: 60px !important;
            bottom: 40px !important;
            right: 40px !important;
            background-color: #25d366 !important;
            color: #FFF !important;
            border-radius: 50% !important;
            text-align: center !important;
            font-size: 30px !important;
            box-shadow: 2px 2px 3px #999 !important;
            z-index: 99999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-decoration: none !important;
        }

        .my-float {
            margin: 0 !important;
        }

        .float:hover {
            background-color: #20ba5a !important;
            transform: scale(1.1) !important;
        }
    </style>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endpush

@section('content')
    <div class="container">
        <h1>Detail Data</h1>
        <form action="{{ route('data.check', $data->id) }}" method="POST" enctype="multipart/form-data" id="mainForm">
            @csrf
            @method('PUT')
            <h3>Data Pemohon</h3>
            <input type="hidden" name="krk_isian" id="krk_isian">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="nama_pemohon">Nama Pemohon</label>
                        <input type="text" name="nama_pemohon" value="{{ $data->nama_pemohon }}" class="form-control"
                            readonly>
                    </div>
                    <div class="form-group mb-3">
                        <label for="no_telp">No. Telp</label>
                        <input type="text" name="no_telp" value="{{ $data->no_telp }}" class="form-control" readonly>
                    </div>
                    <div class="form-group mb-3">
                        <label for="email_aktif">Email Aktif</label>
                        <input type="text" name="email_aktif" value="{{ $data->email_aktif }}" class="form-control"
                            readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="alamat">Alamat</label>
                        <input type="text" name="alamat" value="{{ $data->alamat }}" class="form-control" readonly>
                    </div>
                    <div class="form-group mb-3">
                        <label for="npwp">NPWP</label>
                        <input type="text" name="npwp" value="{{ $data->npwp }}" class="form-control" readonly>
                    </div>
                    <div class="form-group mb-3">
                        <label for="nik">NIK</label>
                        <input type="text" name="nik" value="{{ $data->nik }}" class="form-control" readonly>
                    </div>
                </div>


                <h3>Rencana Kegiatan</h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="nama_kegiatan">Nama Kegiatan</label>
                            <input type="text" name="nama_kegiatan" class="form-control"
                                value="{{ $data->nama_kegiatan }}" readonly>
                        </div>
                        <div class="form-group mb-3">
                            <label for="nama_branded">Nama Branded</label>
                            <input type="text" name="nama_branded" class="form-control" value="{{ $data->nama_branded }}"
                                readonly>
                        </div>
                        <div class="form-group mb-3">
                            <label for="kode_kbli">Kode KBLI</label>
                            <input type="text" name="kode_kbli" class="form-control" value="{{ $data->kode_kbli }}"
                                readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="luas_tanah">Luas tanah sesuai surat tanah (m<sup>2</sup>)</label>
                            <input type="text" name="luas_tanah" class="form-control" value="{{ $data->luas_tanah }}"
                                readonly>
                        </div>
                        <div class="form-group mb-3">
                            <label for="jumlah_lantai">Rencana Jumlah Lantai Bangunan</label>
                            <input type="text" name="jumlah_lantai" class="form-control"
                                value="{{ $data->jumlah_lantai }}" readonly>
                        </div>
                        <div class="form-group mb-3">
                            <label for="alamat_lokasi">Alamat Lengkap Lokasi</label>
                            <textarea name="alamat_lokasi" class="form-control" rows="3" readonly>{{ $data->alamat_lokasi }}</textarea>
                        </div>
                    </div>
                </div>
                <h4>Koordinat</h4>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3 center">
                            <center>
                                <h5>Overlay RTRW</h5>
                            </center><br>
                            <div id="peta-rtrw"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <center>
                                <h5>Overlay RDTR</h5>
                            </center><br>
                            <div id="peta-rdtr"></div>

                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label for="peta_rtrw_image">Koordinat</label>
                            <textarea id="koordinat" name="koordinat" class="form-control mt-3" rows="3">{{ $data->koordinat }}</textarea>
                        </div>
                    </div>
                </div>

                <h4>RTRW</h4>
                <div class="table-responsive mb-3">
                    <table class="table table-bordered">
                        <tr>
                            <td>Ketentuan Pemanfaatan Ruang</td>
                            <td>
                                <input type="text" name="ketentuan_pemanfaatan_ruang_rtrw" class="form-control"
                                    value="{{ $data->ketentuan_pemanfaatan_ruang_rtrw }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Koofesien Dasar Bangunan</td>
                            <td>
                                <input type="text" name="koofesien_dasar_bangunan_rtrw" class="form-control"
                                    value="{{ $data->koofesien_dasar_bangunan_rtrw }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Koofesien Lantai Bangunan</td>
                            <td>
                                <input type="text" name="koofesien_lantai_bangunan_rtrw" class="form-control"
                                    value="{{ $data->koofesien_lantai_bangunan_rtrw }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Koofesien Dasar Hijau</td>
                            <td>
                                <input type="text" name="koofesien_dasar_hijau_rtrw" class="form-control"
                                    value="{{ $data->koofesien_dasar_hijau_rtrw }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Ketinggian Bangunan Maksimal</td>
                            <td>
                                <input type="text" name="ketinggian_bangunan_maksimal_rtrw" class="form-control"
                                    value="{{ $data->ketinggian_bangunan_maksimal_rtrw }}">
                            </td>
                        </tr>
                    </table>
                </div>

                <h4>Ketentuan Pemanfaatan Ruang (RDTR)</h4>
                <div class="table-responsive mb-3">
                    <table class="table table-bordered">
                        <tr>
                            <td>Ketentuan Pemanfaatan Ruang</td>
                            <td>
                                <input type="text" name="ketentuan_pemanfaatan_ruang_rdtr" class="form-control"
                                    value="{{ $data->ketentuan_pemanfaatan_ruang_rdtr }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Koofesien Dasar Bangunan</td>
                            <td>
                                <input type="text" name="koofesien_dasar_bangunan_rdtr" class="form-control"
                                    value="{{ $data->koofesien_dasar_bangunan_rdtr }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Koofesien Lantai Bangunan</td>
                            <td>
                                <input type="text" name="koofesien_lantai_bangunan_rdtr" class="form-control"
                                    value="{{ $data->koofesien_lantai_bangunan_rdtr }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Koofesien Dasar Hijau</td>
                            <td>
                                <input type="text" name="koofesien_dasar_hijau_rdtr" class="form-control"
                                    value="{{ $data->koofesien_dasar_hijau_rdtr }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Garis Sempadan Bangunan</td>
                            <td>
                                <input type="text" name="garis_sempadan_bangunan_rdtr" class="form-control"
                                    value="{{ $data->garis_sempadan_bangunan_rdtr }}">
                            </td>
                        </tr>
                        <tr>
                            <td>Garis Sempadan Sungai</td>
                            <td>
                                <input type="text" name="garis_sempadan_sungai_rdtr" class="form-control"
                                    value="{{ $data->garis_sempadan_sungai_rdtr }}">
                            </td>
                        </tr>
                    </table>
                </div>

                <h4>File Pendukung</h4>
                <div class="table-responsive mb-3">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Jenis File</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>File KTP</td>
                                <td><a href="{{ asset('storage/' . $data->file_ktp) }}" class="btn btn-primary btn-sm"
                                        target="_blank">Download</a></td>
                            </tr>
                            <tr>
                                <td>File NPWP</td>
                                <td><a href="{{ asset('storage/' . $data->file_npwp) }}" class="btn btn-primary btn-sm"
                                        target="_blank">Download</a></td>
                            </tr>
                            <tr>
                                <td>File OSS</td>
                                <td><a href="{{ asset('storage/' . $data->file_oss) }}" class="btn btn-primary btn-sm"
                                        target="_blank">Download</a></td>
                            </tr>
                            <tr>
                                <td>File Surat Kuasa</td>
                                <td><a href="{{ asset('storage/' . $data->file_suratkuasa) }}"
                                        class="btn btn-primary btn-sm" target="_blank">Download</a></td>
                            </tr>
                            <tr>
                                <td>File Surat Pernyataan</td>
                                <td><a href="{{ asset('storage/' . $data->file_suratpernyataan) }}"
                                        class="btn btn-primary btn-sm" target="_blank">Download</a></td>
                            </tr>
                            <tr>
                                <td>File Foto</td>
                                <td><a href="{{ asset('storage/' . $data->file_foto) }}" class="btn btn-primary btn-sm"
                                        target="_blank">Download</a></td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="d-flex align-items-center mb-3">
                        <textarea name="isian_baru_krk" id="isian_baru_krk" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="d-flex align-items-center mb-3">
                        <button type="button" id="tambah-isian-baru" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Tambah
                        </button>
                    </div>
                    
                    <table id="tabel-isian" class="table table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Isian</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="tabel-isian-body">
                            @if ($krk_isian->isEmpty())
                                <input type="hidden" value="{{ $isian_krk->count() }}" id="total_isian_krk">
                                @foreach ($isian_krk as $isian)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td><textarea name="krk_isian[]" class="form-control" rows="3">{{ $isian->isian }}</textarea></td>
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm hapus-isian">Hapus</button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <input type="hidden" value="{{ $krk_isian->count() }}" id="total_isian_krk">
                                @foreach ($krk_isian as $isian)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td><textarea name="krk_isian[]" class="form-control" rows="3">{{ $isian->isian }}</textarea></td>
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm hapus-isian">Hapus</button>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>


                    <div class="form-group mb-3">
                        <label for="catatan">Catatan</label>
                        <textarea name="catatan" id="catatan" class="form-control" rows="3"
                            @if ($data->id_status == 5) readonly @endif>{{ $data->catatan }}</textarea>
                    </div>
                    <button type="button" id="kirim-catatan" class="btn btn-success mb-3">Kirim Catatan ke
                        Pomohon</button>
                    <div class="form-group mb-3">
                        <label for="krk_ditanda">KRK ditandatangani</label>
                        <input type="file" name="krk_ditanda" class="form-control" value="{{ $data->krk_ditanda }}"
                            @if ($data->id_status == 5) readonly @endif>
                    </div>

                    <div class="form-group mb-3">
                        <label for="no_register_peta">No Register Peta</label>
                        <input type="text" name="no_register_peta" class="form-control"
                            value="{{ $data->no_register_peta }}" @if ($data->id_status == 5)  @endif>
                    </div>


                    <div class="form-group mb-3">
                        <label for="status">Status</label>
                        <select id="status" name="status" class="form-control"
                            @if ($data->id_status == 5) readonly @endif>
                            @foreach ($status as $s)
                                <option value="{{ $s->id }}" {{ $data->id_status == $s->id ? 'selected' : '' }}>
                                    {{ $s->status }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="d-flex justify-content-between mb-3">
                    <a href="{{ route('data.index') }}" class="btn btn-primary">Kembali</a>
                    <button type="button" id="submit-button" class="btn btn-success">Simpan</button>
                </div>
        </form>
        <div class="modal fade" id="konfirmasiModal" tabindex="-1" role="dialog"
            aria-labelledby="konfirmasiModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        Apakah anda yakin ingin menerbitkan permohonan ini?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-success" id="confirmSubmit">Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>

    <script>
        //isian peta
        $(document).ready(function() {
            var koordinat = JSON.parse('{{ $data->koordinat }}');
            var klasifikasiRtrw = {!! $klasifikasiRtrw !!};
            var klasifikasiRdtr = {!! $klasifikasiRdtr !!};
            var peta = new ol.Map({
                target: 'peta-rdtr',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM({
                            crossOrigin: 'anonymous'
                        })
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([115.0483, -3.3168]),
                    zoom: 10
                })
            });
            var map = new ol.Map({
                target: 'peta-rtrw',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                            crossOrigin: 'anonymous'
                        })

                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([115.0483, -3.3168]),
                    zoom: 10
                })
            });
            var layerRdtr = new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: '{{ asset('storage/layers/fkBHyBZuHJNXrTu46BahEpoLT5G88rxlrXvLKaA7.txt') }}',
                    format: new ol.format.GeoJSON()
                }),
                style: function(feature) {
                    // Cari klasifikasi yang sesuai dengan nilai feature
                    var nilaiFeature = feature.get('NAMOBJ');
                    var klasifikasiFeature = klasifikasiRdtr.find(function(k) {
                        return k.kolom_klasifikasi === nilaiFeature;
                    });

                    // Tentukan warna berdasarkan klasifikasi
                    var warnaRdtr = '#0000ff'; // Warna default biru
                    if (klasifikasiFeature) {
                        warnaRdtr = klasifikasiFeature.warna_area;
                    }

                    return new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: warnaRdtr,
                            width: 2
                        }),
                        fill: new ol.style.Fill({
                            color: warnaRdtr + '80' // Tambah transparansi (50%)
                        }),
                        text: new ol.style.Text({
                            text: feature.get('WADMKC'),
                            font: '14px Arial',
                            fill: new ol.style.Fill({
                                color: warnaRdtr
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#fff',
                                width: 3
                            })
                        })
                    });
                }
            });

            var layerRtrw = new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: '{{ asset('storage/layers/vt0qxo9CqPCmeG4Up2dnqX8LFKoWazAgVZYWRJVC.txt') }}',
                    format: new ol.format.GeoJSON()
                }),
                style: function(feature) {
                    // Cari klasifikasi yang sesuai dengan nilai feature
                    var nilaiFeature = feature.get('NAMOBJ');

                    var klasifikasiFeature = klasifikasiRtrw.find(function(k) {

                        return k.kolom_klasifikasi == nilaiFeature;
                    });

                    // Tentukan warna berdasarkan klasifikasi
                    var warnaRtrw = '#0000ff'; // Warna default biru
                    // console.log(klasifikasiFeature);
                    // if (nilaiFeature == 'Kawasan Hutan Lindung') {
                    //     console.log(klasifikasiFeature.warna_area);
                    // }
                    if (klasifikasiFeature) {
                        warnaRtrw = klasifikasiFeature.warna_area;
                    }

                    return new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: warnaRtrw,
                            width: 2
                        }),
                        fill: new ol.style.Fill({
                            color: warnaRtrw + '80' // Tambah transparansi (50%)
                        }),
                        text: new ol.style.Text({
                            text: feature.get('WADMKC'),
                            font: '14px Arial',
                            fill: new ol.style.Fill({
                                color: warnaRtrw
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#fff',
                                width: 3
                            })
                        })
                    });
                }
            });
            peta.addLayer(layerRdtr);
            map.addLayer(layerRtrw);
            var polygon = new ol.geom.Polygon(koordinat).transform('EPSG:4326', 'EPSG:3857');
            var vectorSource = new ol.source.Vector({
                features: [new ol.Feature({
                    geometry: polygon,
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(0, 0, 255, 0.2)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#0000FF',
                            width: 2
                        })
                    })
                })],
            });
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
            });
            var extent = vectorSource.getExtent();
            map.getView().fit(extent, {
                padding: [50, 50, 50, 50]
            });
            peta.getView().fit(extent, {
                padding: [50, 50, 50, 50]
            });
            map.addLayer(vectorLayer);
            peta.addLayer(vectorLayer);

            // Tambahkan kontrol untuk kedua peta
            function addEditControls(map, peta, vectorSource, textareaId) {
                var modify = new ol.interaction.Modify({
                    source: vectorSource
                });

                var draw = new ol.interaction.Draw({
                    source: vectorSource,
                    type: 'Polygon'
                });

                // Tambahkan translate interaction
                var translate = new ol.interaction.Translate({
                    source: vectorSource
                });

                // Tambahkan tombol edit
                var editButton = document.createElement('button');
                editButton.innerHTML = 'Edit Polygon';
                editButton.className = 'btn btn-primary mb-2 me-2';
                editButton.type = 'button';

                // Tambahkan tombol translate
                var translateButton = document.createElement('button');
                translateButton.innerHTML = 'Geser Polygon';
                translateButton.className = 'btn btn-info mb-2 me-2';
                translateButton.type = 'button';

                var container = document.createElement('div');
                container.className = 'd-flex';
                container.appendChild(editButton);
                container.appendChild(translateButton);

                document.getElementById(map.getTarget()).parentElement.insertBefore(container, document
                    .getElementById(map.getTarget()));

                var isEditing = false;
                var isTranslating = false;

                editButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if (!isEditing) {
                        // Nonaktifkan translate jika sedang aktif
                        if (isTranslating) {
                            map.removeInteraction(translate);
                            translateButton.innerHTML = 'Geser Polygon';
                            isTranslating = false;
                        }

                        map.addInteraction(modify);
                        map.addInteraction(draw);
                        editButton.innerHTML = 'Selesai Edit';
                        editButton.className = 'btn btn-success mb-2 me-2';
                        isEditing = true;
                    } else {
                        map.removeInteraction(modify);
                        map.removeInteraction(draw);
                        editButton.innerHTML = 'Edit Polygon';
                        editButton.className = 'btn btn-primary mb-2 me-2';
                        isEditing = false;

                        updateTextarea();
                    }
                    return false;
                });

                translateButton.addEventListener('click', function(e) {

                    e.preventDefault();
                    e.stopPropagation();

                    if (!isTranslating) {
                        // Nonaktifkan edit jika sedang aktif
                        if (isEditing) {
                            map.removeInteraction(modify);
                            map.removeInteraction(draw);
                            editButton.innerHTML = 'Edit Polygon';
                            editButton.className = 'btn btn-primary mb-2 me-2';
                            isEditing = false;
                        }

                        map.addInteraction(translate);
                        translateButton.innerHTML = 'Selesai Geser';
                        translateButton.className = 'btn btn-success mb-2 me-2';
                        isTranslating = true;
                    } else {
                        map.removeInteraction(translate);
                        translateButton.innerHTML = 'Geser Polygon';
                        translateButton.className = 'btn btn-info mb-2 me-2';
                        isTranslating = false;

                        updateTextarea();
                    }
                    return false;
                });

                function updateTextarea() {
                    var features = vectorSource.getFeatures();
                    if (features.length > 0) {
                        var coordinates = features[0].getGeometry()
                            .clone()
                            .transform('EPSG:3857', 'EPSG:4326')
                            .getCoordinates();
                        $(textareaId).val(JSON.stringify(coordinates));
                    }
                }

                // Event listeners untuk perubahan polygon
                modify.on('modifyend', updateTextarea);
                translate.on('translateend', updateTextarea);

                draw.on('drawend', function(e) {
                    vectorSource.clear();
                    updateTextarea();
                });
            }

            // Terapkan kontrol edit ke kedua peta
            addEditControls(map, 'peta-rtrw', vectorSource, '#koordinat');
            addEditControls(peta, 'peta-rdtr', vectorSource, '#koordinat');

            // Mencegah form submit saat tombol edit ditekan
            $(document).on('click', 'button[type="button"]', function(e) {
                e.preventDefault();
                return false;
            });

            $('#submit-button').on('click', function(e) {
                e.preventDefault();
                if ($('#status').val() === '5') {
                    $('#konfirmasiModal').modal('show');
                } else {
                    try {
                        var canvas = document.createElement('canvas');
                        var size = peta.getSize();
                        canvas.width = size[0];
                        canvas.height = size[1];
                        var context = canvas.getContext('2d');

                        var canvas2 = document.createElement('canvas');
                        canvas2.width = size[0];
                        canvas2.height = size[1];
                        var context2 = canvas2.getContext('2d');

                        // Tambahkan Promise untuk menangani rendering secara asynchronous
                        Promise.all([
                            new Promise(resolve => {
                                map.once('rendercomplete', function() {
                                    context2.drawImage(map.getViewport().querySelector(
                                        'canvas'), 0, 0);
                                    var imageData2 = canvas2.toDataURL('image/png',
                                        0.5);
                                    var input2 = document.createElement('input');
                                    input2.type = 'hidden';
                                    input2.name = 'peta_rtrw_image';
                                    input2.value = imageData2;
                                    $('#mainForm').append(input2);
                                    resolve();
                                });
                            }),
                            new Promise(resolve => {
                                peta.once('rendercomplete', function() {
                                    context.drawImage(peta.getViewport().querySelector(
                                        'canvas'), 0, 0);
                                    var imageData = canvas.toDataURL('image/png');
                                    var input = document.createElement('input');
                                    input.type = 'hidden';
                                    input.name = 'peta_rdtr_image';
                                    input.value = imageData;
                                    $('#mainForm').append(input);
                                    resolve();
                                });
                            })
                        ]).then(() => {
                            $('#mainForm').submit();
                        }).catch(error => {
                            console.error('Error capturing maps:', error);
                            alert('Terjadi kesalahan saat mengambil gambar peta');
                        });

                        peta.renderSync();
                        map.renderSync();
                    } catch (error) {
                        console.error('Error:', error);
                        alert('Terjadi kesalahan dalam proses');
                    }
                }
            });

            $('#confirmSubmit').on('click', function() {
                try {
                    var canvas = document.createElement('canvas');
                    var size = peta.getSize();
                    canvas.width = size[0];
                    canvas.height = size[1];
                    var context = canvas.getContext('2d');

                    var canvas2 = document.createElement('canvas');
                    canvas2.width = size[0];
                    canvas2.height = size[1];
                    var context2 = canvas2.getContext('2d');

                    // Tambahkan Promise untuk menangani rendering secara asynchronous
                    Promise.all([
                        new Promise(resolve => {
                            map.once('rendercomplete', function() {
                                context2.drawImage(map.getViewport().querySelector(
                                    'canvas'), 0, 0);
                                var imageData2 = canvas2.toDataURL('image/png', 0.5);
                                var input2 = document.createElement('input');
                                input2.type = 'hidden';
                                input2.name = 'peta_rtrw_image';
                                input2.value = imageData2;
                                $('#mainForm').append(input2);
                                resolve();
                            });
                        }),
                        new Promise(resolve => {
                            peta.once('rendercomplete', function() {
                                context.drawImage(peta.getViewport().querySelector(
                                    'canvas'), 0, 0);
                                var imageData = canvas.toDataURL('image/png');
                                var input = document.createElement('input');
                                input.type = 'hidden';
                                input.name = 'peta_rdtr_image';
                                input.value = imageData;
                                $('#mainForm').append(input);
                                resolve();
                            });
                        })
                    ]).then(() => {
                        $('#mainForm').submit();
                    }).catch(error => {
                        console.error('Error capturing maps:', error);
                        alert('Terjadi kesalahan saat mengambil gambar peta');
                    });

                    peta.renderSync();
                    map.renderSync();
                } catch (error) {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan dalam proses');
                }
            });
        });

        $('#tambah-isian-baru').on('click', function() {
            let data = $('#isian_baru_krk').val();
            let total_isian = parseInt($('#total_isian_krk').val());
            total_isian++;
            $('#total_isian_krk').val(total_isian);
            $('#isian_baru_krk').val('');
            
            $('#tabel-isian-body').append(`
                <tr>
                    <td>${total_isian}</td>
                    <td><textarea name="krk_isian[]" class="form-control" rows="3">${data}</textarea></td>
                    <td><button type="button" class="btn btn-danger btn-sm hapus-isian">Hapus</button></td>
                </tr>
            `);
        });

        $(document).on('click', '.hapus-isian', function() {
            // Hapus baris
            $(this).closest('tr').remove();
            
            // Update penomoran
            $('#tabel-isian-body tr').each(function(index) {
                $(this).find('td:first').text(index + 1);
            });
            
            // Update total isian
            let total_isian = parseInt($('#total_isian_krk').val());
            total_isian--;
            $('#total_isian_krk').val(total_isian);
        });

        $('#kirim-catatan').on('click', function() {
            $.ajax({
                url: "{{ route('data.kirim-catatan', $data->id) }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    catatan: $('#catatan').val()
                }
            });
        });
    </script>

    <!-- Tombol WhatsApp Mengambang -->
    <a href="https://wa.me/6281358721520" class="float" target="_blank">
        <i class="fab fa-whatsapp my-float"></i>
    </a>
@endpush