@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;
            position: relative;
        }

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

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

        .position-relative {
            position: relative !important;
        }
        .btn-group .btn {
            margin-right: 5px;
        }
        .btn-group .btn:last-child {
            margin-right: 0;
        }
        #map {
            height: 400px;
            width: 100%;
        }
        .layer-switcher {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 1000;
        }
        .layer-switcher label {
            display: block;
            margin-bottom: 5px;
            cursor: pointer;
        }
        .layer-switcher input[type="radio"] {
            margin-right: 5px;
        }
    </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>

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

        <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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->kegiatan_pengurugan ?? '' : '') }}" required>
                    </div>

                    <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', $onkrk ? $onkrk->nik ?? '' : '') }}" required>
                    </div>
                </div>

                <div class="col-md-6">
                    <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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->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', $onkrk ? $onkrk->jabatan ?? '' : '') }}">
                    </div>

                    <div class="form-group mb-3">
                        <label for="no_surat">Nomor Surat <span class="text-danger">*</span></label>
                        <input type="text" name="no_surat" id="no_surat" class="form-control" value="{{ old('no_surat') }}" required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="tanggal_surat">Tanggal Surat <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_surat" id="tanggal_surat" class="form-control" value="{{ old('tanggal_surat') }}" required>
                    </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="luas_als_hak">Luas Pada Alas Hak (m<sup>2</sup>) <span class="text-danger">*</span></label>
                        <input type="number" name="luas_als_hak" class="form-control" value="" 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>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" name="file_kml_asli" 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 class="layer-switcher">
                            <label>
                                <input type="radio" name="layer" value="OpenStreetMap" checked> OpenStreetMap
                            </label>
                            <label>
                                <input type="radio" name="layer" value="Satellite"> Satellite
                            </label>
                        </div>
                    </div>
                    <textarea name="geone_pemohon" id="geone_pemohon" style="display: none;"></textarea>
                </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>
    </div>
@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);
        });

        $('#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(),
                        title: 'OpenStreetMap'
                    }),
                    new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                            attributions: 'Imagery © Esri'
                        }),
                        title: 'Satellite',
                        visible: false
                    })
                ],
                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');
            });

            // Tambahkan event listener untuk layer switcher
            document.querySelectorAll('input[name="layer"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    const layers = map.getLayers();
                    layers.forEach(layer => {
                        // Hanya set visibility untuk layer Tile (peta dasar)
                        if (layer instanceof ol.layer.Tile) {
                            layer.setVisible(layer.get('title') === this.value);
                        }
                    });
                });
            });

            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[1].toFixed(6) + ' ' + lonLat[0].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[1].toFixed(6) + ',' + lonLat[0].toFixed(6));
                    }

                    // Tambahkan fitur baru ke source
                    // source.addFeature(feature);



                    const geojsonFormat = new ol.format.GeoJSON();
                    // Convert feature to GeoJSON
                    const geojsonStr = geojsonFormat.writeFeature(feature, {
                        featureProjection: 'EPSG:3857', // Adjust if needed
                    });
                    $('#geone_pemohon').val(geojsonStr);

                });

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

                    const geojsonFormat = new ol.format.GeoJSON();
                    const geojsonStr = geojsonFormat.writeFeatures([feature], {
                        featureProjection: 'EPSG:3857', // Adjust projection if needed
                    });

                    $('#geone_pemohon').val(geojsonStr);


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

            const geojsonFormat = new ol.format.GeoJSON();
            const geojsonStr = geojsonFormat.writeFeatures([feature], {
                featureProjection: 'EPSG:3857', // Adjust projection if needed
            });

            $('#geone_pemohon').val(geojsonStr);

            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>

    <script>
        $(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