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

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

    <style>
        .layer-control {
            position: absolute;
            top: 20px;
            right: 20px;
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            font-family: Arial, sans-serif;
            z-index: 1000;
        }
        .layer-control h4 {
            margin: 0 0 10px 0;
            font-size: 14px;
            text-align: center;
        }
        .layer-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        .layer-item input {
            margin-right: 10px;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        <h1>Verifikasi Data Permohonan</h1>

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

        <form action="{{ route('peil-banjir.check', $data->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <h3>Data Penerbitan Surat</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="no_surat_terbit">Nomor Surat <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">600.1.15.2/</span>
                            <input type="text" name="no_surat_terbit" class="form-control" value="{{ $data->no_surat_terbit }}" style="max-width: 100px !important;" required>
                            <span class="input-group-text">-TR/ DPUPRP</span>
                        </div>
                    </div>
                </div>
            </div>
            <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 }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="alamat">Alamat </label>
                        <input type="text" name="alamat" class="form-control @error('alamat') is-invalid @enderror" value="{{ $data->alamat }}" disabled>
                        @error('alamat')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </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 }}" disabled>
                    </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 }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="email_aktif">Email Aktif </label>
                        <input type="email" name="email_aktif" class="form-control" value="{{ $data->email_aktif }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="nik">NIK </label>
                        <input id="nik" type="text" name="nik" class="form-control" value="{{ $data->nik }}" disabled>
                    </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" class="form-control" value="{{ $data->nama_perusahaan }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="jabatan">Jabatan</label>
                        <input type="text" name="jabatan" class="form-control" value="{{ $data->jabatan }}" disabled>
                    </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 }}" disabled>
                    </div><div class="form-group mb-3">
                        <label for="no_kontrak">No Surat <span class="text-danger">*</span></label>
                        <input id="no_kontrak" type="text" name="no_kontrak" class="form-control" value="{{ $data->no_kontrak }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="no_kontrak">Tgl Surat <span class="text-danger">*</span></label>
                        <input id="tgl_surat" type="date" name="tgl_surat" class="form-control" value="{{ $data->tgl_surat }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="rencana_pembangunan">Rencana Pembangunan </label>
                        <input type="text" name="rencana_pembangunan" class="form-control" value="{{ $data->rencana_pembangunan }}" disabled>
                    </div>
                </div>
            </div>
            <h3>Rencana Kegiatan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="no_peilbanjir">No Peil Banjir </label>
                        <input type="text" name="no_peilbanjir" class="form-control" value="{{ $data->no_peilbanjir }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="jalan">Jalan </label>
                        <input type="text" name="jalan" class="form-control" value="{{ $data->jalan }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas_als_hak">Luas Alas Hak</label>
                        <input type="number" name="luas_als_hak" class="form-control" value="{{ $data->luas_als_hak }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas_d_krk">Luas Dok.KRK <span class="text-danger">*</span></label>
                        <input type="number" min="0" step="0.01" name="luas_d_krk" class="form-control" value="{{ $data->luas_d_krk ?? '0' }}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="kecamatan">Kecamatan </label>
                        <select name="id_kecamatan" class="form-control" id="kecamatan" disabled>
                            <option value="">Pilih Kecamatan</option>
                            @foreach ($kecamatan as $item)
                                <option value="{{ $item->id }}" {{ $data->id_kecamatan == $item->id ? 'selected' : '' }}>
                                    {{ $item->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" disabled>
                            <option value="">Pilih Desa</option>
                            @foreach ($desa as $item)
                                <option value="{{ $item->id }}" {{ $data->id_desa == $item->id ? 'selected' : '' }}>
                                    {{ $item->nama_desa }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas">Luas Permohonan</label>
                        <input type="text" name="luas" class="form-control" value="{{ $data->luas }}" disabled>
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas_ipb">Luas IPB <span class="text-danger">*</span></label>
                        <input type="number" min="0" step="0.01" name="luas_ipb" class="form-control" value="{{ $data->luas_ipb ?? '0' }}" required>
                    </div>
                </div>
            </div>
            <h3>File Dokumen</h3>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <td class="text-center">Nama File</td>
                                <td class="text-center">Download</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>File KTP</td>
                                <td class="text-center">
                                    @if($data->file_ktp)
                                        <a href="{{ route('peil-banjir.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'ktp']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                                    @else
                                        <span class="text-danger">Belum Ada File KTP</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>File NPWP</td>
                                    <td class="text-center">
                                    @if($data->file_npwp)
                                        <a href="{{ route('peil-banjir.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'npwp']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                                    @else
                                        <span class="text-danger">Belum Ada File NPWP</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>File KKPR/KRK</td>
                                <td class="text-center">
                                    @if($data->file_krk)
                                        <a href="{{ route('peil-banjir.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'krk']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                                    @else
                                        <span class="text-danger">Belum Ada File KKPR/KRK</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>File Akta Pendirian Perusahaan</td>
                                <td class="text-center">
                                    @if($data->file_akta_pendirian)
                                        <a href="{{ route('peil-banjir.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'aktaperusahaan']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                                    @else
                                        <span class="text-danger">Belum Ada File Akta Pendirian Perusahaan</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>File Site Plan</td>
                                <td class="text-center">
                                    @if($data->file_site_plan)
                                        <a href="{{ route('peil-banjir.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'siteplan']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                                    @else
                                        <span class="text-danger">Belum Ada File Site Plan</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>File Surat Pernyataan</td>
                                <td class="text-center">
                                    @if($data->file_suratpernyataan)
                                        <a href="{{ route('peil-banjir.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'sp']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                                    @else
                                        <span class="text-danger">Belum Ada File Surat Pernyataan</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td>File Foto</td>
                                <td class="text-center">
                                    @if($data->file_foto)
                                        <a href="{{ route('peil-banjir.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'foto']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                                    @else
                                        <span class="text-danger">Belum Ada File Foto</span>
                                    @endif
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="form-group mb-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Bukti Kepemilikan Tanah</h5>
                </div>
                <div id="bukti-tanah-container">
                </div>
            </div>

            <h3>Verifikasi Peta Lokasi</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="koordinat">Koordinat Lokasi Pemohon</label>
                        <textarea class="form-control" cols="10" rows="4" disabled>{{ $data->koordinat }}</textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="koordinat">Koordinat Lokasi Verifikasi</label>
                        <textarea class="form-control" name="koordinat_verifikator" id="koordinat_verifikator" cols="10" rows="4" readonly>{{ $data->koordinat_verifikator }}</textarea>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="boxpeta">
                        <div id="peta">
                            <div class="layer-control">
                                <h4>Layer Control</h4>
                                <div class="layer-item">
                                    <label>
                                        <input type="radio" name="layer" value="OpenStreetMap" checked> OpenStreetMap
                                    </label>
                                </div>
                                <div class="layer-item">
                                    <label>
                                        <input type="radio" name="layer" value="Satellite"> Satellite
                                    </label>
                                </div>
                                <hr>
                                <div class="layer-item">
                                    <input type="checkbox" id="rtrw-layer"> <label for="rtrw-layer">RTRW Layer</label>
                                </div>
                                <div class="layer-item">
                                    <input type="checkbox" id="rdtr-layer"> <label for="rdtr-layer">RDTR Layer</label>
                                </div>
                                <div class="layer-item">
                                    <input type="checkbox" id="lokasi-layer" checked> <label for="rdtr-layer">Lokasi Pemohon</label>
                                </div>
                            </div>
                        </div>
                        <textarea name="geone_verifikator" id="geone_verifikator" style="display: none;"></textarea>
                    </div>
                </div>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Isian Pola Ruang
                </label>
            </div>

            <table id="tabel-pola-ruang" class="table table-bordered">
                <input type="hidden" value="{{ $pola_ruang->count() }}" id="total_pola_ruang">
                <thead>
                    <tr>
                        <th class="text-center" width="5%">No</th>
                        <th class="text-center" width="85%">Isian</th>
                        <th class="text-center" width="10%">Aksi</th>
                    </tr>
                </thead>
                <tbody id="tabel-pola-ruang-body">
                    @if (!$pola_ruang->isEmpty())
                        @foreach ($pola_ruang as $pola)
                            <tr>
                                <td class="text-center align-middle">{{ $loop->iteration }}</td>
                                <td>
                                    <textarea name="pola_ruang_isian[]" class="form-control" rows="3">{{ $pola->isian }}</textarea>
                                </td>
                                <td class="text-center align-middle">
                                    <button type="button" class="btn btn-danger btn-sm hapus-pola-ruang">
                                        <i class="fas fa-trash"></i> Hapus
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="3" class="text-center">
                                <div class="alert alert-info mb-0" role="alert">
                                    <i class="fas fa-info-circle"></i> Tambahkan Baris dengan mengklik tombol "Tambah" dibawah
                                </div>
                            </td>
                        </tr>
                    @endif
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                            <button type="button" id="tambah-pola-ruang-baru" class="btn btn-primary w-100">
                                <i class="fas fa-plus"></i> Tambah Isian Baru
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Kawasan Rawan Bencana
                </label>
                <div class="row">
                    <div class="col-md-12">
                        <p>Dari data pola ruang tersebut di atas dan ditinjau dari peta rawan bencana pada dokumen RTRW Kabupaten Banjar Tahun 2021-2041 yang tertuang pada Perda Banjar Nomor 04 tahun 2021 tentang Rencana Tata Ruang Wilayah Kabupaten Banjar Tahun 2021 – 2041, lokasi yang dimohonkan berada pada Lokasi <span id="bcn_ljt"></span></p>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="kws_rwn_bcn" id="kws_rwn_bcn" class="form-control" rows="3">{{ $data->kws_rwn_bcn ?? '' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Kontur Tanah
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="kontur_tanah" id="kontur_tanah" class="form-control" rows="3">{{ $data->kontur_tanah ?? 'Hasil analisis kontur tanah cenderung datar dengan sedikit penurun mengarah pada bagian belakang persil tanah yang dimohonkan dan kembali naik atau  ada cekungan pada bagian belakang persil tanah yang dimohonkan.' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Kawasan daerah irigasi
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="kawasan_daerah_irigasi" id="kawasan_daerah_irigasi" class="form-control" rows="3">{{ $data->kawasan_daerah_irigasi ?? 'Termasuk dalam delineasi DIR Banua Anyar di Kecamatan Gambut.' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_peilbanjir" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Informasi Peil Banjir
                </label>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2">
                    Informasi Peninjauan Lapangan
                </label>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Tanggal Peninjauan <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="tgl_tinjau" name="tgl_tinjau" value="{{ $data->tgl_tinjau ?? date('Y-m-d') }}" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Nomor Berita Acara <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="no_ba" name="no_ba" value="{{ $data->no_ba }}" placeholder="Masukkan nomor berita acara" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Tanggal Berita Acara <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="tgl_ba" name="tgl_ba" value="{{ $data->tgl_ba }}" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>File Berita Acara</label>
                            <input type="file" class="form-control" id="file_ba" name="file_ba" accept=".pdf">
                            <small class="text-muted">Format file: PDF, Ukuran maksimal: 2MB</small>
                            @if($data->file_ba)
                                <div class="mb-2">
                                    <a href="{{ asset('storage/'.$data->file_ba) }}" class="btn btn-sm btn-primary" target="_blank">
                                        <i class="fas fa-download"></i> Download Berita Acara
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <table id="tabel-isian" class="table table-bordered">
                <thead>
                    <tr>
                        <th class="text-center">No</th>
                        <th class="text-center">Isian</th>
                        <th class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody id="tabel-isian-body">
                    <input type="hidden" value="{{ $isian_peilbanjir->count() }}" id="total_isian_peil">
                    @if (!$isian_peilbanjir->isEmpty())
                        @foreach ($isian_peilbanjir as $isian)
                            <tr>
                                <td class="text-center align-middle">{{ $loop->iteration }}</td>
                                <td class="text-center align-middle">
                                    <textarea name="peil_isian[]" class="form-control" rows="3">{{ $isian->isian }}</textarea>
                                </td>
                                <td class="text-center align-middle">
                                    <button type="button" class="btn btn-danger btn-sm hapus-isian">Hapus</button>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td rowspan="3" class="text-center">
                                <div class="alert alert-info" role="alert">
                                    <i class="fas fa-info-circle"></i> Tambahkan Baris dengan mengklik tombol "Tambah" dibawah
                                </div>
                            </td>
                        </tr>
                    @endif
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                            <button type="button" id="tambah-isian-baru" class="btn btn-primary btn-full w-100">
                                <i class="fas fa-plus"></i> Tambah Isian Baru
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>

            <div class="form-group mb-3">
                <label for="catatan">Catatan</label>
                <textarea name="catatan" id="catatan" class="form-control" rows="3"
                    @if ($data->id_status == 2) readonly @endif>{{ $data->catatan }}</textarea>
            </div>
            <button type="button" id="kirim-catatan" class="btn btn-success mb-3">Kirim Catatan ke
                Pomohon</button>
            <div class="form-group mb-3">
                <label for="krk_ditandatangani">KRK ditandatangani</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="file" name="krk_ditandatangani" class="form-control" value="{{ $data->krk_ditandatangani }}" @if ($data->id_status == 2) readonly @endif>
                    </div>
                    <div class="col-md-6">
                        @if ($data->krk_ditandatangani)
                            <a href="{{ route('peil-banjir.download_dokumen', ['id'=> $data->id, 'fl_kode'=> 'krkttd']) }}" class="btn btn-primary btn-sm" target="_blank">Download</a>
                        @else
                            <a href="#" class="btn btn-warning btn-sm" target="_blank">Belum Ada File KRK</a>
                        @endif
                    </div>
                </div>
                @if($data->krk_ditandatangani)
                    <small class="text-muted">File saat ini: {{ $data->krk_ditandatangani }}</small>
                @endif
            </div>

            <div class="form-group mb-3">
                <label for="id_status">Status</label>
                <select id="id_status" name="id_status" class="form-control">
                    @foreach ($status as $s)
                        {{-- Tampilkan Status Selain FPR, Karena Peil Banjir Tanpa FPR --}}
                        @if ($s->id != 9)
                            <option value="{{ $s->id }}" {{ $data->id_status == $s->id ? 'selected' : '' }} @if (in_array($data->id_status, [1, 3, 10])) {{ in_array($s->id, [6, 7, 8]) ? 'disabled' : '' }} @endif>
                                {{ $s->status }}
                            </option>
                        @endif
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
@endsection



@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
    <script>
        $('#tambah-isian-baru').on('click', function() {
            let total_isian = parseInt($('#total_isian_peil').val());
            total_isian++;
            $('#total_isian_peil').val(total_isian);

            $('#tabel-isian-body').append(`
                <tr>
                    <td class="text-center align-middle">${total_isian}</td>
                    <td class="text-center align-middle"><textarea name="peil_isian[]" class="form-control" rows="3"></textarea></td>
                    <td class="text-center align-middle"><button type="button" class="btn btn-danger btn-sm hapus-isian">Hapus</button></td>
                </tr>
            `);
        });

        $(document).on('click', '.hapus-isian', function() {
            // Hapus baris
            $(this).closest('tr').remove();

            // Update penomoran
            $('#tabel-isian-body tr').each(function(index) {
                $(this).find('td:first').text(index + 1);
            });

            // Update total isian
            let total_isian = parseInt($('#total_isian_peil').val());
            total_isian--;
            $('#total_isian_peil').val(total_isian);
        });

        let default_pola_ruang = [];
        default_pola_ruang[1] = "Sesuai dengan yang tertuang pada Dokuemen KRK yang telah di terbitkan Nomor: 600.3.2.1/1416-TR/DPUPRP, tanggal 31 Oktober 2024 yang mengacu pada Perbup Nomor 09 Tahun 2023 Tentang RDTR Wilayah Perencanaan Perkotaan  Gambut-Kertak hanyar Tahun 2023-2043 lokasi yang dimohonka berada pada Zona Perumahan (R) 7.550,21 M² dan Perlindungan Setempat (PS) 67,22 M².";

        // Script untuk tabel pola ruang
        $('#tambah-pola-ruang-baru').on('click', function() {
            let total_pola_ruang = parseInt($('#total_pola_ruang').val());
            total_pola_ruang++;
            $('#total_pola_ruang').val(total_pola_ruang);

            // Hapus pesan info jika ini adalah baris pertama
            if(total_pola_ruang === 1) {
                $('#tabel-pola-ruang-body tr:first').remove();
            }

            $('#tabel-pola-ruang-body').append(`
                <tr>
                    <td class="text-center align-middle">${total_pola_ruang}</td>
                    <td>
                        <textarea name="pola_ruang_isian[]" class="form-control" rows="3">${default_pola_ruang[total_pola_ruang] ?? ''}</textarea>
                    </td>
                    <td class="text-center align-middle">
                        <button type="button" class="btn btn-danger btn-sm hapus-pola-ruang">
                            <i class="fas fa-trash"></i> Hapus
                        </button>
                    </td>
                </tr>
            `);
        });

        // Handler untuk hapus pola ruang
        $(document).on('click', '.hapus-pola-ruang', function() {
            // Hapus baris
            $(this).closest('tr').remove();

            // Update penomoran
            $('#tabel-pola-ruang-body tr').each(function(index) {
                $(this).find('td:first').text(index + 1);
            });

            // Update total pola ruang
            let total_pola_ruang = parseInt($('#total_pola_ruang').val());
            total_pola_ruang--;
            $('#total_pola_ruang').val(total_pola_ruang);

            // Tampilkan pesan info jika tidak ada baris tersisa
            if(total_pola_ruang === 0) {
                $('#tabel-pola-ruang-body').html(`
                    <tr>
                        <td colspan="3" class="text-center">
                            <div class="alert alert-info mb-0" role="alert">
                                <i class="fas fa-info-circle"></i> Tambahkan Baris dengan mengklik tombol "Tambah" dibawah
                            </div>
                        </td>
                    </tr>
                `);
            }
        });

        $('#kirim-catatan').on('click', function() {
            $.ajax({
                url: "{{ route('peil.kirimCatatan', $data->id) }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    catatan: $('#catatan').val()
                }
            });
        });
    </script>

    <!-- 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">

    <script>
        $(document).ready(function() {
            var buktiMilik = {!! json_encode($data->BuktiMilik) !!};
            const container = document.getElementById('bukti-tanah-container');
            if(buktiMilik.length > 0){
                buktiMilik.forEach(elm => {
                    let urlDown = "{{ route('peil-banjir.download_bukti', ['idbukti'=> 'UBAH_IDBUKTI']) }}".replace('UBAH_IDBUKTI', elm.id);
                    const newRow = document.createElement('div');
                    newRow.className = 'row mb-3';
                    newRow.innerHTML = `
                        <input type="hidden" name="id_bukti[]" value="${elm.id}">
                        <div class="col-md-4">
                            <label for="jenis_sertifikat_tanah">Jenis Bukti Atas Tanah <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Pilih salah satu jenis sertifikat tanah yang anda miliki"></i></label>
                            <select name="jenis_sertifikat_tanah[]" class="form-control" disabled>
                                <option value="">Pilih Jenis Bukti</option>
                                <option value="SHM" ${(elm.jns_bukti == 'SHM' ) ? 'selected':''}>Sertifikat Hak Milik (SHM)</option>
                                <option value="HGU" ${(elm.jns_bukti == 'HGU' ) ? 'selected':''}>Hak Guna Usaha (HGU)</option>
                                <option value="SKT" ${(elm.jns_bukti == 'SKT' ) ? 'selected':''}>Surat Keterangan Tanah (SKT)</option>
                                <option value="HGB" ${(elm.jns_bukti == 'HGB' ) ? 'selected':''}>Hak Guna Bangunan (HGB)</option>
                                <option value="Hak Pakai" ${(elm.jns_bukti == 'Hak Pakai' ) ? 'selected':''}>Hak Pakai</option>
                                <option value="Petok D" ${(elm.jns_bukti == 'Petok D' ) ? 'selected':''}>Petok D</option>
                                <option value="Letter C" ${(elm.jns_bukti == 'Letter C' ) ? 'selected':''}>Letter C</option>
                                <option value="Surat Girik" ${(elm.jns_bukti == 'Surat Girik' ) ? 'selected':''}>Surat Girik</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="no_sertifikat">Nomor Sertifikat/Bukti Kepemilikan <i class="fas fa-info-circle text-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Masukkan nomor yang tertera pada bukti kepemilikan tanah"></i></label>
                            <input type="text" name="no_sertifikat[]" class="form-control" value="${elm.no_bukti}" placeholder="Masukkan nomor sertifikat/bukti kepemilikan" disabled>
                        </div>
                        <div class="col-md-4">
                            <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><br>
                            ${(elm.fl_bukti) ? `<a href="${urlDown}" class="btn btn-primary btn-sm" target="_blank">Download</a>` : ''}
                        </div>
                    `;
                    container.appendChild(newRow);
                });
            }else{
                container.innerHTML = `<div class="alert alert-info" role="alert">
                    <i class="fas fa-info-circle"></i> Pemohon Belum Mengupload Bukti Kepemilikan Tanah
                </div>`;
            }

        });
    </script>

    <script>
        let map;
        $(document).ready(function() {
            var klasifikasiRtrw = {!! $klasifikasiRtrw !!};
            var klasifikasiRdtr = {!! $klasifikasiRdtr !!};
            var layerRdtr = new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: '{{ asset('storage/layers/fkBHyBZuHJNXrTu46BahEpoLT5G88rxlrXvLKaA7.txt') }}',
                    format: new ol.format.GeoJSON()
                }),
                style: function(feature) {
                    // Cari klasifikasi yang sesuai dengan nilai feature
                    var nilaiFeature = feature.get('NAMOBJ');
                    var klasifikasiFeature = klasifikasiRdtr.find(function(k) {
                        return k.kolom_klasifikasi === nilaiFeature;
                    });

                    // Tentukan warna berdasarkan klasifikasi
                    var warnaRdtr = '#0000ff'; // Warna default biru
                    if (klasifikasiFeature) {
                        warnaRdtr = klasifikasiFeature.warna_area;
                    }

                    return new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: warnaRdtr,
                            width: 2
                        }),
                        fill: new ol.style.Fill({
                            color: warnaRdtr + '80' // Tambah transparansi (50%)
                        }),
                        text: new ol.style.Text({
                            text: feature.get('WADMKC'),
                            font: '14px Arial',
                            fill: new ol.style.Fill({
                                color: warnaRdtr
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#fff',
                                width: 3
                            })
                        })
                    });
                },
                visible: false
            });
            var layerRtrw = new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: '{{ asset('storage/layers/vt0qxo9CqPCmeG4Up2dnqX8LFKoWazAgVZYWRJVC.txt') }}',
                    format: new ol.format.GeoJSON()
                }),
                style: function(feature) {
                    // Cari klasifikasi yang sesuai dengan nilai feature
                    var nilaiFeature = feature.get('NAMOBJ');

                    var klasifikasiFeature = klasifikasiRtrw.find(function(k) {

                        return k.kolom_klasifikasi == nilaiFeature;
                    });

                    // Tentukan warna berdasarkan klasifikasi
                    var warnaRtrw = '#0000ff'; // Warna default biru
                    if (klasifikasiFeature) {
                        warnaRtrw = klasifikasiFeature.warna_area;
                    }

                    return new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: warnaRtrw,
                            width: 2
                        }),
                        fill: new ol.style.Fill({
                            color: warnaRtrw + '80' // Tambah transparansi (50%)
                        }),
                        text: new ol.style.Text({
                            text: feature.get('WADMKC'),
                            font: '14px Arial',
                            fill: new ol.style.Fill({
                                color: warnaRtrw
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#fff',
                                width: 3
                            })
                        })
                    });
                },
                visible: false
            });

            const geojsonPemohonUrl = "{{ asset('storage/geojson_lokasi/'.$data->geojson_lokasi) }}";
            const lyr_pemohon = new ol.layer.Vector({
                source: new ol.source.Vector({
                    format: new ol.format.GeoJSON(),
                    url: geojsonPemohonUrl, // Load GeoJSON pemohon
                }),
                visible: true
            });
            // Inisialisasi peta
            map = new ol.Map({
                target: 'peta',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM(),
                        title: 'OpenStreetMap',
                        visible: true
                    }),
                    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
                    }),
                    new ol.layer.Group({
                        layers: [layerRdtr, layerRtrw, lyr_pemohon],
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([114.847093, -3.413569]), // Koordinat Surabaya
                    zoom: 12
                })
            });

            document.getElementById('rtrw-layer').addEventListener('change', function () {
                layerRtrw.setVisible(this.checked);
            });
            document.getElementById('rdtr-layer').addEventListener('change', function () {
                layerRdtr.setVisible(this.checked);
            });
            document.getElementById('lokasi-layer').addEventListener('change', function () {
                lyr_pemohon.setVisible(this.checked);
            });

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

            if ("{{ $data->geojson_lokasi_verif }}" != '') {
                const geojsonVerifUrl = "{{ asset('storage/geojson_lokasi/'.$data->geojson_lokasi_verif) }}";
                var sourceVerif = new ol.source.Vector({
                    format: new ol.format.GeoJSON(),
                    url: geojsonVerifUrl, // Load GeoJSON Yg Terverif
                });
            }else{
                var sourceVerif = new ol.source.Vector({
                    format: new ol.format.GeoJSON(),
                    url: geojsonPemohonUrl, // Load GeoJSON pemohon
                });
                $('#koordinat_verifikator').val($('#koordinat').val());
            }

            sourceVerif.once('change', function () {
                if (sourceVerif.getState() === 'ready') {
                    const extent = sourceVerif.getExtent();
                    if (extent && !isNaN(extent[0])) {
                        map.getView().fit(extent, { padding: [50, 50, 50, 50], duration: 1000 });
                    }
                }
                updateGeoJSON();
            });

            function updateGeoJSON() {
                const geojsonFormat = new ol.format.GeoJSON();
                const features = sourceVerif.getFeatures();
                const geojsonString = geojsonFormat.writeFeatures(features, {
                    featureProjection: 'EPSG:3857',
                });
                $('#geone_verifikator').val(geojsonString);

                // Get coordinates from the modified feature
                if (features.length > 0) {
                    const coordinates = features[0].getGeometry().getCoordinates()[0];
                    const coordString = coordinates.map(coord => {
                        const lonLat = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
                        return lonLat[1].toFixed(6) + ',' + lonLat[0].toFixed(6);
                    }).join(';');
                    $('#koordinat_verifikator').val(coordString);
                }
            }

            var vector = new ol.layer.Vector({
                source: sourceVerif,
                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);

            const modify = new ol.interaction.Modify({ source: sourceVerif });
            map.addInteraction(modify);

            modify.on('modifyend', function (event) {
                const geoJSONFormat = new ol.format.GeoJSON(); // Create GeoJSON format instance
                const features = sourceVerif.getFeatures();
                const geojsonString = geoJSONFormat.writeFeatures(features, {
                    featureProjection: 'EPSG:3857',
                });
                $('#geone_verifikator').val(geojsonString);

                // Get coordinates from the modified feature
                if (features.length > 0) {
                    const coordinates = features[0].getGeometry().getCoordinates()[0];
                    const coordString = coordinates.map(coord => {
                        const lonLat = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
                        return lonLat[1].toFixed(6) + ',' + lonLat[0].toFixed(6);
                    }).join(';');
                    $('#koordinat_verifikator').val(coordString);
                }
            });

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

            // Event listener untuk menangkap koordinat setelah menggambar
            draw.on('drawend', function(evt) {
                sourceVerif.clear();
                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[1].toFixed(6) + ',' + lonLat[0].toFixed(6);
                }).join(';');

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

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

                $('#geone_verifikator').val(geojsonStr);
            });

            map.addInteraction(draw);

            // Event listener untuk textarea kws_rwn_bcn
            $('#kws_rwn_bcn').on('input', function() {
                // Mengambil nilai textarea dan mengganti newline dengan tag br
                let text = $(this).val().replace(/\n/g, '<br>');
                $('#bcn_ljt').html(text);
            });

            // Trigger event saat halaman dimuat untuk menampilkan nilai awal
            let initialText = $('#kws_rwn_bcn').val().replace(/\n/g, '<br>');
            $('#bcn_ljt').html(initialText);
        });
    </script>
@endpush