@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>Edit 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.update', $pengurugan->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <input type="hidden" name="koordinat" id="koordinat" value="{{ $pengurugan->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" class="form-control" value="{{ $pengurugan->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" value="{{ $pengurugan->alamat }}" required>
                    </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="{{ $pengurugan->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="{{ $pengurugan->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="{{ $pengurugan->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="{{ $pengurugan->nik }}" 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="{{ $pengurugan->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="{{ $pengurugan->alamat_perusahaan }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="nib">NIB <span class="text-danger">*</span></label>
                        <input id="nib" type="text" name="nib" class="form-control" value="{{ $pengurugan->nib }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="pekerjaan">Pekerjaan <span class="text-danger">*</span></label>
                        <input type="text" name="pekerjaan" class="form-control" id="pekerjaan" value="{{ $pengurugan->pekerjaan }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="jabatan">Jabatan</label>
                        <input type="text" name="jabatan" class="form-control" value="{{ $pengurugan->jabatan }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="kegiatan_pengurugan">Kegiatan Pengurugan <span class="text-danger">*</span></label>
                        <input type="text" name="kegiatan_pengurugan" class="form-control" value="{{ $pengurugan->kegiatan_pengurugan }}" required>
                    </div>
                </div>
            </div>
            <h3>Lokasi Pengurugan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="alamat_lokasi">Alamat Lokasi <span class="text-danger">*</span></label>
                        <input type="text" name="alamat_lokasi" class="form-control" id="alamat_lokasi" value="{{ $pengurugan->alamat_lokasi }}" 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" class="form-control" value="{{ $pengurugan->luas_lahan }}" required>
                    </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" class="form-control" value="{{ $pengurugan->volume_pengurugan }}" 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" class="form-control" value="{{ $pengurugan->jumlah_lantai }}" 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 }}" {{ $pengurugan->id_kecamatan == $item->id ? 'selected' : '' }}>{{ $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>
                            @foreach ($desa as $item)
                                <option value="{{ $item->id }}" {{ $pengurugan->id_desa == $item->id ? 'selected' : '' }}>{{ $item->nama_desa }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div id="map" style="height: 400px; width: 100%; position: relative;"></div>
                    <input type="hidden" name="latitude" id="latitude" value="{{ $pengurugan->latitude }}">
                    <input type="hidden" name="longitude" id="longitude" value="{{ $pengurugan->longitude }}">
                </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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_ktp" class="form-control">
                        @if($pengurugan->file_ktp)
                            <small class="text-muted">File saat ini: {{ $pengurugan->file_ktp }}</small>
                        @endif
                    </div>
                    <div class="form-group mb-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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_bukti_kepemilikan" class="form-control">
                        @if($pengurugan->file_bukti_kepemilikan)
                            <small class="text-muted">File saat ini: {{ $pengurugan->file_bukti_kepemilikan }}</small>
                        @endif
                    </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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_surat_pernyataan_pengelolaan" class="form-control">
                        @if($pengurugan->file_surat_pernyataan_pengelolaan)
                            <small class="text-muted">File saat ini: {{ $pengurugan->file_surat_pernyataan_pengelolaan }}</small>
                        @endif
                    </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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_legalitas_perusahaan" class="form-control">
                        @if($pengurugan->file_legalitas_perusahaan)
                            <small class="text-muted">File saat ini: {{ $pengurugan->file_legalitas_perusahaan }}</small>
                        @endif
                    </div>
                </div>

                <div class="col-md-6">
                    <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><span class="text-danger">*</span></label>
                        <input type="file" name="file_krk" class="form-control">
                        @if($pengurugan->file_krk)
                            <small class="text-muted">File saat ini: {{ $pengurugan->file_krk }}</small>
                        @endif
                    </div>
                    <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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_rencana_teknis" class="form-control">
                        @if($pengurugan->file_rencana_teknis)
                            <small class="text-muted">File saat ini: {{ $pengurugan->file_rencana_teknis }}</small>
                        @endif
                    </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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_bukti_kerjasama" class="form-control">
                        @if($pengurugan->file_bukti_kerjasama)
                            <small class="text-muted">File saat ini: {{ $pengurugan->file_bukti_kerjasama }}</small>
                        @endif
                    </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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_dokumen_lingkungan" class="form-control">
                        @if($pengurugan->file_dokumen_lingkungan)
                            <small class="text-muted">File saat ini: {{ $pengurugan->file_dokumen_lingkungan }}</small>
                        @endif
                    </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 pada peta untuk
                                menentukan lokasi. Klik pada peta untuk menambahkan titik, dan klik dua kali untuk
                                menyelesaikan polygon.
                            </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="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">Update</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 mengubah 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;

        $(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([112.7378, -7.2756]), // Koordinat Surabaya
                    zoom: 12
                })
            });

            // Layer untuk polygon
            var 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);

            // Interaksi menggambar
            let draw = new ol.interaction.Draw({
                source: source,
                type: 'Polygon'
            });

            // Event listener untuk menangkap koordinat setelah menggambar
            draw.on('drawend', function(evt) {
                const feature = evt.feature;
                const polygon = feature.getGeometry();
                const coordinates = polygon.getCoordinates()[0];

                // Konversi koordinat ke format yang diinginkan
                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(',');

                // Simpan koordinat ke input hidden
                $('#koordinat').val(formattedCoords);
            });

            map.addInteraction(draw);
        });

        //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);

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

                    // Buat source baru untuk fitur KML
                    var source = new ol.source.Vector({
                        features: [feature]
@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" class="form-control" 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" required>
                    </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" 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" 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" 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" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="nama_perusahaan">Nama Perusahaan</label>
                        <input type="text" name="nama_perusahaan" class="form-control">
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat_perusahaan">Alamat Perusahaan</label>
                        <input type="text" name="alamat_perusahaan" class="form-control">
                    </div>
                    <div class="form-group mb-3">
                        <label for="nib">NIB <span class="text-danger">*</span></label>
                        <input id="nib" type="text" name="nib" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="pekerjaan">Pekerjaan <span class="text-danger">*</span></label>
                        <input type="text" name="pekerjaan" class="form-control" id="pekerjaan" value="{{ old('pekerjaan') }}" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="jabatan">Jabatan</label>
                        <input type="text" name="jabatan" class="form-control">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="kegiatan_pengurugan">Kegiatan Pengurugan <span class="text-danger">*</span></label>
                        <input type="text" name="kegiatan_pengurugan" class="form-control" required>
                    </div>
                </div>
            </div>
            <h3>Lokasi Pengurugan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="alamat_lokasi">Alamat Lokasi <span class="text-danger">*</span></label>
                        <input type="text" name="alamat_lokasi" class="form-control" id="alamat_lokasi" 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" class="form-control" required>
                    </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" 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" 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 id="map" style="height: 400px; width: 100%; position: relative;"></div>
                    <input type="hidden" name="latitude" id="latitude">
                    <input type="hidden" name="longitude" id="longitude">
                </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></label><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_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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_bukti_kepemilikan" 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></label><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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_legalitas_perusahaan" class="form-control" required>
                    </div>
                </div>

                <div class="col-md-6">
                    <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><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_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></label><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></label><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></label><span class="text-danger">*</span></label>
                        <input type="file" name="file_dokumen_lingkungan" 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 pada peta untuk
                                menentukan lokasi. Klik pada peta untuk menambahkan titik, dan klik dua kali untuk
                                menyelesaikan polygon.
                            </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="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;

        $(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([112.7378, -7.2756]), // Koordinat Surabaya
                    zoom: 12
                })
            });

            // Layer untuk polygon
            var 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);

            // Interaksi menggambar
            let draw = new ol.interaction.Draw({
                source: source,
                type: 'Polygon'
            });

            // Event listener untuk menangkap koordinat setelah menggambar
            draw.on('drawend', function(evt) {
                const feature = evt.feature;
                const polygon = feature.getGeometry();
                const coordinates = polygon.getCoordinates()[0];

                // Konversi koordinat ke format yang diinginkan
                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(',');

                // Simpan koordinat ke input hidden
                $('#koordinat').val(formattedCoords);
            });

            map.addInteraction(draw);
        });

        //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);

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

                    // Buat source baru untuk fitur KML
                    var source = new ol.source.Vector({
                        features: [feature]
                    });

                    // Buat layer vector baru untuk KML
                    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
                            })
                        })
                    });

                    // Tambahkan layer KML ke peta dan simpan sebagai layer aktif
                    map.addLayer(kmlVector);
                    activeLayer = kmlVector;

                    // Zoom ke fitur yang ditambahkan
                    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);

            // Buat fitur poligon dari koordinat
            var coordinates = coordArray.map(coord => [parseFloat(coord[0]), parseFloat(coord[1])]);
            var feature = new ol.Feature({
                geometry: new ol.geom.Polygon([coordinates]).transform('EPSG:4326', 'EPSG:3857')
            });

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


            // Buat layer vector baru untuk KML
            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
                    })
                })
            });

            // Tambahkan layer KML ke peta dan simpan sebagai layer aktif
            map.addLayer(kmlVector);
            activeLayer = kmlVector;

            // Zoom ke fitur yang ditambahkan
            map.getView().fit(feature.getGeometry(), {
                padding: [50, 50, 50, 50]
            });
        });
    </script>
@endpush