@extends('layouts.master')

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

        #polygon-button {
            z-index: 1000;
            left: 10px;
            bottom: 10px;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        <h1>Edit Data</h1>
        <form action="{{ route('data.update', $data->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <input type="hidden" name="koordinat" id="koordinat">
            <h3>Data Pemohon</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="nama_pemohon">Nama Pemohon</label>
                        <input type="text" name="nama_pemohon" class="form-control" value="{{ $data->nama_pemohon }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat">Alamat</label>
                        <input type="text" name="alamat" class="form-control" value="{{ $data->alamat }}">
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="no_telp">No. WA</label>
                        <input id="no_telp" type="text" name="no_telp" class="form-control" value="{{ $data->no_telp }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="npwp">NPWP</label>
                        <input id="npwp" type="text" name="npwp" class="form-control" value="{{ $data->npwp }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="email_aktif">Email Aktif</label>
                        <input type="text" name="email_aktif" class="form-control" value="{{ $data->email_aktif }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="nik">NIK</label>
                        <input id="nik" type="text" name="nik" class="form-control" value="{{ $data->nik }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="nama_perusahaan">Nama Perusahaan</label>
                        <input type="text" name="nama_perusahaan" class="form-control" value="{{ $data->nama_perusahaan }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat_perusahaan">Alamat Perusahaan</label>
                        <input type="text" name="alamat_perusahaan" class="form-control" value="{{ $data->alamat_perusahaan }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="nib">NIB</label>
                        <input id="nib" type="text" name="nib" class="form-control" value="{{ $data->nib }}">
                    </div>
                </div>
            </div>
            <h3>Rencana Kegiatan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="nama_kegiatan">Nama Kegiatan</label>
                        <input type="text" name="nama_kegiatan" class="form-control" value="{{ $data->nama_kegiatan }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="nama_branded">Nama Branded</label>
                        <input type="text" name="nama_branded" class="form-control" value="{{ $data->nama_branded }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="kode_kbli">Kode KBLI</label>
                        <input type="text" name="kode_kbli" class="form-control" value="{{ $data->kode_kbli }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat_lokasi">Alamat Lengkap Lokasi</label>
                        <textarea name="alamat_lokasi" class="form-control" rows="3">{{ $data->alamat_lokasi }}</textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="luas_tanah">Luas tanah sesuai surat tanah (m<sup>2</sup>)</label>
                        <input id="luas_tanah" type="text" name="luas_tanah" class="form-control" value="{{ $data->luas_tanah }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="jumlah_lantai">Rencana Jumlah Lantai Bangunan</label>
                        <input id="jumlah_lantai" type="text" name="jumlah_lantai" class="form-control" value="{{ $data->jumlah_lantai }}">
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="kecamatan">Kecamatan</label>
                        <select name="id_kecamatan" class="form-control" id="kecamatan" required>
                            <option value="">Pilih Kecamatan</option>
                            @foreach ($kecamatan as $k)
                                <option value="{{ $k->id }}" {{ $k->id == $data->id_kecamatan ? 'selected' : '' }}>{{ $k->nama_kecamatan }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="desa">Desa</label>
                        <select name="id_desa" class="form-control" id="desa">
                            <option value="">Pilih Desa</option>
                            @foreach ($desa as $d)
                                <option value="{{ $d->id }}" {{ $d->id == $data->id_desa ? 'selected' : '' }}>{{ $d->nama_desa }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <h3>File Dokumen & Peta Lokasi</h3>
            <div class="row">
                <div class="col-md-6">
                    <button type="button" id="polygon-button" class="mb-3"><i class="fas fa-draw-polygon"></i> Gambar
                        Polygon</button>
                    <div id="peta"></div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="file_ktp">File KTP</label>
                        <div class="input-group">
                            <input type="file" name="file_ktp" class="form-control" value="{{ $data->file_ktp }}">
                            <div class="input-group-append">
                                <a href="{{ asset('storage/'.$data->file_ktp) }}" target="_blank" class="btn btn-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_npwp">File NPWP</label>
                        <div class="input-group">
                            <input type="file" name="file_npwp" class="form-control" value="{{ $data->file_npwp }}">
                            <div class="input-group-append">
                                <a href="{{ asset('storage/'.$data->file_npwp) }}" target="_blank" class="btn btn-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_oss">File OSS</label>
                        <div class="input-group">
                            <input type="file" name="file_oss" class="form-control" value="{{ $data->file_oss }}">
                            <div class="input-group-append">
                                <a href="{{ asset('storage/'.$data->file_oss) }}" target="_blank" class="btn btn-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_suratkuasa">File Surat Kuasa</label>
                        <div class="input-group">
                            <input type="file" name="file_suratkuasa" class="form-control" value="{{ $data->file_suratkuasa }}">
                            <div class="input-group-append">
                                <a href="{{ asset('storage/'.$data->file_suratkuasa) }}" target="_blank" class="btn btn-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_hakatastanah">File Hak Atas Tanah</label>
                        <div class="input-group">
                            <input type="file" name="file_hakatastanah" class="form-control" value="{{ $data->file_hakatastanah }}">
                            <div class="input-group-append">
                                <a href="{{ asset('storage/'.$data->file_hakatastanah) }}" target="_blank" class="btn btn-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_suratpernyataan">File Surat Pernyataan</label>
                        <div class="input-group">
                            <input type="file" name="file_suratpernyataan" class="form-control" value="{{ $data->file_suratpernyataan }}">
                            <div class="input-group-append">
                                <a href="{{ asset('storage/'.$data->file_suratpernyataan) }}" target="_blank" class="btn btn-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_foto">File Foto</label>
                        <div class="input-group">
                            <input type="file" name="file_foto" class="form-control" value="{{ $data->file_foto }}">
                            <div class="input-group-append">
                                <a href="{{ asset('storage/'.$data->file_foto) }}" target="_blank" class="btn btn-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
@endsection



@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
    <script>
        $(document).ready(function() {
            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, '');
                
                // Update nilai input
                $(this).val(value);
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // Inisialisasi peta
            var map = new ol.Map({
                target: 'peta',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([115.0483, -3.3168]), // Koordinat Kabupaten Banjar
                    zoom: 10
                })
            });

            // 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
                    })
                })
            });
            map.addLayer(vector);

            // Tambah tombol polygon
            var polygonButton = document.getElementById('polygon-button');

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

            var isDrawing = false;
            polygonButton.onclick = function() {
                polygonButton.innerHTML = isDrawing ? '<i class="fas fa-draw-polygon"></i> Gambar Polygon' :
                    '<i class="fas fa-stop"></i> Akhiri Gambar';
                if (!isDrawing) {
                    map.addInteraction(draw);
                    polygonButton.style.backgroundColor = '#ffcc33';
                } else {
                    map.removeInteraction(draw);
                    polygonButton.style.backgroundColor = 'white';
                }
                isDrawing = !isDrawing;
                // console.log(source.getFeatures()[0]);
                document.getElementById('koordinat').value = JSON.stringify(source.getFeatures()[0]
                    .getGeometry().getCoordinates());
            };

            // Atur ukuran peta
            document.getElementById('peta').style.height = '400px';
            document.getElementById('peta').style.marginBottom = '20px';
            map.updateSize();
        });
    </script>
    <div class="container">
        <!-- Form yang sudah ada -->
        <form>
            <!-- Input fields yang sudah ada -->
        </form>
    </div>
    
    <!-- Tombol WhatsApp Mengambang -->
    <a href="https://wa.me/6281358721520" class="float" target="_blank">
        <i class="fab fa-whatsapp my-float"></i>
    </a>
    
    <style>
        .float {
            position: fixed !important;
            width: 60px !important;
            height: 60px !important;
            bottom: 40px !important;
            right: 40px !important;
            background-color: #25d366 !important;
            color: #FFF !important;
            border-radius: 50% !important;
            text-align: center !important;
            font-size: 30px !important;
            box-shadow: 2px 2px 3px #999 !important;
            z-index: 99999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-decoration: none !important;
        }
    
        .my-float {
            margin: 0 !important;
        }
    
        .float:hover {
            background-color: #20ba5a !important;
            transform: scale(1.1) !important;
        }
    </style>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endpush