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

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

        .container {
            padding: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .row {
            margin-bottom: 20px;
        }

        .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('pengurugan.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="koordinat" id="koordinat">
            <input type="hidden" name="id_user" value="{{ Auth::user()->id }}">
            <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" id="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" id="alamat" class="form-control" value="{{ old('alamat', $data->alamat ?? '') }}" required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="no_telp">No. WA <span class="text-danger">*</span></label>
                        <input type="text" name="no_telp" id="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 type="text" name="npwp" id="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" id="email_aktif" class="form-control" value="{{ old('email_aktif', $data->email_aktif ?? '') }}" required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="kegiatan_pengurugan">Kegiatan Pengurugan <span class="text-danger">*</span></label>
                        <input type="text" name="kegiatan_pengurugan" id="kegiatan_pengurugan" class="form-control" value="{{ old('kegiatan_pengurugan', $data->kegiatan_pengurugan ?? '') }}" 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 type="text" name="nik" id="nik" class="form-control" value="{{ old('nik', $data->nik ?? '') }}" required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="nama_perusahaan">Nama Perusahaan</label>
                        <input type="text" name="nama_perusahaan" id="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" id="alamat_perusahaan" class="form-control" value="{{ old('alamat_perusahaan', $data->alamat_perusahaan ?? '') }}">
                    </div>

                    <div class="form-group mb-3">
                        <label for="nib">NIB <span class="text-danger">*</span></label>
                        <input type="text" name="nib" id="nib" class="form-control" value="{{ old('nib', $data->nib ?? '') }}" required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="pekerjaan">Pekerjaan <span class="text-danger">*</span></label>
                        <input type="text" name="pekerjaan" id="pekerjaan" class="form-control" value="{{ old('pekerjaan', $data->pekerjaan ?? '') }}" required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="jabatan">Jabatan</label>
                        <input type="text" name="jabatan" id="jabatan" class="form-control" value="{{ old('jabatan', $data->jabatan ?? '') }}">
                    </div>
                </div>
            </div>
            
            <h3>Lokasi Pengurugan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="no_pengurugan">Nomor Pengurugan <span class="text-danger">*</span></label>
                        <input type="text" name="no_pengurugan" id="no_pengurugan" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat_lokasi">Alamat Lokasi <span class="text-danger">*</span></label>
                        <input type="text" name="alamat_lokasi" id="alamat_lokasi" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas_lahan">Luas Lahan (m<sup>2</sup>) <span class="text-danger">*</span></label>
                        <input type="text" name="luas_lahan" id="luas_lahan" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="jumlah_lantai">Rencana Jumlah Lantai Bangunan <span class="text-danger">*</span></label>
                        <input type="number" name="jumlah_lantai" id="jumlah_lantai" 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" id="kecamatan" class="form-control" 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" id="desa" class="form-control" required>
                            <option value="">Pilih Desa</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="volume_pengurugan">Volume Pengurugan (m<sup>3</sup>) <span class="text-danger">*</span></label>
                        <input type="number" name="volume_pengurugan" id="volume_pengurugan" class="form-control" required>
                    </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_surat_pernyataan_pengelolaan">File Surat Pernyataan Kesanggupan Pengelolaan 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, Surat pernyataan bermaterai dan ditandatangani"></i><span class="text-danger">*</span></label>
                        <input type="file" name="file_surat_pernyataan_pengelolaan" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_legalitas_perusahaan">File Legalitas 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, Dokumen legalitas perusahaan yang masih berlaku"></i><span class="text-danger">*</span></label>
                        <input type="file" name="file_legalitas_perusahaan" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_krk">File 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, Keterangan Rencana Kota yang masih berlaku"></i></label>
                        <input type="file" name="file_krk" class="form-control">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="file_rencana_teknis">File Rencana Teknis Pengurugan <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 rencana teknis yang ditandatangani oleh tenaga ahli"></i><span class="text-danger">*</span></label>
                        <input type="file" name="file_rencana_teknis" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_bukti_kerjasama">File Bukti Kerjasama dengan Pemilik Material yang Berizin <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 perjanjian kerjasama yang sah"></i><span class="text-danger">*</span></label>
                        <input type="file" name="file_bukti_kerjasama" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_dokumen_lingkungan">File Dokumen Lingkungan <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 analisis dampak lingkungan yang telah disetujui"></i><span class="text-danger">*</span></label>
                        <input type="file" name="file_dokumen_lingkungan" 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 <span class="text-danger">*</span></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>
                        <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="form-check mb-3">
                                <input class="form-check-input" type="radio" name="input_type" id="type-polygon" value="polygon" checked>
                                <label class="form-check-label" for="type-polygon">
                                    Polygon
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="input_type" id="type-point" value="point">
                                <label class="form-check-label" for="type-point">
                                    Titik
                                </label>
                            </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>

    <!-- Tombol WhatsApp Mengambang -->
    <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() {
            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').empty();
                    $('#koordinat').val(coordArray);

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

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

                    var kmlVector = 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
                            })
                        })
                    });

                    map.addLayer(kmlVector);
                    activeLayer = kmlVector;

                    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').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]
            });
        });

        $(document).ready(function() {
            // Fungsi untuk mengisi form otomatis
            function autoFillForm() {
                $('#nama_pemohon').on('blur', function() {
                    let nama = $(this).val();
                    if (nama) {
                        $.ajax({
                            url: "{{ route('pengurugan.getData') }}", // Buat route baru untuk ini
                            type: "GET",
                            data: { nama_pemohon: nama },
                            success: function(response) {
                                if (response.data) {
                                    // Isi form dengan data yang ditemukan
                                    $('#alamat').val(response.data.alamat);
                                    $('#no_telp').val(response.data.no_telp);
                                    $('#npwp').val(response.data.npwp);
                                    $('#email_aktif').val(response.data.email_aktif);
                                    $('#kegiatan_pengurugan').val(response.data.kegiatan_pengurugan);
                                    $('#nik').val(response.data.nik);
                                    $('#nama_perusahaan').val(response.data.nama_perusahaan);
                                    $('#alamat_perusahaan').val(response.data.alamat_perusahaan);
                                    $('#nib').val(response.data.nib);
                                    $('#pekerjaan').val(response.data.pekerjaan);
                                    $('#jabatan').val(response.data.jabatan);
                                }
                            }
                        });
                    }
                });
            }

            // Panggil fungsi
            autoFillForm();
        });
    </script>
@endpush