@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        #peta {
            height: 400px;
            margin-bottom: 20px;
        }

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

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

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

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

@section('content')
    <div class="container">
        <h1>Detail Data</h1>
        <form action="{{ route('pengurugan.update-status', $data->id) }}" method="POST" id="form-pengurugan">
            @csrf

            <input type="hidden" id="debug_array" name="debug_array">

            <input type="hidden" name="isian_pengurugan_array" id="isian_pengurugan_array">

            <h3>Data Pemohon</h3>
            <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" class="form-control" value="{{ $data->nama_pemohon }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="pekerjaan">Pekerjaan</label>
                        <input type="text" name="pekerjaan" class="form-control" value="{{ $data->pekerjaan }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="jabatan">Jabatan</label>
                        <input type="text" name="jabatan" class="form-control" value="{{ $data->jabatan }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="alamat">Alamat</label>
                        <input type="text" name="alamat" class="form-control" value="{{ $data->alamat }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="kegiatan_pengurugan">Kegiatan Pengurugan</label>
                        <input type="text" name="kegiatan_pengurugan" class="form-control"
                            value="{{ $data->kegiatan_pengurugan }}">
                    </div>
                </div>
            </div>
            <h3>Lokasi Pengurugan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="alamat_lokasi">Alamat Lokasi</label>
                        <input type="text" name="alamat_lokasi" class="form-control" value="{{ $data->alamat_lokasi }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas_lahan">Luas Lahan (m<sup>2</sup>)</label>
                        <input type="text" name="luas_lahan" class="form-control" value="{{ $data->luas_lahan }}">
                    </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 }}">
                    </div>
                </div>
            </div>
            <h3>File Dokumen </h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="file_ktp">File KTP</label>
                        @if ($data->file_ktp)
                            <div class="mb-2">
                                <embed src="{{ asset('storage/' . $data->file_ktp) }}" type="application/pdf" width="100%"
                                    height="600px">
                            </div>
                        @else
                            <p class="text-muted">Tidak ada file</p>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_bukti_kepemilikan">File Bukti Kepemilikan Tanah</label>
                        @if ($data->file_bukti_kepemilikan)
                            <div class="mb-2">
                                <embed src="{{ asset('storage/' . $data->file_bukti_kepemilikan) }}" type="application/pdf"
                                    width="100%" height="600px">
                            </div>
                        @else
                            <p class="text-muted">Tidak ada file</p>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_surat_pernyataan_pengelolaan">File Surat Pernyataan Kesanggupan Pengelolaan
                            Tanah</label>
                        @if ($data->file_surat_pernyataan_pengelolaan)
                            <div class="mb-2">
                                <embed src="{{ asset('storage/' . $data->file_surat_pernyataan_pengelolaan) }}"
                                    type="application/pdf" width="100%" height="600px">
                            </div>
                        @else
                            <p class="text-muted">Tidak ada file</p>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_legalitas_perusahaan">File Legalitas Perusahaan</label>
                        @if ($data->file_legalitas_perusahaan)
                            <div class="mb-2">
                                <embed src="{{ asset('storage/' . $data->file_legalitas_perusahaan) }}"
                                    type="application/pdf" width="100%" height="600px">
                            </div>
                        @else
                            <p class="text-muted">Tidak ada file</p>
                        @endif
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="file_krk">File KRK</label>
                        @if ($data->file_krk)
                            <div class="mb-2">
                                <embed src="{{ asset('storage/' . $data->file_krk) }}" type="application/pdf"
                                    width="100%" height="600px">
                            </div>
                        @else
                            <p class="text-muted">Tidak ada file</p>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_rencana_teknis">File Rencana Teknis Pengurugan</label>
                        @if ($data->file_rencana_teknis)
                            <div class="mb-2">
                                <embed src="{{ asset('storage/' . $data->file_rencana_teknis) }}" type="application/pdf"
                                    width="100%" height="600px">
                            </div>
                        @else
                            <p class="text-muted">Tidak ada file</p>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_bukti_kerjasama">File Bukti Kerjasama dengan Pemilik Material yang Berizin</label>
                        @if ($data->file_bukti_kerjasama)
                            <div class="mb-2">
                                <embed src="{{ asset('storage/' . $data->file_bukti_kerjasama) }}" type="application/pdf"
                                    width="100%" height="600px">
                            </div>
                        @else
                            <p class="text-muted">Tidak ada file</p>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_dokumen_lingkungan">File Dokumen Lingkungan</label>
                        @if ($data->file_dokumen_lingkungan)
                            <div class="mb-2">
                                <embed src="{{ asset('storage/' . $data->file_dokumen_lingkungan) }}"
                                    type="application/pdf" width="100%" height="600px">
                            </div>
                        @else
                            <p class="text-muted">Tidak ada file</p>
                        @endif
                    </div>
                </div>
            </div>
            <h3>Setting Cetak Pengurugan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="no_surat">No Surat</label>
                        <input type="text" name="no_surat" class="form-control" value="{{ $data->no_surat }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="tanggal_surat">Tanggal Surat</label>
                        <input type="date" name="tanggal_surat" class="form-control"
                            value="{{ $data->tanggal_surat }}">
                    </div>
                </div>
            </div>
            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Isian Pola Ruang
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="isian_pola_ruang" id="isian_pola_ruang" class="form-control" rows="3">{{ $data->isian_pola_ruang ?? 'Sesuai dengan yang tertuang pada Dokuemen KRK yang telah di terbitkan 600.3.2.1/1108-TR/DPUPRP, tanggal 24 September 2024 yang mengacu pada  Peraturan Daerah Kabupaten Banjar Nomor 04 Tahun 2021 tentang Rencana Tata Ruang Wilayah (RTRW) Kabupaten Banjar Tahun 2021-2041 lokasi yang dimohonka berada  Kawasan Permukiman Perkotaan ± 14.090,8 M².' }}</textarea>
            </div>


            <div class="form-group mb-3">
                <label for="isian_kawasan_rawan_bencana" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Isian Kawasan Rawan Bencana
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="isian_kawasan_rawan_bencana" id="isian_kawasan_rawan_bencana" class="form-control" rows="3">{{ $data->isian_kawasan_rawan_bencana ?? 'Dari data pola ruang tersebut di atas dan ditinjau dari peta rawan bencana pada dokumen RTRW Kabupaten Banjar Tahun 2021-2041 yang tertuang pada Perda Banjar Nomor 04 tahun 2021 tentang Rencana Tata Ruang Wilayah Kabupaten Banjar Tahun 2021 - 2041, lokasi yang dimohonkan berada pada Lokasi Rawan Banjir Tingkat Tinggi.' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Kontur Tanah
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="kontur_tanah" id="kontur_tanah" class="form-control" rows="3">{{ $data->kontur_tanah ?? 'Hasil analisis kontur tanah cenderung melengkung pada bagian tengah persil tanah yang dimohonkan.(Sumber: BIG (DEMNAS) dan Google Earth)' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Kawasan daerah irigasi
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="kawasan_daerah_irigasi" id="kawasan_daerah_irigasi" class="form-control" rows="3">{{ $data->kawasan_daerah_irigasi ?? 'Tidak termasuk dalam delineasi DI/DIR DIR Kewenagan Pusat/Provinsi/Kabupaten Banjar.(sumber : Bidang Sumber Daya Air, Dinas Pekerjaan Umum, Penataan Ruang dan Pertanahan Kabupaten Banjar yang mengacu pada  Permen PUPR Nomor 14 tahun 2015 tentang Kriteria Dan Penetapan Status Daerah Irigasi).' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Informasi Detail Pengurugan
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="informasi_pengurugan" id="informasi_pengurugan" class="form-control" rows="3">{{ $data->informasi_pengurugan ?? 'Hasil analisis peninjauan lapangan pada tanggal 25 Oktober 2024, tetuang pada Berita Acara Peninjauan Lokasi IP Nomor : 01/X-BAIPB-TR/DPUPRP/2024, tanggal 25 Oktober 2024. Didukung dengan hasil analiasi data tersebut di atas. Pengurugan lahan dilakukan sebagai upaya untuk keperluan meninggikan elevasi Prasarana Jalan dan areal bagian halamn bangunan agar tidak terendam saat musim penghujan dan sebagai upaya untuk meratakan kontur tanah terhadap jalan yang berada pada depan persil tanah. Dengan ini di informasikan ada beberapa hal yang harus diperhatikan mengenai persyaratan dan ketentuan teknis sebagai berikut :' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    list Informasi Detail Pengurugan
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="isian_baru_pengurugan" id="isian_baru_pengurugan" class="form-control" rows="3"></textarea>
            </div>
            <div class="d-flex align-items-center mb-3">
                <button type="button" id="tambah-isian-baru" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Tambah
                </button>
            </div>

            <table id="tabel-isian" class="table table-bordered">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Isian</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody id="tabel-isian-body">
                    <input type="hidden" value="{{ $isian_pengurugan->count() }}" id="total_isian_pengurugan">
                    @foreach ($isian_pengurugan as $isian)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <textarea name="pengurugan_isian[]" class="form-control" rows="3">{{ $isian->isian }}</textarea>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm hapus-isian">Hapus</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <h3>Peta Lokasi</h3>
            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-3">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">Pilih Metode Input Lokasi</h5>
                        </div>
                        <div class="card-body p-0">
                            <ul class="nav nav-tabs" id="inputTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="draw-tab" data-bs-toggle="tab"
                                        data-bs-target="#draw" type="button" role="tab" aria-controls="draw"
                                        aria-selected="true">
                                        <i class="fas fa-draw-polygon"></i> Gambar di Peta
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="upload-tab" data-bs-toggle="tab"
                                        data-bs-target="#upload" type="button" role="tab" aria-controls="upload"
                                        aria-selected="false">
                                        <i class="fas fa-file-upload"></i> Upload KML
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="manual-tab" data-bs-toggle="tab"
                                        data-bs-target="#manual" type="button" role="tab" aria-controls="manual"
                                        aria-selected="false">
                                        <i class="fas fa-map-marker-alt"></i> Input Manual
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content p-3" id="inputTabsContent">
                                <div class="tab-pane fade show active" id="draw" role="tabpanel" aria-labelledby="draw-tab">
                                    <div class="alert alert-info mb-3" role="alert">
                                        <i class="fas fa-info-circle"></i> Silakan gambar polygon atau titik pada peta untuk
                                        menentukan lokasi. Untuk polygon, klik pada peta untuk menambahkan titik, dan klik dua kali untuk
                                        menyelesaikan polygon. Untuk titik, klik sekali pada lokasi yang diinginkan.
                                    </div>
                                    <div class="btn-group mb-3" role="group">
                                        <button type="button" class="btn btn-outline-primary" id="draw-polygon">
                                            <i class="fas fa-draw-polygon"></i> Gambar Polygon
                                        </button>
                                        <button type="button" class="btn btn-outline-primary" id="draw-point">
                                            <i class="fas fa-map-marker"></i> Gambar Titik
                                        </button>
                                    </div>
                                    <input type="hidden" name="koordinat_verifikasi" id="koordinat_verifikasi">
                                </div>
                                
                                <div class="tab-pane fade" id="upload" role="tabpanel" aria-labelledby="upload-tab">
                                    <div class="alert alert-info mb-3" role="alert">
                                        <i class="fas fa-info-circle"></i> Upload file KML/KMZ pada kolom dibawah ini
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <input type="file" id="file_kml" class="form-control me-2">
                                        <button type="button" class="btn btn-primary" id="submit-kml">Simpan</button>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="manual" role="tabpanel" aria-labelledby="manual-tab">
                                    <div class="alert alert-info mb-3" role="alert">
                                        <i class="fas fa-info-circle"></i> Silakan input koordinat lokasi pada kolom dibawah ini
                                    </div>
                                    <div class="row" id="baris-koordinat">
                                        <div class="col-md-4">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text">Latitude:</span>
                                                <input type="text" class="form-control latitude">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text">Longitude:</span>
                                                <input type="text" class="form-control longitude">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-success btn-sm" id="add-koordinat">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary btn-sm mt-2" id="submit-koordinat">Simpan</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="peta"></div>
                </div>
            </div>

            <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 == 2) 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="pengurugan_ditandatangani">Pengurugan ditandatangani</label>
                <input type="file" name="pengurugan_ditandatangani" class="form-control"
                    value="{{ $data->pengurugan_ditandatangani }}" @if ($data->id_status == 2) readonly @endif>
            </div>

            <div class="form-group mb-3">
                <label for="id_status">Status</label>
                <select id="id_status" name="id_status" class="form-control" 
                    @if ($data->id_status == 5) readonly @endif>
                    @foreach ($status as $s)
                        <option value="{{ $s->id }}" {{ $data->id_status == $s->id ? 'selected' : '' }}>
                            {{ $s->status }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group mb-3" id="pin_input" style="display:none">
                <label>Masukkan PIN untuk mengubah status</label>
                <input type="password" id="pin_status" class="form-control" maxlength="6">
            </div>
            <script>
                $(document).ready(function() {
                    $('#id_status').change(function() {
                        if($(this).val() != {{ $data->id_status }}) {
                            $('#pin_input').show();
                        } else {
                            $('#pin_input').hide();
                        }
                    });
                    
                    $('form').submit(function(e) {
                        if($('#id_status').val() != {{ $data->id_status }}) {
                            e.preventDefault();
                            let pin = $('#pin_status').val();
                            if(pin != '{{ auth()->user()->role->pin_status_pengurugan }}') {
                                alert('PIN yang anda masukkan salah!');
                                return false;
                            }
                        }
                    });
                });
            </script>
            <button type="submit" class="btn btn-success">Simpan</button>
        </form>
    </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>
        $('#tambah-isian-baru').on('click', function() {
            let data = $('#isian_baru_pengurugan').val();
            let total_isian = parseInt($('#total_isian_pengurugan').val());
            total_isian++;
            $('#total_isian_pengurugan').val(total_isian);
            $('#isian_baru_pengurugan').val('');

            $('#tabel-isian-body').append(`
                <tr>
                    <td>${total_isian}</td>
                    <td><textarea name="pengurugan_isian[]" class="form-control" rows="3">${data}</textarea></td>
                    <td><button type="button" class="btn btn-danger btn-sm hapus-isian">Hapus</button></td>
                </tr>
            `);
        });
        $(document).on('click', '.hapus-isian', function() {
            // Hapus baris
            $(this).closest('tr').remove();
            
            // Update penomoran
            $('#tabel-isian-body tr').each(function(index) {
                $(this).find('td:first').text(index + 1);
            });
            
            // Update total isian
            let total_isian = parseInt($('#total_isian_pengurugan').val());
            total_isian--;
            $('#total_isian_pengurugan').val(total_isian);
        });
        $('#kirim-catatan').on('click', function() {
            $.ajax({
                url: "{{ route('data.kirim-catatan', $data->id) }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    catatan: $('#catatan').val()
                }
            });
        });
    </script>

<script>
    let map; // Deklarasi variabel map di scope global
    let source;
    let activeLayer = null;
    let draw;
    let drawType = 'Polygon'; // Default draw type

    $(document).ready(function() {
        // Inisialisasi peta
        map = new ol.Map({
            target: 'peta',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([114.847093, -3.413569]), // Koordinat Martapura
                zoom: 12
            })
        });

        // Layer untuk polygon dan point
        source = new ol.source.Vector();
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });

        // Ambil koordinat dari input dan tampilkan di peta
        let koordinat = $('#koordinat').val();
        if(koordinat) {
            let coords = koordinat.split(',').map(coord => {
                let [lon, lat] = coord.split(' ');
                return [parseFloat(lon), parseFloat(lat)];
            });

            let feature;
            if(coords.length === 1) {
                feature = new ol.Feature({
                    geometry: new ol.geom.Point(coords[0]).transform('EPSG:4326', 'EPSG:3857')
                });
            } else {
                feature = new ol.Feature({
                    geometry: new ol.geom.Polygon([coords]).transform('EPSG:4326', 'EPSG:3857')
                });
            }
            source.addFeature(feature);
            map.getView().fit(feature.getGeometry(), {
                padding: [50, 50, 50, 50]
            });
        }

        map.addLayer(vector);

        // Event listener untuk tombol draw
        $('#draw-polygon').on('click', function() {
            if (draw) {
                map.removeInteraction(draw);
            }
            source.clear();
            drawType = 'Polygon';
            addDrawInteraction();
            
            $(this).addClass('active');
            $('#draw-point').removeClass('active');
        });

        $('#draw-point').on('click', function() {
            if (draw) {
                map.removeInteraction(draw);
            }
            source.clear();
            drawType = 'Point';
            addDrawInteraction();
            
            $(this).addClass('active');
            $('#draw-polygon').removeClass('active');
        });

        function addDrawInteraction() {
            draw = new ol.interaction.Draw({
                source: source,
                type: drawType
            });

            draw.on('drawend', function(evt) {
                source.clear();
                
                const feature = evt.feature;
                const geometry = feature.getGeometry();
                
                if (drawType === 'Polygon') {
                    const coordinates = geometry.getCoordinates()[0];
                    const formattedCoords = coordinates.map(coord => {
                        const lonLat = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
                        return lonLat[0].toFixed(6) + ' ' + lonLat[1].toFixed(6);
                    }).join(',');
                    
                    $('#koordinat_verifikasi').val(formattedCoords);
                } else if (drawType === 'Point') {
                    const coordinate = geometry.getCoordinates();
                    const lonLat = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
                    $('#koordinat_verifikasi').val(lonLat[0].toFixed(6) + ',' + lonLat[1].toFixed(6));
                }
                
                source.addFeature(feature);
            });

            map.addInteraction(draw);
        }

        addDrawInteraction();
    });

    //submit kml
    $('#submit-kml').click(function() {
        if (activeLayer) {
            map.removeLayer(activeLayer);
        }

        var file = $('#file_kml');
        var formData = new FormData();
        formData.append('file', file[0].files[0]);

        if (file[0].files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var contents = e.target.result;
                var parser = new DOMParser();
                var kml = parser.parseFromString(contents, 'text/xml');

                var coordinates = Array.from(kml.getElementsByTagName('coordinates')).map(coord => coord
                    .textContent.trim());

                var coordArray = coordinates[0].split(' ').map(coord => {
                    var [lon, lat] = coord.split(',');
                    return [parseFloat(lon), parseFloat(lat)];
                });

                $('#koordinat_verifikasi').val(coordArray);

                var feature;
                if(coordArray.length === 1) {
                    feature = new ol.Feature({
                        geometry: new ol.geom.Point(coordArray[0]).transform('EPSG:4326', 'EPSG:3857')
                    });
                } else {
                    feature = new ol.Feature({
                        geometry: new ol.geom.Polygon([coordArray]).transform('EPSG:4326', 'EPSG:3857')
                    });
                }

                var source = new ol.source.Vector({
                    features: [feature]
                });

                var vectorLayer = new ol.layer.Vector({
                    source: source,
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.2)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#ffcc33',
                            width: 2
                        }),
                        image: new ol.style.Circle({
                            radius: 7,
                            fill: new ol.style.Fill({
                                color: '#ffcc33'
                            })
                        })
                    })
                });

                map.addLayer(vectorLayer);
                activeLayer = vectorLayer;

                map.getView().fit(feature.getGeometry(), {
                    padding: [50, 50, 50, 50]
                });
            };
            reader.readAsText(file[0].files[0]);
        } else {
            alert('Silakan pilih file KML terlebih dahulu');
        }
    });

    //simpan titik
    $('#add-koordinat').click(function() {
        $('#baris-koordinat').append(`
            <div class="row mt-2">
                <div class="col-md-4">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text">Latitude:</span>
                        <input type="text" name="latitude" class="form-control latitude">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text">Longitude:</span>
                        <input type="text" name="longitude" class="form-control longitude">
                    </div>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-danger btn-sm remove-koordinat"><i class="fas fa-minus"></i></button>
                </div>
            </div>
        `);

        $('.remove-koordinat').off('click').on('click', function() {
            $(this).closest('.row').remove();
        });
    });

    //submit koordinat
    $('#submit-koordinat').click(function() {
        if (activeLayer) {
            map.removeLayer(activeLayer);
        }

        var coordArray = [];
        var latitude = [];
        var longitude = [];
        $('.latitude').each(function() {
            latitude.push($(this).val());
        });
        $('.longitude').each(function() {
            longitude.push($(this).val());
        });

        for (var i = 0; i < latitude.length; i++) {
            coordArray.push([longitude[i], latitude[i]]);
        }

        $('#koordinat_verifikasi').val(coordArray);

        var coordinates = coordArray.map(coord => [parseFloat(coord[0]), parseFloat(coord[1])]);
        var feature;
        
        if(coordinates.length === 1) {
            feature = new ol.Feature({
                geometry: new ol.geom.Point(coordinates[0]).transform('EPSG:4326', 'EPSG:3857')
            });
        } else {
            feature = new ol.Feature({
                geometry: new ol.geom.Polygon([coordinates]).transform('EPSG:4326', 'EPSG:3857')
            });
        }

        var source = new ol.source.Vector({
            features: [feature]
        });

        var vectorLayer = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });

        map.addLayer(vectorLayer);
        activeLayer = vectorLayer;

        map.getView().fit(feature.getGeometry(), {
            padding: [50, 50, 50, 50]
        });
    });
</script>

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