@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;
        }

        #peta-garis {
            height: 500px;
            margin-bottom: 20px;
            background-color: #e0e0e0;
        }
    </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>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <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="no_surat_permohonan">Nomor Surat Permohonan<span class="text-danger">*</span></label>
                            <input id="no_surat_permohonan" type="text" name="no_surat_permohonan" class="form-control" value="{{ $data->no_surat_pmhn }}" readonly>
                        </div>
                        <div class="form-group mb-3">
                            <label for="tgl_surat_permohonan">Tgl Surat Permohonan <span class="text-danger">*</span></label>
                            <input id="tgl_surat_permohonan" type="date" name="tgl_surat_permohonan" class="form-control" value="{{ $data->tgl_surat_pmhn }}" readonly>
                        </div>
                        <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>

                <h3>Data Penerbitan Surat</h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="no_surat_terbit">Nomor Surat <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">600.3.2.2/</span>
                                <input type="text" name="no_surat_terbit" class="form-control" value="{{ $data->no_surat_terbit }}" style="max-width: 100px !important;" required>
                                <span class="input-group-text">-TR/ DPUPRP</span>
                            </div>
                        </div>
                    </div>
                </div>

                <h4>Lokasi RDTR</h4>
                <div class="form-group mb-4">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" name="rdtr_ck" id="rdtr_ck" value="1" {{ $data->rdtr == 1 ? 'checked' : '' }}>
                        <label class="form-check-label" for="rdtr_ck">Lokasi Berada Pada RDTR ?</label>
                    </div>
                </div>

                <div id="rdtr_pilihan" class="row mb-3" style="display: {{ $data->rdtr == 1 ? 'block' : 'none' }};">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Pilih RDTR:</label>
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="radio" name="rdtr_pilihan" id="gambut_kertak" value="1" {{ $data->rdtr_terpilih == 1 ? 'checked' : '' }}>
                                <label class="form-check-label" for="gambut_kertak">Gambut - Kertak Hanyar</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="rdtr_pilihan" id="perkotaan_martapura" value="2" {{ $data->rdtr_terpilih == 2 ? 'checked' : '' }}>
                                <label class="form-check-label" for="perkotaan_martapura">Perkotaan Martapura</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div id="rtrw_options" class="card mb-4">
                            <div class="card-body">
                                <h5 class="card-title mb-3">Pilihan Legenda RTRW</h5>
                                @php
                                    $lgn_rtrw = [
                                        'Badan Air',
                                        'Cagar Alam',
                                        'Cagar Alam/Kawasan Tanaman Pangan',
                                        'Kawasan Ekosistem Mangrove',
                                        'Kawasan Ekosistem Mangrove/Kawasan Tanaman Pangan',
                                        'Kawasan Hortikultura',
                                        'Kawasan Hutan Lindung',
                                        'Kawasan Hutan Lindung/Kawasan Permukiman Perdesaan',
                                        'Kawasan Hutan Produksi Terbatas',
                                        'Kawasan Hutan Produksi Terbatas/Kawasan Permukiman Perdesaan',
                                        'Kawasan Hutan Produksi Tetap',
                                        'Kawasan Hutan Produksi Tetap/Kawasan Permukiman Perdesaan',
                                        'Kawasan Hutan Produksi Tetap/Kawasan Tanaman Pangan',
                                        'Kawasan Hutan Produksi yang Dapat Dikonversi',
                                        'Kawasan Hutan Produksi yang Dapat Dikonversi/Kawasan Tanaman Pangan',
                                        'Kawasan Imbuhan Air Tanah',
                                        'Kawasan Perikanan Budi Daya',
                                        'Kawasan Perkebunan',
                                        'Kawasan Permukiman Perdesaan',
                                        'Kawasan Permukiman Perkotaan',
                                        'Kawasan Pertambangan Batubara',
                                        'Kawasan Pertambangan Mineral Bukan Logam',
                                        'Kawasan Peruntukan Industri',
                                        'Kawasan Suaka Alam',
                                        'Kawasan Tanaman Pangan',
                                        'Sempadan Sungai',
                                        'Suaka Margasatwa',
                                        'Suaka Margasatwa/Kawasan Tanaman Pangan',
                                        'Taman Hutan Raya',
                                        'Taman Hutan Raya/Kawasan Permukiman Perdesaan',
                                        'Taman Hutan Raya/Kawasan Tanaman Pangan'
                                    ];
                                @endphp

                                @foreach ($lgn_rtrw as $key => $l_rtrw)
                                    <div class="form-check mb-2">
                                        <input class="form-check-input rtrw-checkbox" type="checkbox" name="rtrw_items[{{ $key }}]" value="{{ $l_rtrw }}" id="rtrw{{ $key }}" {{ $data->legendaKrk()->where('rtrw_rdtr', 1)->where('legenda_dipilih', $l_rtrw)->exists() ? 'checked' : '' }}>
                                        <label class="form-check-label" for="rtrw{{ $key }}">{{ $l_rtrw }}</label>
                                        <div class="luas-zona-rtrw{{ $key }}" style="display: {{ $data->legendaKrk()->where('rtrw_rdtr', 1)->where('legenda_dipilih', $l_rtrw)->exists() ? 'block' : 'none' }}; margin-top: 5px;">
                                            <label class="form-label">Luas Dalam Zona (m²)</label>
                                            <input type="number" name="luas_zona_rtrw[{{ $key }}]" class="form-control" value="{{ $data->legendaKrk()->where('rtrw_rdtr', 1)->where('legenda_dipilih', $l_rtrw)->first()->luas_zona ?? '' }}">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div id="rdtr_options_1" class="col-md-6" style="display: {{ ($data->rdtr == 1 && $data->rdtr_terpilih == 1) ? 'block' : 'none' }};">
                        <div class="card mb-4" >
                            <div class="card-body">
                                <h5 class="card-title mb-3">Pilihan Legenda Gambut - Kertak Hanyar</h5>
                                <div class="form-check mb-2">
                                    <input class="form-check-input gambut-checkbox" type="checkbox" name="gambut_items[1]" value="item gambut 1" id="gambut1" {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 1')->exists() ? 'checked' : '' }}>
                                    <label class="form-check-label" for="gambut1">Item Gambut 1</label>
                                    <div class="luas-zona-gambut1" style="display: {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 1')->exists() ? 'block' : 'none' }}; margin-top: 5px;">
                                        <label class="form-label">Luas Dalam Zona (m²)</label>
                                        <input type="number" name="luas_zona_gambut[1]" class="form-control" value="{{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 1')->first()->luas_zona ?? '' }}">
                                    </div>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input gambut-checkbox" type="checkbox" name="gambut_items[2]" value="item gambut 2" id="gambut2" {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 2')->exists() ? 'checked' : '' }}>
                                    <label class="form-check-label" for="gambut2">Item Gambut 2</label>
                                    <div class="luas-zona-gambut2" style="display: {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 2')->exists() ? 'block' : 'none' }}; margin-top: 5px;">
                                        <label class="form-label">Luas Dalam Zona (m²)</label>
                                        <input type="number" name="luas_zona_gambut[2]" class="form-control" value="{{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 2')->first()->luas_zona ?? '' }}">
                                    </div>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input gambut-checkbox" type="checkbox" name="gambut_items[3]" value="item gambut 3" id="gambut3" {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 3')->exists() ? 'checked' : '' }}>
                                    <label class="form-check-label" for="gambut3">Item Gambut 3</label>
                                    <div class="luas-zona-gambut3" style="display: {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 3')->exists() ? 'block' : 'none' }}; margin-top: 5px;">
                                        <label class="form-label">Luas Dalam Zona (m²)</label>
                                        <input type="number" name="luas_zona_gambut[3]" class="form-control" value="{{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 3')->first()->luas_zona ?? '' }}">
                                    </div>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input gambut-checkbox" type="checkbox" name="gambut_items[4]" value="item gambut 4" id="gambut4" {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 4')->exists() ? 'checked' : '' }}>
                                    <label class="form-check-label" for="gambut4">Item Gambut 4</label>
                                    <div class="luas-zona-gambut4" style="display: {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 4')->exists() ? 'block' : 'none' }}; margin-top: 5px;">
                                        <label class="form-label">Luas Dalam Zona (m²)</label>
                                        <input type="number" name="luas_zona_gambut[4]" class="form-control" value="{{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', 'item gambut 4')->first()->luas_zona ?? '' }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="rdtr_options_2" class="col-md-6" style="display: {{ ($data->rdtr == 1 && $data->rdtr_terpilih == 2) ? 'block' : 'none' }};">
                        <div class="card mb-4" >
                            <div class="card-body">
                                <h5 class="card-title mb-3">Pilihan Legenda Perkotaan Martapura</h5>
                                @php
                                    $lgn_perkotaan = [
                                        'Badan Air',
                                        'Badan Jalan',
                                        'Cagar Budaya',
                                        'Campuran Intensitas Menengah/Sedang',
                                        'Campuran Intensitas Tinggi',
                                        'Hortikultura',
                                        'Imbuhan Air Tanah',
                                        'Jalur Hijau',
                                        'Kawasan Peruntukan Industri',
                                        'Pariwisata',
                                        'Pemakaman',
                                        'Pengelolaan Persampahan',
                                        'Perdagangan dan Jasa Skala Kota',
                                        'Perdagangan dan Jasa Skala SWP',
                                        'Perdagangan dan Jasa Skala WP',
                                        'Perikanan Budi Daya',
                                        'Perkantoran',
                                        'Perlindungan Setempat',
                                        'Pertahanan dan Keamanan',
                                        'Perumahan Kepadatan Rendah',
                                        'Perumahan Kepadatan Sedang',
                                        'Perumahan Kepadatan Tinggi',
                                        'Peternakan',
                                        'Rimba Kota',
                                        'SPU Skala Kecamatan',
                                        'SPU Skala Kelurahan',
                                        'SPU Skala Kota',
                                        'SPU Skala RW',
                                        'Taman Kecamatan',
                                        'Taman Kelurahan',
                                        'Taman Kota',
                                        'Taman RW',
                                        'Tanaman Pangan',
                                        'Transportasi'
                                    ];
                                @endphp

                                @foreach ($lgn_perkotaan as $key => $l_perkotaan)
                                    <div class="form-check mb-2">
                                        <input class="form-check-input perkotaan-checkbox" type="checkbox" name="perkotaan_items[{{ $key }}]" value="{{ $l_perkotaan }}" id="perkotaan{{ $key }}" {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', $l_perkotaan)->exists() ? 'checked' : '' }}>
                                        <label class="form-check-label" for="perkotaan{{ $key }}">{{ $l_perkotaan }}</label>
                                        <div class="luas-zona-perkotaan{{ $key }}" style="display: {{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', $l_perkotaan)->exists() ? 'block' : 'none' }}; margin-top: 5px;">
                                            <label class="form-label">Luas Dalam Zona (m²)</label>
                                            <input type="number" name="luas_zona_perkotaan[{{ $key }}]" class="form-control" value="{{ $data->legendaKrk()->where('rtrw_rdtr', 2)->where('legenda_dipilih', $l_perkotaan)->first()->luas_zona ?? '' }}">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const rdtrChk = document.querySelector('input[id="rdtr_ck"]');
                        const rdtrOptions1 = document.getElementById('rdtr_options_1');
                        const rdtrOptions2 = document.getElementById('rdtr_options_2');
                        const rdtrPilihan = document.getElementById('rdtr_pilihan');
                        const gambutKertak = document.getElementById('gambut_kertak');
                        const perkotaanMartapura = document.getElementById('perkotaan_martapura');
                        const ketentuanRdtr = document.getElementById('ketentuan_rdtr');
                        const ketentuanRdtrPerkotaan = document.getElementById('ketentuan_rdtr_perkotaan');
                        function toggleOptions() {
                            if (rdtrChk.checked) {
                                rdtrPilihan.style.display = 'block';
                                rdtrOptions1.style.display = gambutKertak.checked ? 'block' : 'none';
                                ketentuanRdtr.style.display = gambutKertak.checked ? 'block' : 'none';
                                rdtrOptions2.style.display = perkotaanMartapura.checked ? 'block' : 'none';
                                ketentuanRdtrPerkotaan.style.display = perkotaanMartapura.checked ? 'block' : 'none';
                            } else {
                                rdtrOptions1.style.display = 'none';
                                rdtrOptions2.style.display = 'none';
                                rdtrPilihan.style.display = 'none';
                                ketentuanRdtr.style.display = 'none';
                                ketentuanRdtrPerkotaan.style.display = 'none';
                                gambutKertak.checked = false;
                                perkotaanMartapura.checked = false;
                                clearRdtrOptions(rdtrOptions1);
                                clearRdtrOptions(rdtrOptions2);
                                $('#ketentuan_pemanfaatan_ruang_rdtr').val('');
                                $('#koofesien_dasar_bangunan_rdtr').val('');
                                $('#koofesien_lantai_bangunan_rdtr').val('');
                                $('#koofesien_dasar_hijau_rdtr').val('');
                                $('#ketinggian_bangunan_maksimal_rdtr').val('');
                                $('#garis_sempadan_bangunan_rdtr').val('');
                                $('#garis_sempadan_sungai_rdtr').val('');
                                $('#ketentuan_pemanfaatan_ruang_rdtr_perkotaan').val('');
                                $('#koofesien_dasar_bangunan_rdtr_perkotaan').val('');
                                $('#koofesien_lantai_bangunan_rdtr_perkotaan').val('');
                                $('#koofesien_dasar_hijau_rdtr_perkotaan').val('');
                                $('#ketinggian_bangunan_maksimal_rdtr_perkotaan').val('');
                                $('#garis_sempadan_bangunan_rdtr_perkotaan').val('');
                                $('#garis_sempadan_sungai_rdtr_perkotaan').val('');
                            }
                        }
                        function clearRdtrOptions(optionsElement) {
                            const checkboxes = optionsElement.querySelectorAll('input[type="checkbox"]');
                            checkboxes.forEach(checkbox => {
                                checkbox.checked = false;
                                const luasZonaDiv = checkbox.parentElement.querySelector('.luas-zona-' + checkbox.id);
                                if (luasZonaDiv) {
                                    luasZonaDiv.style.display = 'none';
                                    const inputElement = luasZonaDiv.querySelector('input');
                                    if (inputElement) inputElement.value = '';
                                }
                            });
                        }
                        rdtrChk.addEventListener('change', toggleOptions);
                        gambutKertak.addEventListener('change', function() {
                            if (rdtrChk.checked && this.checked) {
                                rdtrOptions1.style.display = 'block';
                                rdtrOptions2.style.display = 'none';
                                ketentuanRdtr.style.display = 'block';
                                ketentuanRdtrPerkotaan.style.display = 'none';
                                clearRdtrOptions(rdtrOptions2);
                                $('#ketentuan_pemanfaatan_ruang_rdtr_perkotaan').val('');
                                $('#koofesien_dasar_bangunan_rdtr_perkotaan').val('');
                                $('#koofesien_lantai_bangunan_rdtr_perkotaan').val('');
                                $('#koofesien_dasar_hijau_rdtr_perkotaan').val('');
                                $('#ketinggian_bangunan_maksimal_rdtr_perkotaan').val('');
                                $('#garis_sempadan_bangunan_rdtr_perkotaan').val('');
                                $('#garis_sempadan_sungai_rdtr_perkotaan').val('');
                            }
                        });
                        perkotaanMartapura.addEventListener('change', function() {
                            if (rdtrChk.checked && this.checked) {
                                rdtrOptions2.style.display = 'block';
                                rdtrOptions1.style.display = 'none';
                                ketentuanRdtrPerkotaan.style.display = 'block';
                                ketentuanRdtr.style.display = 'none';
                                clearRdtrOptions(rdtrOptions1);
                                $('#ketentuan_pemanfaatan_ruang_rdtr').val('');
                                $('#koofesien_dasar_bangunan_rdtr').val('');
                                $('#koofesien_lantai_bangunan_rdtr').val('');
                                $('#koofesien_dasar_hijau_rdtr').val('');
                                $('#ketinggian_bangunan_maksimal_rdtr').val('');
                                $('#garis_sempadan_bangunan_rdtr').val('');
                                $('#garis_sempadan_sungai_rdtr').val('');
                            }
                        });
                        if (rdtrChk.checked) {
                            rdtrOptions1.style.display = gambutKertak.checked ? 'block' : 'none';
                            rdtrOptions2.style.display = perkotaanMartapura.checked ? 'block' : 'none';
                        }
                        const rtrwCheckboxes = document.querySelectorAll('.rtrw-checkbox');
                        rtrwCheckboxes.forEach(checkbox => {
                            checkbox.addEventListener('change', function() {
                                const luasZonaDiv = this.parentElement.querySelector('.luas-zona-' + this.id);
                                if (this.checked) {
                                    luasZonaDiv.style.display = 'block';
                                } else {
                                    luasZonaDiv.style.display = 'none';
                                    luasZonaDiv.querySelector('input').value = '';
                                }
                            });
                        });
                        const gambutCheckboxes = document.querySelectorAll('.gambut-checkbox');
                        gambutCheckboxes.forEach(checkbox => {
                            checkbox.addEventListener('change', function() {
                                const luasZonaDiv = this.parentElement.querySelector('.luas-zona-' + this.id);
                                if (this.checked) {
                                    luasZonaDiv.style.display = 'block';
                                } else {
                                    luasZonaDiv.style.display = 'none';
                                    luasZonaDiv.querySelector('input').value = '';
                                }
                            });
                        });
                        const perkotaanCheckboxes = document.querySelectorAll('.perkotaan-checkbox');
                        perkotaanCheckboxes.forEach(checkbox => {
                            checkbox.addEventListener('change', function() {
                                const luasZonaDiv = this.parentElement.querySelector('.luas-zona-' + this.id);
                                if (this.checked) {
                                    luasZonaDiv.style.display = 'block';
                                } else {
                                    luasZonaDiv.style.display = 'none';
                                    luasZonaDiv.querySelector('input').value = '';
                                }
                            });
                        });
                    });
                </script>

                <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">
                            <center>
                                <h5>Overlay Garis</h5>
                            </center><br>
                            <div id="peta-garis"></div>
                        </div>
                    </div>
                    <textarea name="geone_pemohon" id="geone_pemohon" style="display: none;"></textarea>
                    <div class="col-md-12">
                        <input type="hidden" id="titik_tengah" name="titik_tengah">
                        <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" readonly>{{ $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>Koefisien 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>Koefisien 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>Koefisien 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>

                <div class="row" id="ketentuan_rdtr" style="display: {{ ($data->rdtr == 1 && $data->rdtr_terpilih == 1) ? 'block' : 'none' }};">
                    <h4>Ketentuan Pemanfaatan Ruang (RDTR Gambut-Kertak Hanyar)</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" id="ketentuan_pemanfaatan_ruang_rdtr" class="form-control"
                                        value="{{ $data->ketentuan_pemanfaatan_ruang_rdtr }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Koefisien Dasar Bangunan</td>
                                <td>
                                    <input type="text" name="koofesien_dasar_bangunan_rdtr" id="koofesien_dasar_bangunan_rdtr" class="form-control"
                                        value="{{ $data->koofesien_dasar_bangunan_rdtr }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Koefisien Lantai Bangunan</td>
                                <td>
                                    <input type="text" name="koofesien_lantai_bangunan_rdtr" id="koofesien_lantai_bangunan_rdtr" class="form-control"
                                        value="{{ $data->koofesien_lantai_bangunan_rdtr }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Koefisien Dasar Hijau</td>
                                <td>
                                    <input type="text" name="koofesien_dasar_hijau_rdtr" id="koofesien_dasar_hijau_rdtr" class="form-control"
                                        value="{{ $data->koofesien_dasar_hijau_rdtr }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Ketinggian Bangunan Maksimal</td>
                                <td>
                                    <input type="text" name="ketinggian_bangunan_maksimal_rdtr" id="ketinggian_bangunan_maksimal_rdtr" class="form-control"
                                        value="{{ $data->ketinggian_bangunan_maksimal_rdtr }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Garis Sempadan Bangunan</td>
                                <td>
                                    <input type="text" name="garis_sempadan_bangunan_rdtr" id="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" id="garis_sempadan_sungai_rdtr" class="form-control"
                                        value="{{ $data->garis_sempadan_sungai_rdtr }}">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="row" id="ketentuan_rdtr_perkotaan" style="display: {{ ($data->rdtr == 1 && $data->rdtr_terpilih == 2) ? 'block' : 'none' }};">
                    <h4>Ketentuan Pemanfaatan Ruang (RDTR Perkotaan Martapura)</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_perkotaan" id="ketentuan_pemanfaatan_ruang_rdtr_perkotaan" class="form-control"
                                        value="{{ $data->ketentuan_pr_perkotaan }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Koefisien Dasar Bangunan</td>
                                <td>
                                    <input type="text" name="koofesien_dasar_bangunan_rdtr_perkotaan" id="koofesien_dasar_bangunan_rdtr_perkotaan" class="form-control"
                                        value="{{ $data->kdb_rdtr_perkotaan }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Koefisien Lantai Bangunan</td>
                                <td>
                                    <input type="text" name="koofesien_lantai_bangunan_rdtr_perkotaan" id="koofesien_lantai_bangunan_rdtr_perkotaan" class="form-control"
                                        value="{{ $data->klb_rdtr_perkotaan }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Koefisien Dasar Hijau</td>
                                <td>
                                    <input type="text" name="koofesien_dasar_hijau_rdtr_perkotaan" id="koofesien_dasar_hijau_rdtr_perkotaan" class="form-control"
                                        value="{{ $data->kdh_rdtr_perkotaan }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Ketinggian Bangunan Maksimal</td>
                                <td>
                                    <input type="text" name="ketinggian_bangunan_maksimal_rdtr_perkotaan" id="ketinggian_bangunan_maksimal_rdtr_perkotaan" class="form-control"
                                        value="{{ $data->tinggi_maksimal_rdtr_perkotaan }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Garis Sempadan Bangunan</td>
                                <td>
                                    <input type="text" name="garis_sempadan_bangunan_rdtr_perkotaan" id="garis_sempadan_bangunan_rdtr_perkotaan" class="form-control"
                                        value="{{ $data->gsb_rdtr_perkotaan }}">
                                </td>
                            </tr>
                            <tr>
                                <td>Garis Sempadan Sungai</td>
                                <td>
                                    <input type="text" name="garis_sempadan_sungai_rdtr_perkotaan" id="garis_sempadan_sungai_rdtr_perkotaan" class="form-control"
                                        value="{{ $data->gss_rdtr_perkotaan }}">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <h4>Ketentuan Khusus</h4>
                <div class="table-responsive mb-3">
                    <table class="table table-bordered">
                        <tr>
                            <td>Kawasan Keselamatan Operasi Penerbangan</td>
                            <td>
                                <select name="kkop" id="kkop" class="form-control">
                                    @foreach ($kkop as $item)
                                        <option value="{{ $item->id }}" {{ $data->id_kkop == $item->id ? 'selected' : '' }}>{{ $item->ket_kkop }}</option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Kawasan Rawan Bencana</td>
                            <td>
                                <select name="kawasan_rawan_bencana" id="kawasan_rawan_bencana" class="form-control">
                                    @foreach ($kawasan as $item)
                                        <option value="{{ $item->id }}" {{ $data->id_kawasan == $item->id ? 'selected' : '' }}>{{ $item->ket_kawasan }}</option>
                                    @endforeach
                                </select>
                            </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="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>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="file" name="krk_ditanda" class="form-control" value="{{ $data->krk_ditanda }}" @if ($data->id_status == 2) readonly @endif>
                            </div>
                            <div class="col-md-6">
                                @if ($data->krk_ditanda)
                                    <a href="{{ route('data.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'krkttd']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                                @else
                                    <a href="#" class="btn btn-warning btn-sm" target="_blank">Belum Ada File KRK</a>
                                @endif
                            </div>
                        </div>
                        @if($data->krk_ditanda)
                            <small class="text-muted">File saat ini: {{ $data->krk_ditanda }}</small>
                        @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 }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="no_urut_agenda">Nomor Urut Agenda</label>
                        <input type="text" name="no_urut_agenda" class="form-control" value="{{ $data->no_urut_agenda }}">
                    </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' : '' }} @if (in_array($data->id_status, [1, 3, 10])) {{ in_array($s->id, [6, 7, 8]) ? 'disabled' : '' }} @endif>
                                    {{ $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 src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script>
        // *isian peta
        $(document).ready(function() {
            var klasifikasiRtrw = {!! $klasifikasiRtrw !!};
            var klasifikasiRdtr = {!! $klasifikasiRdtr !!};
            var map_rdtr = new ol.Map({
                target: 'peta-rdtr',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM({
                            crossOrigin: 'anonymous',
                            attributions: false
                        })
                    }),
                    new ol.layer.Graticule({
                        strokeStyle: new ol.style.Stroke({
                            color: 'transparent',
                            width: 1,
                            lineDash: [0.5, 4],
                        }),
                        showLabels: true,
                        wrapX: false,
                    }),
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([115.0483, -3.3168]),
                    zoom: 10
                })
            });
            var map_rtrw = 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'
                        })
                    }),
                    new ol.layer.Graticule({
                        strokeStyle: new ol.style.Stroke({
                            color: 'transparent',
                            width: 1,
                            lineDash: [0.5, 4],
                        }),
                        showLabels: true,
                        wrapX: false,
                    }),
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([115.0483, -3.3168]),
                    zoom: 10
                })
            });
            var scaleControl = new ol.control.ScaleLine({
                units: 'metric',
                bar: true,
                steps: 4,
                text: true,
                minWidth: 140,
            });
            map_rtrw.addControl(scaleControl);
            var styleElement = document.createElement('style');
            styleElement.type = 'text/css';
            styleElement.innerHTML = `
                #peta-rtrw .ol-zoom,
                #peta-rdtr .ol-zoom,
                #peta-garis .ol-zoom {
                    left: auto !important;
                    right: 10px !important;
                }

                .ol-scale-bar {
                    left: auto !important;
                    right: 20px !important;
                    bottom: 10px !important;
                }
            `;
            document.head.appendChild(styleElement);
            var titleControlRTRW = new ol.control.Control({
                element: document.createElement('div')
            });
            var titleElementRTRW = titleControlRTRW.element;
            titleElementRTRW.className = 'ol-title ol-unselectable ol-control';
            titleElementRTRW.innerHTML = '<div>PETA RTRW</div>';
            titleElementRTRW.style.position = 'absolute';
            titleElementRTRW.style.top = '10px';
            titleElementRTRW.style.left = '10px';
            titleElementRTRW.style.backgroundColor = 'white';
            titleElementRTRW.style.padding = '5px 10px';
            titleElementRTRW.style.border = '1px solid black';
            titleElementRTRW.style.fontWeight = 'bold';
            titleElementRTRW.style.fontSize = '12px';
            map_rtrw.addControl(titleControlRTRW);

            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) {
                    var nilaiFeature = feature.get('NAMOBJ');
                    var klasifikasiFeature = klasifikasiRdtr.find(function(k) {
                        return k.kolom_klasifikasi === nilaiFeature;
                    });
                    var warnaRdtr = '#0000ff';
                    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'
                        }),
                        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) {
                    var nilaiFeature = feature.get('NAMOBJ');
                    var klasifikasiFeature = klasifikasiRtrw.find(function(k) {
                        return k.kolom_klasifikasi == nilaiFeature;
                    });
                    var warnaRtrw = '#0000ff';
                    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'
                        }),
                        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
                            })
                        })
                    });
                }
            });

            // *Membuat popup overlay untuk RTRW
            var popupContainerRtrw = document.createElement('div');
            popupContainerRtrw.className = 'ol-popup';
            popupContainerRtrw.style.position = 'absolute';
            popupContainerRtrw.style.backgroundColor = 'white';
            popupContainerRtrw.style.padding = '15px';
            popupContainerRtrw.style.border = '1px solid #ccc';
            popupContainerRtrw.style.borderRadius = '5px';
            popupContainerRtrw.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
            popupContainerRtrw.style.minWidth = '300px';
            popupContainerRtrw.style.display = 'none';

            var popupContentRtrw = document.createElement('div');
            popupContainerRtrw.appendChild(popupContentRtrw);

            var popupCloserRtrw = document.createElement('a');
            popupCloserRtrw.className = 'ol-popup-closer';
            popupCloserRtrw.href = '#';
            popupCloserRtrw.style.position = 'absolute';
            popupCloserRtrw.style.top = '5px';
            popupCloserRtrw.style.right = '5px';
            popupCloserRtrw.style.textDecoration = 'none';
            popupCloserRtrw.innerHTML = '×';
            popupContainerRtrw.appendChild(popupCloserRtrw);

            document.body.appendChild(popupContainerRtrw);

            var popupRtrw = new ol.Overlay({
                element: popupContainerRtrw,
                positioning: 'bottom-center',
                stopEvent: false,
                offset: [0, -10]
            });

            map_rtrw.addOverlay(popupRtrw);

            // *Menambahkan event listener untuk menutup popup
            popupCloserRtrw.addEventListener('click', function(e) {
                popupRtrw.setPosition(undefined);
                popupContainerRtrw.style.display = 'none';
                e.preventDefault();
                return false;
            });

            // *Menambahkan event listener untuk klik pada peta
            map_rtrw.on('click', function(evt) {
                var feature = map_rtrw.forEachFeatureAtPixel(evt.pixel, function(feature) {
                    return feature;
                });

                if (feature) {
                    var namobj = feature.get('NAMOBJ');
                    if (namobj) {
                        var coordinates = evt.coordinate;
                        popupContentRtrw.innerHTML = '<p><strong>Nama Objek:</strong> <br>' + namobj + '</p>';
                        popupRtrw.setPosition(coordinates);
                        popupContainerRtrw.style.display = 'block';
                    }
                } else {
                    popupRtrw.setPosition(undefined);
                    popupContainerRtrw.style.display = 'none';
                }
            });
            map_rtrw.addLayer(layerRtrw);
            map_rdtr.addLayer(layerRdtr);

            // *Menambahkan legenda untuk RTRW pada map
            var legendContainer = document.createElement('div');
            legendContainer.className = 'ol-legend ol-unselectable ol-control';
            legendContainer.style.position = 'absolute';
            legendContainer.style.bottom = '10px';
            legendContainer.style.left = '10px';
            legendContainer.style.backgroundColor = 'white';
            legendContainer.style.padding = '5px';
            legendContainer.style.border = '1px solid #ccc';
            legendContainer.style.borderRadius = '5px';
            legendContainer.style.maxHeight = '150px';
            legendContainer.style.overflowY = 'auto';
            legendContainer.style.minWidth = '150px';
            legendContainer.style.fontSize = '10px';
            var legendTitle = document.createElement('div');
            legendTitle.innerHTML = '<strong>Legenda</strong>';
            legendTitle.style.marginBottom = '3px';
            legendTitle.style.borderBottom = '1px solid #ccc';
            legendTitle.style.paddingBottom = '3px';
            legendContainer.appendChild(legendTitle);

            // *Buat legendContent yang akan diperbarui saat checkbox diubah
            var legendContent = document.createElement('div');
            legendContainer.appendChild(legendContent);

            // *Tambahkan legendContainer ke map
            var legendControl = new ol.control.Control({
                element: legendContainer
            });
            map_rtrw.addControl(legendControl);

            // *Fungsi untuk memperbarui legenda berdasarkan checkbox yang dipilih
            function updateLegend() {
                legendContent.innerHTML = '';
                var checkedRtrwItems = document.querySelectorAll('.rtrw-checkbox:checked');
                if (checkedRtrwItems.length === 0) {
                    var noItemText = document.createElement('div');
                    noItemText.textContent = 'Tidak ada item terpilih';
                    noItemText.style.fontStyle = 'italic';
                    legendContent.appendChild(noItemText);
                    return;
                }

                checkedRtrwItems.forEach(function(checkbox) {
                    var value = checkbox.value;

                    var klasifikasiFeature = klasifikasiRtrw.find(function(k) {
                        return k.kolom_klasifikasi == value;
                    });

                    if (klasifikasiFeature) {
                        var color = klasifikasiFeature.warna_area;

                        var legendItem = document.createElement('div');
                        legendItem.style.display = 'flex';
                        legendItem.style.alignItems = 'center';
                        legendItem.style.marginBottom = '3px';

                        var colorBox = document.createElement('div');
                        colorBox.style.width = '12px';
                        colorBox.style.height = '12px';
                        colorBox.style.backgroundColor = color;
                        colorBox.style.marginRight = '3px';
                        colorBox.style.border = '1px solid #aaa';

                        var itemText = document.createElement('div');
                        itemText.textContent = value;
                        itemText.style.fontSize = '9px';
                        itemText.style.flex = '1';
                        itemText.style.whiteSpace = 'nowrap';
                        itemText.style.overflow = 'hidden';
                        itemText.style.textOverflow = 'ellipsis';
                        itemText.style.maxWidth = '120px';

                        legendItem.appendChild(colorBox);
                        legendItem.appendChild(itemText);
                        legendContent.appendChild(legendItem);
                    }
                });
            }

            // *Perbarui legenda saat halaman dimuat
            updateLegend();

            // *Tambahkan event listener untuk setiap checkbox
            const rtrwCheckboxes = document.querySelectorAll('.rtrw-checkbox');
            rtrwCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateLegend();

                    const luasZonaDiv = this.parentElement.querySelector('.luas-zona-' + this.id);
                    if (this.checked) {
                        luasZonaDiv.style.display = 'block';
                    } else {
                        luasZonaDiv.style.display = 'none';
                        luasZonaDiv.querySelector('input').value = '';
                    }
                });
            });

            var titleControlRDTR = new ol.control.Control({
                element: document.createElement('div')
            });
            var titleElementRDTR = titleControlRDTR.element;
            titleElementRDTR.className = 'ol-title ol-unselectable ol-control';
            titleElementRDTR.innerHTML = '<div>PETA RDTR</div>';
            titleElementRDTR.style.position = 'absolute';
            titleElementRDTR.style.top = '10px';
            titleElementRDTR.style.left = '10px';
            titleElementRDTR.style.backgroundColor = 'white';
            titleElementRDTR.style.padding = '5px 10px';
            titleElementRDTR.style.border = '1px solid black';
            titleElementRDTR.style.fontWeight = 'bold';
            titleElementRDTR.style.fontSize = '12px';
            map_rdtr.addControl(titleControlRDTR);

            // *Menambahkan legenda untuk RDTR pada map
            var legendContainerRdtr = document.createElement('div');
            legendContainerRdtr.className = 'ol-legend ol-unselectable ol-control';
            legendContainerRdtr.style.position = 'absolute';
            legendContainerRdtr.style.bottom = '10px';
            legendContainerRdtr.style.right = '10px';
            legendContainerRdtr.style.backgroundColor = 'white';
            legendContainerRdtr.style.padding = '5px';
            legendContainerRdtr.style.border = '1px solid #ccc';
            legendContainerRdtr.style.borderRadius = '5px';
            legendContainerRdtr.style.maxHeight = '150px';
            legendContainerRdtr.style.overflowY = 'auto';
            legendContainerRdtr.style.minWidth = '150px';
            legendContainerRdtr.style.fontSize = '10px';

            var legendTitleRdtr = document.createElement('div');
            legendTitleRdtr.innerHTML = '<strong>Legenda</strong>';
            legendTitleRdtr.style.marginBottom = '3px';
            legendTitleRdtr.style.borderBottom = '1px solid #ccc';
            legendTitleRdtr.style.paddingBottom = '3px';
            legendContainerRdtr.appendChild(legendTitleRdtr);

            var legendContentRdtr = document.createElement('div');
            legendContainerRdtr.appendChild(legendContentRdtr);

            var legendControlRdtr = new ol.control.Control({
                element: legendContainerRdtr
            });
            map_rdtr.addControl(legendControlRdtr);

            // *Fungsi untuk memperbarui legenda RDTR berdasarkan checkbox yang dipilih
            function updateRdtrLegend() {
                legendContentRdtr.innerHTML = '';

                const rdtrChk = document.querySelector('input[id="rdtr_ck"]');
                if (!rdtrChk.checked) {
                    var noActiveText = document.createElement('div');
                    noActiveText.textContent = 'RDTR tidak aktif';
                    noActiveText.style.fontStyle = 'italic';
                    legendContentRdtr.appendChild(noActiveText);
                    return;
                }

                const gambutActive = document.getElementById('gambut_kertak').checked;
                const perkotaanActive = document.getElementById('perkotaan_martapura').checked;

                var checkedItems = [];
                var itemType = '';

                if (gambutActive) {
                    checkedItems = document.querySelectorAll('.gambut-checkbox:checked');
                    itemType = 'gambut';
                } else if (perkotaanActive) {
                    checkedItems = document.querySelectorAll('.perkotaan-checkbox:checked');
                    itemType = 'perkotaan';
                }

                if (checkedItems.length === 0) {
                    var noItemText = document.createElement('div');
                    noItemText.textContent = 'Tidak ada item terpilih';
                    noItemText.style.fontStyle = 'italic';
                    legendContentRdtr.appendChild(noItemText);
                    return;
                }

                checkedItems.forEach(function(checkbox) {
                    var value = checkbox.value;

                    var klasifikasiFeature = klasifikasiRdtr.find(function(k) {
                        return k.kolom_klasifikasi === value;
                    });

                    if (klasifikasiFeature) {
                        var color = klasifikasiFeature.warna_area;

                        var legendItem = document.createElement('div');
                        legendItem.style.display = 'flex';
                        legendItem.style.alignItems = 'center';
                        legendItem.style.marginBottom = '3px';

                        var colorBox = document.createElement('div');
                        colorBox.style.width = '12px';
                        colorBox.style.height = '12px';
                        colorBox.style.backgroundColor = color;
                        colorBox.style.marginRight = '3px';
                        colorBox.style.border = '1px solid #aaa';

                        var itemText = document.createElement('div');
                        itemText.textContent = value;
                        itemText.style.fontSize = '9px';
                        itemText.style.flex = '1';
                        itemText.style.whiteSpace = 'nowrap';
                        itemText.style.overflow = 'hidden';
                        itemText.style.textOverflow = 'ellipsis';
                        itemText.style.maxWidth = '120px';

                        legendItem.appendChild(colorBox);
                        legendItem.appendChild(itemText);
                        legendContentRdtr.appendChild(legendItem);
                    }
                });
            }

            updateRdtrLegend();

            const rdtrCheckbox = document.querySelector('input[id="rdtr_ck"]');
            rdtrCheckbox.addEventListener('change', updateRdtrLegend);

            const gambutKertakRadio = document.getElementById('gambut_kertak');
            const perkotaanMartapuraRadio = document.getElementById('perkotaan_martapura');
            gambutKertakRadio.addEventListener('change', updateRdtrLegend);
            perkotaanMartapuraRadio.addEventListener('change', updateRdtrLegend);

            const gambutCheckboxes = document.querySelectorAll('.gambut-checkbox');
            gambutCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateRdtrLegend();

                    const luasZonaDiv = this.parentElement.querySelector('.luas-zona-' + this.id);
                    if (this.checked) {
                        luasZonaDiv.style.display = 'block';
                    } else {
                        luasZonaDiv.style.display = 'none';
                        luasZonaDiv.querySelector('input').value = '';
                    }
                });
            });

            const perkotaanCheckboxes = document.querySelectorAll('.perkotaan-checkbox');
            perkotaanCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateRdtrLegend();

                    const luasZonaDiv = this.parentElement.querySelector('.luas-zona-' + this.id);
                    if (this.checked) {
                        luasZonaDiv.style.display = 'block';
                    } else {
                        luasZonaDiv.style.display = 'none';
                        luasZonaDiv.querySelector('input').value = '';
                    }
                });
            });

            var map_garis = new ol.Map({
                target: 'peta-garis',
                layers: [
                    new ol.layer.Graticule({
                        strokeStyle: new ol.style.Stroke({
                            color: 'transparent',
                            width: 1,
                            lineDash: [0.5, 4],
                        }),
                        showLabels: true,
                        wrapX: false,
                    }),
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([115.0483, -3.3168]),
                    zoom: 10
                })
            });
            var titleControlGARIS = new ol.control.Control({
                element: document.createElement('div')
            });
            var titleElementGARIS = titleControlGARIS.element;
            titleElementGARIS.className = 'ol-title ol-unselectable ol-control';
            titleElementGARIS.innerHTML = '<div>PETA GARIS</div>';
            titleElementGARIS.style.position = 'absolute';
            titleElementGARIS.style.top = '10px';
            titleElementGARIS.style.left = '10px';
            titleElementGARIS.style.backgroundColor = 'white';
            titleElementGARIS.style.padding = '5px 10px';
            titleElementGARIS.style.border = '1px solid black';
            titleElementGARIS.style.fontWeight = 'bold';
            titleElementGARIS.style.fontSize = '12px';
            map_garis.addControl(titleControlGARIS);
            var urls_garis_gambut = [
                '{{ asset('geojson/peta_garis/GSB 7 Meter Jalan Lingkungan Primer RDTRGTKH.geojson') }}',
                '{{ asset('geojson/peta_garis/GSB 9 Meter Jalan Lokal Primer RDTRGTKH.geojson') }}',
                '{{ asset('geojson/peta_garis/GSB 15 Meter Jalan Kolektor Primer RDTRGTKH.geojson') }}',
                '{{ asset('geojson/peta_garis/GSB 35 Meter Jalan Arteri Primer RDTRGTKH.geojson') }}'
            ];
            var urls_garis_perkotaan = [
                '{{ asset('geojson/peta_garis/GSB 9 Meter Jalan Lingkungan Primer RDTRMTP.geojson') }}',
                '{{ asset('geojson/peta_garis/GSB 15 Meter Jalan Lokal Primer RDTRMTP.geojson') }}',
                '{{ asset('geojson/peta_garis/GSB 25 Meter Jalan Kolektor Primer RDTRMTP.geojson') }}',
                '{{ asset('geojson/peta_garis/GSB 35 Meter Jalan Arteri Primer RDTRMTP.geojson') }}',
            ];
            function addGarisLayers(urls, map) {
                urls.forEach(function(url) {
                    var titleMatch = url.match(/\/([^\/]+)\.geojson$/);
                    var title = titleMatch ? titleMatch[1] : '';
                    var vectorLayerGaris = new ol.layer.Vector({
                        source: new ol.source.Vector({
                            url: url,
                            format: new ol.format.GeoJSON()
                        }),
                        style: function(feature, resolution) {
                            var geomType = feature.getGeometry().getType();
                            var baseStyle = {
                                color: '#000000',
                                width: 2
                            };
                            if (geomType !== 'LineString') {
                                baseStyle.lineDash = [5, 5];
                            }
                            var minZoomForLabels = 15;
                            var currentZoom = map_garis.getView().getZoomForResolution(resolution);
                            var style = new ol.style.Style({
                                stroke: new ol.style.Stroke(baseStyle)
                            });
                            if (currentZoom >= minZoomForLabels) {
                                var extent = feature.getGeometry().getExtent();
                                var center = ol.extent.getCenter(extent);
                                style.setText(new ol.style.Text({
                                    text: title,
                                    font: '12px Arial',
                                    fill: new ol.style.Fill({
                                        color: '#000000'
                                    }),
                                    stroke: new ol.style.Stroke({
                                        color: '#ffffff',
                                        width: 3
                                    }),
                                    placement: 'line',
                                    overflow: true
                                }));
                            }
                            return style;
                        }
                    });
                    map.addLayer(vectorLayerGaris);
                });
            }
            @if($data->rdtr == 1)
                @if($data->rdtr_terpilih == 1)
                    addGarisLayers(urls_garis_gambut, map_garis);
                @elseif($data->rdtr_terpilih == 2)
                    addGarisLayers(urls_garis_perkotaan, map_garis);
                @endif
            @endif
            function removeGarisLayers(map) {
                const layers = map.getLayers().getArray();
                for (let i = layers.length - 1; i > 0; i--) {
                    const layer = layers[i];
                    if (layer instanceof ol.layer.Vector && layer !== vectorLayer) {
                        map.removeLayer(layer);
                    }
                }
            }
            document.getElementById('gambut_kertak').addEventListener('change', function() {
                if (this.checked && document.getElementById('rdtr_ck').checked) {
                    removeGarisLayers(map_garis);
                    addGarisLayers(urls_garis_gambut, map_garis);
                }
            });
            document.getElementById('perkotaan_martapura').addEventListener('change', function() {
                if (this.checked && document.getElementById('rdtr_ck').checked) {
                    removeGarisLayers(map_garis);
                    addGarisLayers(urls_garis_perkotaan, map_garis);
                }
            });
            const geojsonPemohonUrl = "{{ asset('storage/geojson_lokasi/'.$data->geojson_lokasi) }}";
            var vectorSource = new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: geojsonPemohonUrl,
            });
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'red',
                        width: 2
                    }),
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 0, 0, 0.1)'
                    })
                })
            });
            vectorSource.once('change', function () {
                if (vectorSource.getState() === 'ready') {
                    var extent = vectorSource.getExtent();
                    if (extent && !isNaN(extent[0])) {
                        var center = ol.extent.getCenter(extent);
                        const lonLat = ol.proj.transform(center, 'EPSG:3857', 'EPSG:4326');
                        $('#titik_tengah').val(lonLat[1] + ',' + lonLat[0]);
                        map_rtrw.getView().fit(extent, {
                            padding: [50, 50, 50, 50]
                        });
                        map_rdtr.getView().fit(extent, {
                            padding: [50, 50, 50, 50]
                        });
                        map_garis.getView().fit(extent, {
                            padding: [50, 50, 50, 50]
                        });
                    }
                }
                updateGeoJSON();
            });
            map_rtrw.addLayer(vectorLayer);
            map_rdtr.addLayer(vectorLayer);
            map_garis.addLayer(vectorLayer);
            function updateGeoJSON() {
                const geojsonFormat = new ol.format.GeoJSON();
                const geojsonString = geojsonFormat.writeFeatures(vectorSource.getFeatures(), {
                    featureProjection: 'EPSG:3857',
                });
                $('#geone_pemohon').val(geojsonString);
            }
            function addEditControls(map, peta, vectorSource, textareaId) {
                var modify = new ol.interaction.Modify({
                    source: vectorSource
                });
                var draw = new ol.interaction.Draw({
                    source: vectorSource,
                    type: 'Polygon'
                });
                var translate = new ol.interaction.Translate({
                    source: vectorSource
                });
                var editButton = document.createElement('button');
                editButton.innerHTML = 'Edit Polygon';
                editButton.className = 'btn btn-primary mb-2 me-2';
                editButton.type = 'button';
                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) {
                        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) {
                        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) {
                        const coordinates = features[0].getGeometry().getCoordinates()[0];
                        const coordString = coordinates.map(coord => {
                            const lonLat = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
                            return lonLat[1] + ',' + lonLat[0];
                        }).join(';');
                        $(textareaId).val(coordString);
                    }
                    const geoJSONFormat = new ol.format.GeoJSON();
                    const geojsonString = geoJSONFormat.writeFeatures(vectorSource.getFeatures(), {
                        featureProjection: 'EPSG:3857',
                    });
                    $('#geone_pemohon').val(geojsonString);
                }
                modify.on('modifyend', updateTextarea);
                translate.on('translateend', updateTextarea);
                draw.on('drawend', function(e) {
                    vectorSource.clear();
                    updateTextarea();
                });
            }
            addEditControls(map_rtrw, 'peta-rtrw', vectorSource, '#koordinat');
            addEditControls(map_rdtr, 'peta-rdtr', vectorSource, '#koordinat');
            $(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 rtrwSize = map_rtrw.getSize();
                        var rdtrSize = map_rdtr.getSize();
                        var garisSize = map_garis.getSize();
                        var rtrwCanvas = document.createElement('canvas');
                        rtrwCanvas.width = rtrwSize[0];
                        rtrwCanvas.height = rtrwSize[1];
                        var rtrwContext = rtrwCanvas.getContext('2d');
                        var rdtrCanvas = document.createElement('canvas');
                        rdtrCanvas.width = rdtrSize[0];
                        rdtrCanvas.height = rdtrSize[1];
                        var rdtrContext = rdtrCanvas.getContext('2d');
                        var garisCanvas = document.createElement('canvas');
                        garisCanvas.width = garisSize[0];
                        garisCanvas.height = garisSize[1];
                        var garisContext = garisCanvas.getContext('2d');
                        Promise.all([
                            new Promise(resolve => {
                                const scaleElement = scaleControl.element;
                                let width_skl = scaleElement.getBoundingClientRect().width*1.2;
                                let height_skl = scaleElement.getBoundingClientRect().height*2;
                                const container = document.createElement('div');
                                container.style.position = 'absolute';
                                container.style.padding = '2px';
                                container.style.top = '0';
                                container.style.left = '0';
                                container.style.background = 'white';
                                container.appendChild(scaleElement.cloneNode(true));
                                container.style.width = width_skl + 'px';
                                container.style.height = height_skl + 'px';
                                document.body.appendChild(container);
                                html2canvas(container).then(canvas => {
                                    const dataURL = canvas.toDataURL("image/png");
                                    var input = document.createElement('input');
                                    input.type = 'hidden';
                                    input.name = 'skala_image';
                                    input.value = dataURL;
                                    $('#mainForm').append(input);
                                    resolve();
                                    document.body.removeChild(container);
                                });
                            }),
                            new Promise(resolve => {
                                map_rtrw.once('rendercomplete', function() {
                                    var canvasElements = map_rtrw.getViewport().querySelectorAll('canvas');
                                    canvasElements.forEach(function(canvas) {
                                        rtrwContext.drawImage(canvas, 0, 0, rtrwSize[0], rtrwSize[1]);
                                    });
                                    rtrwContext.fillStyle = 'white';
                                    rtrwContext.strokeStyle = 'black';
                                    rtrwContext.lineWidth = 2;
                                    rtrwContext.font = 'bold 14px Arial';
                                    rtrwContext.strokeRect(10, 10, 100, 25);
                                    rtrwContext.fillRect(10, 10, 100, 25);
                                    rtrwContext.fillStyle = 'black';
                                    rtrwContext.textAlign = 'center';
                                    rtrwContext.textBaseline = 'middle';
                                    rtrwContext.fillText('PETA RTRW', 60, 22);

                                    const legendElement = legendControl.element;
                                    const originalWidth = legendElement.getBoundingClientRect().width * 1.1;
                                    const originalHeight = legendElement.getBoundingClientRect().height * 1.1;

                                    let width_lg = originalWidth;
                                    let height_lg = originalHeight;

                                    const legendContainer = document.createElement('div');
                                    legendContainer.style.position = 'absolute';
                                    legendContainer.style.padding = '2px';
                                    legendContainer.style.top = '0';
                                    legendContainer.style.left = '0';
                                    legendContainer.style.background = 'white';
                                    legendContainer.style.border = '1px solid #ccc';
                                    legendContainer.style.overflow = 'hidden';
                                    legendContainer.style.width = width_lg + 'px';
                                    legendContainer.style.height = height_lg + 'px';

                                    const legendClone = legendElement.cloneNode(true);
                                    legendContainer.appendChild(legendClone);

                                    document.body.appendChild(legendContainer);
                                    html2canvas(legendContainer).then(legendCanvas => {
                                        rtrwContext.drawImage(legendCanvas, 20, rtrwSize[1] - height_lg - 20, width_lg, height_lg);

                                        var imageData = rtrwCanvas.toDataURL('image/png');
                                        var input = document.createElement('input');
                                        input.type = 'hidden';
                                        input.name = 'peta_rtrw_image';
                                        input.value = imageData;
                                        $('#mainForm').append(input);

                                        document.body.removeChild(legendContainer);
                                        resolve();
                                    });
                                });
                                map_rtrw.renderSync();
                            }),
                            new Promise(resolve => {
                                map_rdtr.once('rendercomplete', function() {
                                    var canvasElements = map_rdtr.getViewport().querySelectorAll('canvas');
                                    canvasElements.forEach(function(canvas) {
                                        rdtrContext.drawImage(canvas, 0, 0, rdtrSize[0], rdtrSize[1]);
                                    });
                                    rdtrContext.fillStyle = 'white';
                                    rdtrContext.strokeStyle = 'black';
                                    rdtrContext.lineWidth = 2;
                                    rdtrContext.font = 'bold 14px Arial';
                                    rdtrContext.strokeRect(10, 10, 100, 25);
                                    rdtrContext.fillRect(10, 10, 100, 25);
                                    rdtrContext.fillStyle = 'black';
                                    rdtrContext.textAlign = 'center';
                                    rdtrContext.textBaseline = 'middle';
                                    rdtrContext.fillText('PETA RDTR', 60, 22);
                                    var imageData = rdtrCanvas.toDataURL('image/png');
                                    var input = document.createElement('input');
                                    input.type = 'hidden';
                                    input.name = 'peta_rdtr_image';
                                    input.value = imageData;
                                    $('#mainForm').append(input);
                                    resolve();
                                });
                                map_rdtr.renderSync();
                            }),
                            new Promise(resolve => {
                                map_garis.once('rendercomplete', function() {
                                    var canvasElements = map_garis.getViewport().querySelectorAll('canvas');
                                    canvasElements.forEach(function(canvas) {
                                        garisContext.drawImage(canvas, 0, 0, garisSize[0], garisSize[1]);
                                    });
                                    garisContext.fillStyle = 'white';
                                    garisContext.strokeStyle = 'black';
                                    garisContext.lineWidth = 2;
                                    garisContext.font = 'bold 14px Arial';
                                    garisContext.strokeRect(10, 10, 100, 25);
                                    garisContext.fillRect(10, 10, 100, 25);
                                    garisContext.fillStyle = 'black';
                                    garisContext.textAlign = 'center';
                                    garisContext.textBaseline = 'middle';
                                    garisContext.fillText('PETA GARIS', 60, 22);
                                    var imageData = garisCanvas.toDataURL('image/png');
                                    var input = document.createElement('input');
                                    input.type = 'hidden';
                                    input.name = 'peta_garis_image';
                                    input.value = imageData;
                                    $('#mainForm').append(input);
                                    resolve();
                                });
                                map_garis.renderSync();
                            })
                        ]).then(() => {
                            $('#mainForm').submit();
                        }).catch(error => {
                            console.error('Error capturing maps:', error);
                            alert('Terjadi kesalahan saat mengambil gambar peta');
                        });
                    } catch (error) {
                        console.error('Error:', error);
                        alert('Terjadi kesalahan dalam proses');
                    }
                }
            });
            $('#confirmSubmit').on('click', function() {
                try {
                    var rtrwSize = map_rtrw.getSize();
                    var rdtrSize = map_rdtr.getSize();
                    var garisSize = map_garis.getSize();
                    var rtrwCanvas = document.createElement('canvas');
                    rtrwCanvas.width = rtrwSize[0];
                    rtrwCanvas.height = rtrwSize[1];
                    var rtrwContext = rtrwCanvas.getContext('2d');
                    var rdtrCanvas = document.createElement('canvas');
                    rdtrCanvas.width = rdtrSize[0];
                    rdtrCanvas.height = rdtrSize[1];
                    var rdtrContext = rdtrCanvas.getContext('2d');
                    var garisCanvas = document.createElement('canvas');
                    garisCanvas.width = garisSize[0];
                    garisCanvas.height = garisSize[1];
                    var garisContext = garisCanvas.getContext('2d');
                    Promise.all([
                        new Promise(resolve => {
                            const scaleElement = scaleControl.element;
                            let width_skl = scaleElement.getBoundingClientRect().width*1.2;
                            let height_skl = scaleElement.getBoundingClientRect().height*2;
                            const container = document.createElement('div');
                            container.style.position = 'absolute';
                            container.style.padding = '2px';
                            container.style.top = '0';
                            container.style.left = '0';
                            container.style.background = 'white';
                            container.appendChild(scaleElement.cloneNode(true));
                            container.style.width = width_skl + 'px';
                            container.style.height = height_skl + 'px';
                            document.body.appendChild(container);
                            html2canvas(container).then(canvas => {
                                const dataURL = canvas.toDataURL("image/png");
                                var input = document.createElement('input');
                                input.type = 'hidden';
                                input.name = 'skala_image';
                                input.value = dataURL;
                                $('#mainForm').append(input);
                                resolve();
                                document.body.removeChild(container);
                            });
                        }),
                        new Promise(resolve => {
                            map_rtrw.once('rendercomplete', function() {
                                var canvasElements = map_rtrw.getViewport().querySelectorAll('canvas');
                                canvasElements.forEach(function(canvas) {
                                    rtrwContext.drawImage(canvas, 0, 0, rtrwSize[0], rtrwSize[1]);
                                });
                                rtrwContext.fillStyle = 'white';
                                rtrwContext.strokeStyle = 'black';
                                rtrwContext.lineWidth = 2;
                                rtrwContext.font = 'bold 14px Arial';
                                rtrwContext.strokeRect(10, 10, 100, 25);
                                rtrwContext.fillRect(10, 10, 100, 25);
                                rtrwContext.fillStyle = 'black';
                                rtrwContext.textAlign = 'center';
                                rtrwContext.textBaseline = 'middle';
                                rtrwContext.fillText('PETA RTRW', 60, 22);

                                const legendElement = legendControl.element;
                                const originalWidth = legendElement.getBoundingClientRect().width * 1.1;
                                const originalHeight = legendElement.getBoundingClientRect().height * 1.1;

                                let width_lg = originalWidth;
                                let height_lg = originalHeight;

                                const legendContainer = document.createElement('div');
                                legendContainer.style.position = 'absolute';
                                legendContainer.style.padding = '2px';
                                legendContainer.style.top = '0';
                                legendContainer.style.left = '0';
                                legendContainer.style.background = 'white';
                                legendContainer.style.border = '1px solid #ccc';
                                legendContainer.style.overflow = 'hidden';
                                legendContainer.style.width = width_lg + 'px';
                                legendContainer.style.height = height_lg + 'px';

                                const legendClone = legendElement.cloneNode(true);
                                legendContainer.appendChild(legendClone);

                                document.body.appendChild(legendContainer);
                                html2canvas(legendContainer).then(legendCanvas => {
                                    rtrwContext.drawImage(legendCanvas, 20, rtrwSize[1] - height_lg - 20, width_lg, height_lg);

                                    var imageData = rtrwCanvas.toDataURL('image/png');
                                    var input = document.createElement('input');
                                    input.type = 'hidden';
                                    input.name = 'peta_rtrw_image';
                                    input.value = imageData;
                                    $('#mainForm').append(input);

                                    document.body.removeChild(legendContainer);
                                    resolve();
                                });
                            });
                            map_rtrw.renderSync();
                        }),
                        new Promise(resolve => {
                            map_rdtr.once('rendercomplete', function() {
                                var canvasElements = map_rdtr.getViewport().querySelectorAll('canvas');
                                canvasElements.forEach(function(canvas) {
                                    rdtrContext.drawImage(canvas, 0, 0, rdtrSize[0], rdtrSize[1]);
                                });
                                rdtrContext.fillStyle = 'white';
                                rdtrContext.strokeStyle = 'black';
                                rdtrContext.lineWidth = 2;
                                rdtrContext.font = 'bold 14px Arial';
                                rdtrContext.strokeRect(10, 10, 100, 25);
                                rdtrContext.fillRect(10, 10, 100, 25);
                                rdtrContext.fillStyle = 'black';
                                rdtrContext.textAlign = 'center';
                                rdtrContext.textBaseline = 'middle';
                                rdtrContext.fillText('PETA RDTR', 60, 22);
                                var imageData = rdtrCanvas.toDataURL('image/png');
                                var input = document.createElement('input');
                                input.type = 'hidden';
                                input.name = 'peta_rdtr_image';
                                input.value = imageData;
                                $('#mainForm').append(input);
                                resolve();
                            });
                            map_rdtr.renderSync();
                        }),
                        new Promise(resolve => {
                            map_garis.once('rendercomplete', function() {
                                var canvasElements = map_garis.getViewport().querySelectorAll('canvas');
                                canvasElements.forEach(function(canvas) {
                                    garisContext.drawImage(canvas, 0, 0, garisSize[0], garisSize[1]);
                                });
                                garisContext.fillStyle = 'white';
                                garisContext.strokeStyle = 'black';
                                garisContext.lineWidth = 2;
                                garisContext.font = 'bold 14px Arial';
                                garisContext.strokeRect(10, 10, 100, 25);
                                garisContext.fillRect(10, 10, 100, 25);
                                garisContext.fillStyle = 'black';
                                garisContext.textAlign = 'center';
                                garisContext.textBaseline = 'middle';
                                garisContext.fillText('PETA GARIS', 60, 22);
                                var imageData = garisCanvas.toDataURL('image/png');
                                var input = document.createElement('input');
                                input.type = 'hidden';
                                input.name = 'peta_garis_image';
                                input.value = imageData;
                                $('#mainForm').append(input);
                                resolve();
                            });
                            map_garis.renderSync();
                        })
                    ]).then(() => {
                        $('#mainForm').submit();
                    }).catch(error => {
                        console.error('Error capturing maps:', error);
                        alert('Terjadi kesalahan saat mengambil gambar peta');
                    });
                } catch (error) {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan dalam proses');
                }
            });
        });
        $('#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