@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;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        #polygon-button {
            z-index: 1000;
            left: 10px;
            bottom: 10px;
        }

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

        .card {
            overflow: hidden;
        }

        .ol-viewport {
            max-width: 100%;
        }

        .ol-map {
            max-width: 100%;
        }

        .alert {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        <h1>Tambah Data</h1>
        <div class="alert alert-info" style="display: block !important; margin-bottom: 20px;">
            <i class="fas fa-info-circle"></i> Catatan: Field dengan tanda <span class="text-danger">*</span> wajib diisi
        </div>
        <form action="{{ route('peil-banjir.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="koordinat" id="koordinat">
            <h3>Data Pemohon</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="nama_pemohon">Nama Pemohon <span class="text-danger">*</span></label>
                        <input type="text" name="nama_pemohon" class="form-control" value="{{ old('nama_pemohon', $data->nama_pemohon ?? '') }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat">Alamat <span class="text-danger">*</span></label>
                        <input type="text" name="alamat" class="form-control @error('alamat') is-invalid @enderror" value="{{ old('alamat', $data->alamat ?? '') }}" required>
                        @error('alamat')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <label for="no_telp">No. WA <span class="text-danger">*</span></label>
                        <input id="no_telp" type="text" name="no_telp" class="form-control" value="{{ old('no_telp', $data->no_telp ?? '') }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="npwp">NPWP <span class="text-danger">*</span></label>
                        <input id="npwp" type="text" name="npwp" class="form-control" value="{{ old('npwp', $data->npwp ?? '') }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="email_aktif">Email Aktif <span class="text-danger">*</span></label>
                        <input type="email" name="email_aktif" class="form-control" value="{{ old('email_aktif', $data->email_aktif ?? '') }}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="nik">NIK <span class="text-danger">*</span></label>
                        <input id="nik" type="text" name="nik" class="form-control" value="{{ old('nik', $data->nik ?? '') }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="no_kontrak">No Kontrak <span class="text-danger">*</span></label>
                        <input id="no_kontrak" type="text" name="no_kontrak" class="form-control" value="{{ old('no_kontrak', $data->no_kontrak ?? '') }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="nama_perusahaan">Nama Perusahaan</label>
                        <input type="text" name="nama_perusahaan" class="form-control" value="{{ old('nama_perusahaan', $data->nama_perusahaan ?? '') }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat_perusahaan">Alamat Perusahaan</label>
                        <input type="text" name="alamat_perusahaan" class="form-control" value="{{ old('alamat_perusahaan', $data->alamat_perusahaan ?? '') }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="rencana_pembangunan">Rencana Pembangunan <span class="text-danger">*</span></label>
                        <input type="text" name="rencana_pembangunan" class="form-control" required>
                    </div>
                </div>
            </div>
            <h3>Rencana Kegiatan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="no_peilbanjir">No Peil Banjir <span class="text-danger">*</span></label>
                        <input type="text" name="no_peilbanjir" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="jalan">Jalan <span class="text-danger">*</span></label>
                        <input type="text" name="jalan" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas">Luas <span class="text-danger">*</span></label>
                        <input type="text" name="luas" class="form-control" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="kecamatan">Kecamatan <span class="text-danger">*</span></label>
                        <select name="id_kecamatan" class="form-control" id="kecamatan" required>
                            <option value="">Pilih Kecamatan</option>
                            @foreach ($kecamatan as $item)
                                <option value="{{ $item->id }}">{{ $item->nama_kecamatan }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="desa">Desa <span class="text-danger">*</span></label>
                            <select name="id_desa" class="form-control" id="desa" required  >
                            <option value="">Pilih Desa</option>
                        </select>
                    </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 <i class="fas fa-info-circle text-info" 
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Format file: JPG/PNG/PDF, Ukuran maksimal: 2MB, Scan KTP asli yang masih berlaku"></i><span
                                class="text-danger">*</span></label>
                        <input type="file" name="file_ktp" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_npwp">File NPWP <i class="fas fa-info-circle text-info" 
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Format file: JPG/PNG/PDF, Ukuran maksimal: 2MB, Scan kartu NPWP asli"></i><span
                                class="text-danger">*</span></label>
                        <input type="file" name="file_npwp" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_oss">File KKPR/KRK <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip"
                                data-bs-placement="right"
                                title="Format file: JPG/PNG/PDF, Ukuran maksimal: 2MB, Dokumen KKPR/KRK yang masih berlaku"></i><span
                                class="text-danger">*</span></label>
                        <input type="file" name="file_krk" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_akta_pendirian">File Akta Pendirian Perusahaan <i class="fas fa-info-circle text-info"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Format file: JPG/PNG/PDF, Ukuran maksimal: 2MB, Akta Pendirian Perusahaan apabila ppermohonan dari CV/PT"></i><span
                                class="text-danger">*</span></label>
                        <input type="file" name="file_akta_pendirian" class="form-control" required>
                    </div>
                </div>
                <div class="col-md-6">

                    <div class="form-group mb-3">
                        <label for="file_site_plan">File Site Plan <i class="fas fa-info-circle text-info" 
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Format file: JPG/PNG/PDF, Ukuran maksimal: 2MB, Scan Site Plan berisi informasi (Posisi sungai terdekat, Posisi drainase/ Saluran terdekat, Pola aliran sungai/drainase, Rencana posisi Drainase (Jika Ada), Rencana posisi gorong-gorong/Box Culvert (Jika Ada), Rencana posisi prasarana penghubung (Jika Ada))"></i><span
                                class="text-danger">*</span></label>
                        <input type="file" name="file_site_plan" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_suratpernyataan">File Surat Pernyataan <i class="fas fa-info-circle text-info"
                                data-bs-toggle="tooltip" data-bs-placement="right"
                                title="Format file: JPG/PNG/PDF, Ukuran maksimal: 2MB, Surat pernyataan bermaterai dan ditandatangani"></i><span
                                class="text-danger">*</span></label>
                        <input type="file" name="file_suratpernyataan" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_foto">File Foto <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip"
                                data-bs-placement="right"
                                title="Format file: JPG/PNG, Ukuran maksimal: 2MB, Foto lokasi terkini"></i><span
                                class="text-danger">*</span></label>
                        <input type="file" name="file_foto" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="form-group mb-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Bukti Kepemilikan Tanah</h5>
                    <button type="button" class="btn btn-success btn-sm" id="tambah-bukti">
                        <i class="fas fa-plus"></i> Tambah Bukti
                    </button>
                </div>
                <div id="bukti-tanah-container">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="jenis_sertifikat_tanah">Jenis Bukti Atas Tanah <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Pilih salah satu jenis sertifikat tanah yang anda miliki"></i><span class="text-danger">*</span></label>
                            <select name="jenis_sertifikat_tanah[]" class="form-control" required>
                                <option value="">Pilih Jenis Bukti</option>
                                <option value="SHM">Sertifikat Hak Milik (SHM)</option>
                                <option value="HGU">Hak Guna Usaha (HGU)</option>
                                <option value="SKT">Surat Keterangan Tanah (SKT)</option>
                                <option value="HGB">Hak Guna Bangunan (HGB)</option>
                                <option value="Hak Pakai">Hak Pakai</option>
                                <option value="Petok D">Petok D</option>
                                <option value="Letter C">Letter C</option>
                                <option value="Surat Girik">Surat Girik</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="no_sertifikat">Nomor Sertifikat/Bukti Kepemilikan <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Masukkan nomor yang tertera pada bukti kepemilikan tanah"></i><span class="text-danger">*</span></label>
                            <input type="text" name="no_sertifikat[]" class="form-control" required placeholder="Masukkan nomor sertifikat/bukti kepemilikan">
                        </div>
                        <div class="col-md-3">
                            <label for="file_bukti_kepemilikan">File Bukti Kepemilikan Tanah <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Format file: JPG/PNG/PDF, Ukuran maksimal: 2MB, Sertifikat tanah/akta jual beli/bukti kepemilikan lainnya yang sah"></i><span class="text-danger">*</span></label>
                            <input type="file" name="file_bukti_kepemilikan[]" class="form-control" required>
                        </div>
                        <div class="col-md-1 d-flex align-items-end">
                            <button type="button" class="btn btn-danger btn-sm hapus-bukti mt-4">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                </div>

                <script>
                    document.getElementById('tambah-bukti').addEventListener('click', function() {
                        const container = document.getElementById('bukti-tanah-container');
                        const newRow = document.createElement('div');
                        newRow.className = 'row mb-3';
                        newRow.innerHTML = `
                            <div class="col-md-4">
                                <label for="jenis_sertifikat_tanah">Jenis Bukti Atas Tanah <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Pilih salah satu jenis sertifikat tanah yang anda miliki"></i><span class="text-danger">*</span></label>
                                <select name="jenis_sertifikat_tanah[]" class="form-control" required>
                                    <option value="">Pilih Jenis Bukti</option>
                                    <option value="SHM">Sertifikat Hak Milik (SHM)</option>
                                    <option value="HGU">Hak Guna Usaha (HGU)</option>
                                    <option value="SKT">Surat Keterangan Tanah (SKT)</option>
                                    <option value="HGB">Hak Guna Bangunan (HGB)</option>
                                    <option value="Hak Pakai">Hak Pakai</option>
                                    <option value="Petok D">Petok D</option>
                                    <option value="Letter C">Letter C</option>
                                    <option value="Surat Girik">Surat Girik</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="no_sertifikat">Nomor Sertifikat/Bukti Kepemilikan <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Masukkan nomor yang tertera pada bukti kepemilikan tanah"></i><span class="text-danger">*</span></label>
                                <input type="text" name="no_sertifikat[]" class="form-control" required placeholder="Masukkan nomor sertifikat/bukti kepemilikan">
                            </div>
                            <div class="col-md-3">
                                <label for="file_bukti_kepemilikan">File Bukti Kepemilikan Tanah <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Format file: JPG/PNG/PDF, Ukuran maksimal: 2MB, Sertifikat tanah/akta jual beli/bukti kepemilikan lainnya yang sah"></i><span class="text-danger">*</span></label>
                                <input type="file" name="file_bukti_kepemilikan[]" class="form-control" required>
                            </div>
                            <div class="col-md-1 d-flex align-items-end">
                                <button type="button" class="btn btn-danger btn-sm hapus-bukti mt-4">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        `;
                        container.appendChild(newRow);

                        // Tambahkan event listener untuk tombol hapus
                        newRow.querySelector('.hapus-bukti').addEventListener('click', function() {
                            newRow.remove();
                        });
                    });
                </script>
            </div>

            <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">
                            <ul class="nav nav-tabs mb-3" 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" id="inputTabsContent">
                            <div class="tab-pane fade show active" id="draw" role="tabpanel"aria-labelledby="draw-tab">
                                <div class="alert alert-info" 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>
                                <div class="tab-pane fade" id="upload" role="tabpanel" aria-labelledby="upload-tab">
                                    <div class="alert alert-info" 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" 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>
            <button id="submit-button" type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <a href="https://wa.me/6281358721520" class="float" target="_blank">
        <i class="fab fa-whatsapp my-float"></i>
    </a>
@endsection



@push('scripts')
<script>
    var desa = {!! json_encode($desa) !!};
    $('#kecamatan').change(function() {
        var kecamatan = $(this).val();
        $('#desa').empty();
        $('#desa').append('<option value="">Pilih Desa</option>');
        desa.forEach(function(item) {
            if (item.id_kecamatan == kecamatan) {
                console.log(item.nama_desa);
                $('#desa').append('<option value="' + item.id + '">' + item.nama_desa + '</option>');
            }
        });
    });
    $('#nik').on('input', function() {
        var value = $(this).val().replace(/[^0-9]/g, '');
        if (value.length > 16) {
            value = value.slice(0, 16);
        }

        // Update nilai input
        $(this).val(value);
    });
    $('#no_telp').on('input', function() {
        // Hapus semua karakter non-angka
        var value = $(this).val().replace(/[^0-9]/g, '');

        // Batasi panjang maksimal 12 digit
        if (value.length > 12) {
            value = value.slice(0, 12);
        }

        // Tambahkan tanda "-" setiap 4 digit
        value = value.replace(/(\d{4})(?=\d)/g, '$1-');

        // Update nilai input
        $(this).val(value);
    });

    $('#npwp').on('input', function() {
        // Hapus semua karakter non-angka
        var value = $(this).val().replace(/[^0-9]/g, '');

        // Batasi panjang maksimal 15 digit
        if (value.length > 15) {
            value = value.slice(0, 15);
        }

        // Format NPWP: XX.XXX.XXX.X-XXX.XXX
        value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{1})(\d{3})(\d{3})/, '$1.$2.$3.$4-$5.$6');

        // Update nilai input
        $(this).val(value);
    });

    $('#nib').on('input', function() {
        // Hapus semua karakter non-angka
        var value = $(this).val().replace(/[^0-9]/g, '');

        // Batasi panjang maksimal 13 digit
        if (value.length > 13) {
            value = value.slice(0, 13);
        }

        // Update nilai input
        $(this).val(value);
    });

    $('#luas_tanah').on('input', function() {
        // Hapus semua karakter non-angka
        var value = $(this).val().replace(/[^0-9]/g, '');

        // Update nilai input
        $(this).val(value);
    });

    $('#jumlah_lantai').on('input', function() {
        // Hapus semua karakter non-angka
        var value = $(this).val().replace(/[^0-9]/g, '');

        // Batasi panjang maksimal 2 digit
        if (value.length > 2) {
            value = value.slice(0, 2);
        }

        // Update nilai input
        $(this).val(value);
    });

    $('#submit-button').click(function() {
        if (confirm('Apakah anda yakin ingin mengajukan data ini?')) {
            //lanjutkan submit
            $('#submit-button').submit();
        } else {
            return false;
        }
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></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'
                    })
                })
            })
        });
        map.addLayer(vector);

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

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

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

                draw.on('drawend', function(evt) {
                    // Hapus fitur yang ada sebelum menambahkan yang baru
                    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').val(formattedCoords);
                    } else if (drawType === 'Point') {
                        const coordinate = geometry.getCoordinates();
                        const lonLat = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
                        $('#koordinat').val(lonLat[0].toFixed(6) + ',' + lonLat[1].toFixed(6));
                    }
                    
                    // Tambahkan fitur baru ke source
                    source.addFeature(feature);
                });

                map.addInteraction(draw);
            }

            // Initial draw interaction
            addDrawInteraction();
        });

    //submit kml
    $('#submit-kml').click(function() {
        // Hapus layer yang aktif jika ada
        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;
                // Parse KML menggunakan DOMParser
                var parser = new DOMParser();
                var kml = parser.parseFromString(contents, 'text/xml');

                // Ambil koordinat dari elemen <coordinates> dalam KML
                var coordinates = Array.from(kml.getElementsByTagName('coordinates')).map(coord => coord
                    .textContent.trim());

                // Konversi string koordinat KML menjadi array koordinat
                var coordArray = coordinates[0].split(' ').map(coord => {
                    var [lon, lat] = coord.split(',');
                    return [parseFloat(lon), parseFloat(lat)];
                });

                //simpan di input hidden
                $('#koordinat').empty();
                $('#koordinat').val(coordArray);

                var feature;
                if(coordArray.length === 1) {
                    // Jika hanya satu koordinat, buat Point
                    feature = new ol.Feature({
                        geometry: new ol.geom.Point(coordArray[0]).transform('EPSG:4326', 'EPSG:3857')
                    });
                } else {
                    // Jika lebih dari satu koordinat, buat Polygon
                    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>
        `);

        // Tambahkan event handler untuk tombol remove yang baru ditambahkan
        $('.remove-koordinat').off('click').on('click', function() {
            $(this).closest('.row').remove();
        });
    });

    //submit koordinat
    $('#submit-koordinat').click(function() {
        // Hapus layer yang aktif jika ada
        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').empty();
        $('#koordinat').val(coordArray);

        var coordinates = coordArray.map(coord => [parseFloat(coord[0]), parseFloat(coord[1])]);
        var feature;
        
        if(coordinates.length === 1) {
            // Jika hanya satu koordinat, buat Point
            feature = new ol.Feature({
                geometry: new ol.geom.Point(coordinates[0]).transform('EPSG:4326', 'EPSG:3857')
            });
        } else {
            // Jika lebih dari satu koordinat, buat Polygon
            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>
@endpush